angularjs入门

路由、模块、依赖注入

时间:2015-08-07 16:46来源:网络整理 作者:KKWL 点击:
--@angularJS--路由、模块、依赖注入 以下是演示angular路由切换的demo. 主页:index.html !doctype html html ng-app="bookStoreApp" head meta charset="UTF-8" titleBookStore/title script src="framework/1.3.0.14/angular.js"/s

--@angularJS--路由、模块、依赖注入

以下是演示angular路由切换的demo.

 

主页: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碎片文件)tpls/:

hello.html:

<p>{{greeting.text}},Angular</p>

 

bookList.html:

<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
    </li>
</ul>

 

控制器文件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:"《AngularJS从入门到精通》",author:"中华烟云"},
         {title:"《AngularJS权威指南》",author:"中华烟云"},
         {title:"《用AngularJS开发下一代WEB应用》",author:"中华烟云"}
        ]
    }
]);

/**
 * 这里接着往下写,如果控制器的数量非常多,需要分给多个开发者,可以借助于grunt来合并代码
 */

 

最后实现路由功能的是app.js:

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'             //[]内的为依赖注入的模块,ng开头的为angular自带的模块
]);

bookStoreApp.config(function($routeProvider) {         //$routeProvider是angular-route.js提供的原生路由对象,可以通过$routeProvider.when({}).when({})....otherwise({});这种链式写法来配置路由
    $routeProvider.when('/hello', {                              //'/hello'为路由路径,即在哈希符#后面动态输入的路径字串,如:....#/hello
        templateUrl: 'tpls/hello.html',                            //当路径为...#/hello时,调用模板文件'tpls/hello.html'
        controller: 'HelloCtrl'                                        //当路径为...#/hello时,调用控制器文件'js/HelloCtrl.js
    }).when('/list',{                                                  //:此时若切换到...#/list路径下
     templateUrl:'tpls/bookList.html',                          //当路径为...#/list时,调用模板文件'tpls/bookList.html'
     controller:'BookListCtrl'                                      //当路径为...#/list时,调用控制器文件'js/BookListCtrl.js
    }).otherwise({                                                   //:否则默认跳转到...#/hello路径下
        redirectTo: '/hello'
    })
});

注:angular-route.js提供的原生路由对象有个缺陷,就是不能深层次嵌套。要实现深层次嵌套,还得用UI-Router,源文件为angular-UI-Router.js.

     UI-Router路由插件将在下一篇讲解.

posted @

------分隔线----------------------------