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}}&nbsp;&nbsp;&nbsp;作者:{{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。