AngularJs-MVC之路由、模块以及依赖注入
前面呢，我们大概的了解了下AngularJs的入门，也做过了hello world的一个demo，不知道大家有没有掌握呢？在下面我们需要讲一些AngularJS的一些干货。
1，一个完整项目的目录结构
以上图片是根据大漠老师的整理而得，告诉大家一个好消息是，大漠老师的课程在慕课网上，每晚将近2万人学习。
2，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"
}
}
package.json文件是给npm工具用的，把这个copy到你的文件（名字为package.json），运行 npm start即可。
3，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>
上面是我们的html的主文件，用来加载我们所需要的 js和css，另外，我们在此建立一个“根视图”，它的作用是用来包裹后面插入进来的代码片段的。也可以加一些很炫的动画效果
4，tpls目录--存放代码片段
<ul>
<li ng-repeat="book in books">
书名:{{book.title}} 作者:{{book.author}}
</li>
</ul>
这个是tpls目录中的一个html文件，叫bookList.html文件，看里面就这么些东西，并不是一个完整的html文件，我们叫代码片段，借用angularjs我们可以给其赋值并插入到index.html的根目录中。
ng-repeat是重复调用就像是我们用的 for in一样，在这里呢会重复生成多个 <li>...</li>这样的目录结构。
5，js目录--app.js
上面我们说过app.js是程序的主入口点，也就是说，如果程序运行的话，会首先运行app.js，根据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'
})
});
首先我们要建一个模块，angularjs所有的程序都是建立在模块上的。让我们看看，我们建立的模块名称呢叫 bookStoreApp,这个也是index.html中 ng-app的值，上节我们就说过了ng-app的作用在此就不在说了。
当程序走到这呢，会发现这个模块需要依赖很多的模块(angular.module(ModuleName',[..依赖模块..]))，程序呢就会根据数组里面的模块名称一个一个加载进来，在此说下，这个模块名称呢是 framework文件里面的某个文件名。
下面我们看看 模块的配置，有一个 $routeProvider 这个呢是路由控制器它的作用是根据不同的url控制不同的视图展示出来，当用 .when()的时候，如果url地址满足里面的条件的话呢，就会找到模板文件并执行定义好的controll文件给模板文件赋值并插入到index.html的根目录，如果都找不到就会执行 otherwise()里面的方法。下面看效果
ok,注意看浏览器中的地址栏，会发现同样的文件(index.html)，而后面的参数不同显示的结果也不同。在里面我们会看到一个 # 这个会告诉浏览器在页面内跳转。
6，js目录--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来合并代码
*/
看上面的代码，我建立了两个控制器，控制器里我们给$scope赋值，这会根据app.js里面的路由来载入到代码片段并且生成一个赋完值的html。