Module
Module就是一个容器，用于管理一个AngularJS应用的各个部分，是AngularJS中很重要的概念。一个AngularJS应用就是一个Module，其作用和C#应用程序中Assembly作用类似。C#中我们通过main函数来bootstrap应用程序。而AngularJS则通过na-app="moduleName"的方式来bootstrap一个AngularJS应用。moduleName就是Module对象的name.
下图是一个Module有哪些常见部分组成。
Config/Route:用于配置AngularJS应用的路由（AngularJS），作用类似于ASP.NET MVC应用中的Config/Route。
Filter:对数据起过滤作用，上文有解释。
Directive: 扩展HTML,AngularJS中最重要的概念。没有Directive就没有AngularJS。
Controller: 作用类似于ASP.NET MVC应用中的Controller。页面逻辑就在Controller中实现，通过controller可以对model进行操作。 AngularJS则通过内建的Data-Binding机制将model绑定到view(HTML控件)
Factory/Service/Provider/Value: 提供对数据源的访问。比如Restful API就是常见的数据源。 Controller通过Factory/Service/Provider/Value访问数据源完成数据的CRUD操作。
下面这段代码实现了上面实例的相同的功能，差异就在于这个实例通过创建一个module（angularJS应用），并在module下添加contorller来实现上面的功能。在SimpleController（Controller）中，我们创建了customers（Model）并进行数据初始化， View(Html控件）则直接绑定到customers（Model）。Scope是一个AngualrJS中所有viewModule的容器对象。Controller需要通过Scope是一个AngualrJS中所有viewModule的容器对象。Controller需要通过Scope来访问viewModule。
这个例子比上面例子更接近实际工程中的用法。
<!DOCTYPE html> <html data-ng-app="demoApp"> <head> <title>Using module Controller</title> </head> <body> <div data-ng-controller="SimpleController"> Names: <br /> <input type="text" data-ng-model="name" /> <br /> <ul> <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> </ul> </div> <script src="https://www.jb51.net/angular.min.js"></script> <script> var demoApp = angular.module("demoApp", []); demoApp.controller("SimpleController", function ($scope) { $scope.customers = [ { name: 'Terry Wu', city: 'Phoenix' }, { name: 'Terry Song', city: 'NewYork' }, { name: 'Terry Dow', city: 'NewYork' }, { name: 'Henry Dow', city: 'NewYork' } ]; }); </script> </body> </html> <!DOCTYPE html> <html data-ng-app="demoApp"> <head> <title>Using Controller</title> </head> <body> <div data-ng-controller="SimpleController"> Names: <br /> <input type="text" data-ng-model="name" /> <br /> <ul> <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> </ul> </div> <script src="https://www.jb51.net/angular.min.js"></script> <script> var demoApp = angular.module("demoApp", []); var controllers = {}; controllers.SimpleController = function ($scope) { $scope.customers = [ { name: 'Terry Wu', city: 'Phoenix' }, { name: 'Terry Song', city: 'NewYork' }, { name: 'Terry Dow', city: 'NewYork' }, { name: 'Henry Dow', city: 'NewYork' } ]; } demoApp.controller(controllers); </script> </body> </html> <!DOCTYPE html> <html data-ng-app="demoApp"> <head> <title>Using Controller</title> </head> <body> <div> <div data-ng-view=""></div> </div> <script src="https://www.jb51.net/angular.min.js"></script> <script src="https://www.jb51.net/angular-route.min.js"></script> <script> var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('https://www.jb51.net/', { controller: 'SimpleController', templateUrl: 'Partials/View1.html' }) .when('/view2', { controller: 'SimpleController', templateUrl: 'Partials/View2.html' }) .otherwise({redirectTo:'https://www.jb51.net/'}); }); var controllers = {}; controllers.SimpleController = function ($scope) { $scope.customers = [ { name: 'Terry Wu', city: 'Phoenix' }, { name: 'Terry Song', city: 'NewYork' }, { name: 'Terry Dow', city: 'NewYork' }, { name: 'Henry Dow', city: 'NewYork' } ]; $scope.addCustomer = function () { $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city }); }; } demoApp.controller(controllers); </script> </body> </html>
下图展示了Module及其各个组成部分的关系。
下面实例通过config配置module的route实现一个SPA实例。首先创建View1.html 和View2.html。 目录结构如下图.