AngularJS的路由、模块

一 点睛

1 多视图和路由是AngularJS实现单页面应用的技术关键，AngularJS内置了一个$routeProvider对象来负责页面加载和页面路由转向。

2 模块化

3 AngularJS一个完整项目结构

4 ng官方推荐的模块切分方式

• 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
• 控制器、指令、服务、路由、过滤器分别放在一个模块里面（可借助grunt合并）
• 用一个总的app模块作为入口点，它依赖其他所有模块。

5 一切都是从模块开始的

二 实战

1 app.js

//定义bookStoreApp模块，它依赖于ngRoute、ngAnimate、bookStoreCtrls等模块
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'
    })
});

2 控制器模块

//控制器模块中定义了两个控制器HelloCtrl和BookListCtrl
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:"大漠穷秋"}
        ]
    }
]);

3 hello.html实现

{{greeting.text}},Angular

4 bookList.html实现

    

        书名:{{book.title}}   作者:{{book.author}}
    

5 index.html的实现

6 运行效果

注意要在火狐浏览器才能运行成功。