AngularJS has several major features, such as:
1 MVC
2 Modular
3 Command system
4 Two-way data binding
So let’s take a look at the modularization of AngularJS.
First, let’s talk about why you need to implement modularity:
1 Added reusability of modules
2. Define modules to realize customization of loading order
3 In unit tests, everything does not have to be loaded
In the previous examples, the controller's code is written directly in the script tag, so that the declared functions are global, which is obviously not the best choice.
Let's see how to modularize:
<script type="text/javascript"> var myAppModule = angular.module('myApp',[]); myAppModule.filter('test',function(){ return function(name){ return 'hello, '+name+'!'; }; }); myAppModule.controller('myAppCtrl',['$scope',function($scope){ $scope.name='xingoo'; }]); </script>First, create the module myAppModule through the global variable angular
angular.module('myApp',[]);
The first parameter is the bound application app name, which identifies the entry point of the angular in the page, similar to the function of the main function.
The second parameter [] identifies the dependent module.
Let’s take a look at how to use the module!
<!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('myApp',[]); myAppModule.filter('test',function(){ return function(name){ return 'hello, '+name+'!'; }; }); myAppModule.controller('myAppCtrl',['$scope',function($scope){ $scope.name='xingoo'; }]); </script> </body></html>Just bind myApp to ng-app and it's fine.
In script, we create a filter and a controller through modules.
The purpose of filter is to add string modification.
The function of the controller is to initialize the variable.
The running results of the program are as follows:
The above is the modular information sorting of AngularJS. We will continue to add relevant information in the future. Thank you for your support for this website!