AngularJS modularization detailed explanation and example code-CSS Tutorial-php.cn

AngularJS modularization detailed explanation and example code

高洛峰

Release： 2016-12-28 14:02:56

Original

1590 people have browsed it

AngularJS has several major features, such as:

　1 MVC

　2 Modularity

　3 Command system

　4 Two-way data binding

So this article will take a look at the modularization of AngularJS.

First let’s talk about why modularization is implemented:

1 Increases the reusability of modules

2 Customizes the loading order by defining modules

　3 In unit testing, it is not necessary to load all the content

In the previous examples, the controller code was written directly in the script tag. The functions declared in this way are global and obviously not one the best choice.

Let’s take a look at how to modularize:

<script type="text/javascript">
     var myAppModule = angular.module(&#39;myApp&#39;,[]);
      
     myAppModule.filter(&#39;test&#39;,function(){
       return function(name){
         return &#39;hello, &#39;+name+&#39;!&#39;;
       };
     });
 
     myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
       $scope.name=&#39;xingoo&#39;;
     }]);
   </script>

Copy after login

First, create the module myAppModule through the global variable angular

angular.module('myApp',[]);

The first parameter is the name of the bound application app. This app identifies the entry point of Angular in the page, similar to the role of the main function.

The second parameter [] identifies the dependent modules.

Let’s see how to use modules!

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module(&#39;myApp&#39;,[]);
       
      myAppModule.filter(&#39;test&#39;,function(){
        return function(name){
          return &#39;hello, &#39;+name+&#39;!&#39;;
        };
      });
 
      myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
        $scope.name=&#39;xingoo&#39;;
      }]);
    </script>
  </body>
</html>

Copy after login

Directly bind myApp to ng-app and that’s it.

In the script, we created a filter and a controller through the module.

The function of filter is to add string modification.

The function of the controller is to initialize variables.

The running results of the program are as follows:

AngularJS 模块化详解及实例代码

#The above is the collection of information on AngularJS modularization. We will continue to add relevant information in the future. Thank you for your support of this site. !

For more articles related to AngularJS modularization details and example codes, please pay attention to the PHP Chinese website!