Angularjs学习笔记（四）模块化与依赖注入

一、路由ngRoute服务
随着web应用越来越大，一个应用里面存在多个视图。在不同的视图之间进行切换时（url），为了支持浏览器的“前进、后退、history”，angular有ngRoute服务，提供$routeProvider

通常我们的URL形式为http ://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http ://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。（防止向后台服务器发送请求，告诉浏览器在页面内跳转）
AngularJS 路由 就通过 # + 标记 把井号后面内容取出来跟$routeProvider中的内容匹配，从而确定展现哪个视图。

$routeProvider 用来定义路由规则。
用法：
$routeProvider.whenAPI来定义我们的路由规则。第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。根据访问路径不同，展示不同的view：

module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

注意：angular自身提供的$routeProvider无法进行深层次的嵌套，可以使用angular-ui里的UI-Router来实现深层次嵌套
链接：https://github.com/angular-ui
与ngRoute的区别是：
1、可实现路由分开控制多模块页面的各个模块
2、index.html中的视图部分为<div ui-view></div>
3、需要依赖ui.router，函数需要引入$stateProvider及$urlRouterProvider

4、语法类似ngRouter
二、模块
模块是应用控制器的容器。控制器通常属于一个模块。
（1）创建模块
通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);  //"myApp" 参数对应执行应用的 HTML 元素。
app.controller('TaskCtrl',function($scope){
        $scope.name = "John Doe";
        };
</script>

接着可以在 AngularJS 应用中添加控制器，指令，过滤器等。
(2)添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

(3)添加指令
AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。http://www.runoob.com/angularjs/angularjs-reference.html
此外，你可以使用 .directive 函数来添加自定义的指令。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。建议用属性名来调用指令：

<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。那么引入js文件即可：

<script src="myApp.js"></script>

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

var app = angular.module("myApp", []);

三、依赖注入
在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。使得程序设计变得松耦合
依赖注入是通过在需要的地方通过参数进行传递实现的。