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}} 作者:{{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