search

Home  >  Article  >  Web Front-end  >  How does AngularJS Component work? Usage examples of angularjs component

How does AngularJS Component work? Usage examples of angularjs component

寻∝梦
寻∝梦Original
2018-09-08 14:43:211296browse

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>

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);

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

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

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>

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);

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 "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>

index.js

(function(angular){

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

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

    });})(angular);

heroDetail.html

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

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);

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!

php json html angular JS 对象 作用域 input
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to build a web project with angularJs? Detailed introduction to building web projects with angularjsNext article：How to build a web project with angularJs? Detailed introduction to building web projects with angularjs

Related articles

See more