2-4 路由、模块、依赖注入

内容简介

AngularJS的模块化实现
一个完整项目结构是什么样的？---示例演示
使用ngRoute进行视图之间的路由
一切都是从模块开始的
ng官方推荐的模块切分方式是什么？
模块之间的依赖应该怎么做？--依赖注入

1. AngularJS的模块化实现

1487147667105.jpg

MVC1.html

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloNgCtrl">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="NgModule1.js"></script>
</html>

NgModule1.js

var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
	$scope.greeting = {
        text: 'Hello'
    };
}]);

2. 一个完整的项目结构

1487147569250.jpg

app---存放源码的文件夹
framework---存放需要用到的一些组件
js---存放所有的js文件夹
tpls---模板文件

package.json 配置文件（管理使用到了那些框架、插件等）

{
  "version": "0.0.0",
  "private": true,
  "name": "angular-recommended",
  "description": "ng官方推荐的项目结构",
  "license": "MIT",
  "devDependencies": {
    "http-server": "^0.6.1",
    "bower": "^1.3.1"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -p 8000"
  }
}

index.html

<!doctype html>
<html ng-app="bookStoreApp">

<head>
    <meta charset="UTF-8">
    <title>BookStore</title>
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
</head>

<body>
    <div ng-view>
    </div>
</body>

</html>

bookList.html

<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
    </li>
</ul>

hello.html

<p>{{greeting.text}},Angular</p>

app.js

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list',{
    	templateUrl:'tpls/bookList.html',
    	controller:'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});

controllers.js

var bookStoreCtrls = angular.module('bookStoreCtrls', []);

bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books =[
        	{title:"《Ext江湖》",author:"大漠穷秋"},
        	{title:"《ActionScript游戏设计基础（第二版）》",author:"大漠穷秋"},
        	{title:"《用AngularJS开发下一代WEB应用》",author:"大漠穷秋"}
        ]
    }
]);

/**
 * 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
 */

directvies.js

var bookStoreDirectives = angular.module('bookStoreDirectives', []);

bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
    function($scope) {}
]);

bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
    function($scope) {}
]);

filters.js=

var bookStoreFilters = angular.module('bookStoreFilters', []);

bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
    function($scope) {}
]);

bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
    function($scope) {}
]);

services.js

var bookStoreServices = angular.module('bookStoreServices', []);

bookStoreServices.service('bookStoreService_1', ['$scope',
    function($scope) {}
]);

bookStoreServices.service('bookStoreService_2', ['$scope',
    function($scope) {}
]);

3. 使用ngRoute进行视图之间的路由

1487149888790.jpg

路由的原理：首先分析下这个地址http://127.0.0.1:8080/app/#/hello
我们发现这个地址中的#的作用是：内部锚点，用来进行页面内部的跳转，加上这个#后它不会像服务器进行提交请求。
那么既然是页面的内部跳转，这个AngularJS就可以捕获这个跳转从而通过定义路由规则进行页面的渲染。

4. 一切都是从模块开始的

1487150924072.jpg

5. ng官方推荐的模块切分方式

1487150571351.jpg

5. 模块之间的依赖应该怎么做？--依赖注入

1487151174860.jpg