Home > Article > Web Front-end > AngularJS modularization detailed explanation and example code

AngularJS modularization detailed explanation and example code

高洛峰Original: 2016-12-28 14:02:561608browse

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>

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>

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!

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：jQuery EasyUI Tutorial-Panel (Panel)Next article：jQuery EasyUI Tutorial-Panel (Panel)

See more

AngularJS modularization detailed explanation and example code

Related articles