我生待明日,万事成蹉跎

AngularJS简单入门(6)—模块加载、多重视图和路由

一、模块加载
AngularJS模块可以在被加载和执行之前对其自身进行配置
 
1、配置块
作用:这些 config() 代码块可以对我们的服务进行自定义配置,例如设置API密钥或自定义URL等。
angular.module('myApp', [])
    .config(function($provide) {
    });
例如,我们在某个模块之上创建一个服务或指令时:
angular.module('myApp', [])
    .factory('myFactory', function(){
        var service = {};
        return service;
    })
    .directive('myDirective', function(){
        return {
            template: '<button>Click me</button>'
        }
    })
AngularJS会在编译时执行这些辅助函数。它们在功能上等同于下面的写法:
angular.module('myApp', [])
    .config(function($provide ,$compileProvider) {
        $provide.factory('myFactory', function() {
            var service = {};
            return service;
        });
        $compileProvider.directive('myDirective', function() {
            return {
                template: '<button>Click me</button>'
            };
        });
    });
 constant() 方法,这个方法总会在所有配置块之前被执行
 
当对模块进行配置时,需要格外注意只有少数几种类型的对象可以被注入到 config() 函数中:提供者和常量。
 
2、运行块
运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法。运行块是AngularJS中与 main 方法最接近的概念
作用:运行块通常用来注册全局的事件监听器。 例如, 我们会在 .run() 块中设置路由事件的监听器以及过滤未经授权的请求。
 
假设我们需要在每次路由发生变化时,都执行一个函数来验证用户的权限,放置这个功能唯一合理的地方就是 run 方法:
        angular.module('myApp', [])
            .run(function($rootScope, AuthService) {
                $rootScope.$on('$routeChangeStart', function(evt, next, current) {
// 如果用户未登录
                    if (!AuthService.userLoggedIn()) {
                        if (next.templateUrl === "login.html") {
// 已经转向登录路由因此无需重定向
                        } else {
                            $location.path('/login');
                        }
                    }
                });
            });
run() 函数接受个参数。initializeFn (函数)AngularJS在注入器创建后会执行这个函数。
二、多重视图和路由
解决问题场景:Ajax请求不会留下history记录从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。
除了用 ng-include 指令在视图中引用多个模板外,更好的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。AngularJS允许我们在 $route服务的提供者 $routeProvider 中通过声明路由来实现这个功能
 
在HTML中,需要在AngularJS之后引用 angular-route :
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>
最后,要把 ngRoute 模块在我们的应用中当作依赖加载进来:
angular.module('myApp', ['ngRoute']);
这个例子中,将所有需要渲染的内容都放到了 <div class=”content”> 中,而 <header>和 <footer> 中的内容在路由改变时不会有任何变化。
<header>
    <h1>Header</h1>
</header>
<div class="content">
    <div ng-view></div>
</div>
<footer>
    <h5>Footer</h5>
</footer>
ng-view 是一个优先级为1000的终极指令。AngularJS不会运行同一个元素上的低优先级指令(例如 <div ng-view></div> 元素上其他指令都是没有意义的) 。
路由的定义:
AngularJS提供when和otherwise 两个方法,用 config 函数在特定的模块或应用中定义路由
angular.module('myApp', []).
        config(['$routeProvider', function($routeProvider) {
// 在这里定义路由
        }]);
下面的例子展示了如何创建一个独立的路由:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .when('/login', {
            templateUrl: 'views/login.html',
            controller: 'LoginController'
        })
        .when('/dashboard', {
            templateUrl: 'views/dashboard.html',
            controller: 'DashboardController',
            resolve: {
                user: function(SessionService) {
                    return SessionService.getCurrentUser();
                }
            }
        })
        .otherwise({
            redirectTo: '/'
        });
}]);
特别说下templateUrl:
例:templateUrl: ‘views/template_name.html’
应用会根据 templateUrl 属性所指定的路径通过XHR读取视图 (或者从 $templateCache 中读取) 。如果能够找到并读取这个模板,AngularJS会将模板的内容渲染到具有 ng-view 指令DOM元素中。

 

未经允许不得转载:徐宏涛博客 » AngularJS简单入门(6)—模块加载、多重视图和路由

分享到:更多 ()

评论 抢沙发

评论前必须登录!