How does AngularJS Component work? Usage examples of angularjs component-JS Tutorial-php.cn

How does AngularJS Component work? Usage examples of angularjs component

寻∝梦

Release： 2018-09-08 14:43:21

Original

1318 people have browsed it

This article introduces the introduction of angularjs component. Let us take a look at how component works. Then start reading this article right away

Preface about angularjs:

The most popular front-end JS frameworks are like VUE, REACK, and ANGULAR. These three The common features of frameworks are two-way data binding and component development. Before the version of angular1.5, directive was used as a component form, and directive itself is an instruction, not a component, so it cannot well assume the responsibility of component, so Google in angular1. The component component was launched in version 5 to shoulder the burden of component development in applications. So how does component work? How should it be used? We will explore the use of component components in detail in this chapter.

In AngularJS, Component is more suitable for component-based development than directive.

Let’s first look at a relatively simple Component example.

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <h3>hero</h3>
    <br>
    <hero-detail hero=&#39;ctrl.hero&#39;></hero-detail>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

Copy after login

In index.html we define a hero-detail tag. The declaration method of this tag is similar to directive. Note that a is defined in this tag. Attribute hero-detail, what is the purpose of this defined attribute? Let’s look down

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){
      this.hero = {
        name:&#39;Sunday&#39;
      }
    });})(angular);

Copy after login

In index.js we declared this controller, and in the controller we wrote this line of code

this.hero = {
        name:&#39;Sunday&#39;
      }

Copy after login

Believe it Careful friends have already seen that, yes, this corresponds to the attribute hero='ctrl.hero' we declared in index.html, which is the key to communication in the component.

heroDetail.html

<h1>HeroName: {{$ctrl.hero.name}}</h1>

Copy after login

In heroDetail.html we display the value transferred from index.html.

heroDetail.js

(function(angular){

  function HeroDetailController(){

  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        hero:&#39;=&#39;
      }
    });})(angular);

Copy after login

In heroDetail.js, we declare the component of heroDetail. Here we should pay attention to the tags displayed separated by horizontal bars in index.html, which need to be used in the js code. Hump mark display. Among them: bindings object, representing the communication protocol in the component.

Now is the display effect on the page:
How does AngularJS Component work? Usage examples of angularjs component

When we use bindings for data binding, the official does not recommend that we use "=" for data binding. , because "=" is a two-way data binding, which means that when we modify the data in the component, the value in its parent component will also be modified. The official recommendation is that we use "<" for one-way data binding. It is worth noting that even if we use "<", the same object is referenced in the parent component and component scope, so if you want to change the component object property or array element in the parent component, the parent component will still reflect the change. (If you want to see more, go to the PHP Chinese website AngularJS Development Manual to learn)

OK, after introducing the data binding, the binding between the Component and the parent component method is How does that proceed?
Let’s look at the following example

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <hero-detail on-log="ctrl.log(text)"></hero-detail>



    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

Copy after login

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){

      this.log = function(text){
        console.log("输出的内容为： " + text);
      }

    });})(angular);

Copy after login

heroDetail.html

<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>

Copy after login

heroDetail.js

(function(angular){

  function HeroDetailController($scope){

    $scope.text = &#39;&#39;;
    var ctrl = this;

    $scope.onLog = function(){
      ctrl.onLog({text:$scope.text});
    }
  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        onLog:&#39;&&#39;
      }
    });})(angular);

Copy after login

In the code, we use the "&" symbol to bind a method onLog(). This method receives a text parameter. It should be noted that when the parameter is passed, it is passed in the form of json. of. In this way, when we click the outputLog button, the content we entered in the input will be output.

Okay, this article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How does AngularJS Component work? Usage examples of angularjs component. For more information, please follow other related articles on the PHP Chinese website!