• [Angularjs]视图和路由(二)


    写在前面

    上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例。这篇文章将继续学习路由的配置,及相关参数的说明。

    系列文章

    [Angularjs]ng-select和ng-options

    [Angularjs]ng-show和ng-hide

    [Angularjs]视图和路由(一)

    参数

    when方法,上篇文章也提到了配置路由用到的when方法,对when方法的第二个参数可以接收哪些属性,这里将一一列举。
    1、controller

    controller:'MyController'
    //或者
    controller:function($scope){}
     <script>
            var app = angular.module('app', ['ngRoute']);
            app.config(['$routeProvider', function ($routeProvider) {
                //这里指定路由
                $routeProvider
                   .when('/', {
                       templateUrl: './views/Login.html',
                       controller: 'LoginController'
                   })
                    .when('/Login', {
                        templateUrl: './views/Login.html',
                        controller: 'LoginController'
                    })
            }]);
            //控制器
            app.controller('LoginController', function ($scope) {
    
            });
        </script>

    如果When方法配置了controller属性,那么这个指定的控制器会与路由所创建的新作用域关联在一起。如果参数值是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后与路由关联在一起,如果参数值是函数型,这个函数会作为模板中DOM元素的控制器并与模板进行关联。
    2、template

    template:'<div><h2>Route</h2></div>'

    Angularjs会将配置对象中的HTML模板渲染到对应的具有ng-view指令的dom元素中。
    3、templateUrl

    templateUrl:'views/template_view.html'

    应用会根据templateUrl属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。如果能找到并读取这个模板,AngularJs会将模板的内容渲染到具有ng-view指令的Dom元素中。
    这种方式,出于代码整洁,也是最常见的使用方式。

    4、resolve

    resolve:{
               'data':['$http',function($http){
                        return $http.get('/api').then(
                                 function success(response){return response.data;},
                                 function error(reason){return false;}
                );  
    
        }];
    
    }

    如果设置了resolve属性,Angularjs会将列表中的元素都注入到控制器中。如果这些依赖是promise对象,他们在控制器加载以及$routeChangeSuccess被触发之前,会被resolve并设置成一个值。
    列表对象可以是:

    键,键值是会被注入到控制器中的依赖的名字。

    工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函数或可以被resolve的promise对象。

    在上面的例子中,resolve会发送一个$http请求,并将data的值替换为返回结果的值。列表中的键data会被注入到控制器中,所以在控制器中可以使用它。

    5、redirectTo

    redirectTo:'/home'
    //或者
    redirectTo:function(route,path,search)

    如果redirectTo属性的值是一个字符串,俺么路径会被替换成这个值,并根据这个目标路径触发路由变化。
    如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目标路径触发路由变化。

    如果redirectTo属性的值是一个函数,AngularJs会在调用它时传入下面三个参数:

    • 从当前路径中提取的路由参数。
    • 当前路径
    • 当前URL中的查询串。

    6、reloadOnSearch

    如果reloadOnSearch选项被设置为true(默认),当$location.search()发生变化时会重新加载路由。如果设置为false,那么当url中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。

    angular.module('MyApp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
    controller: 'HomeController',
    templateUrl: 'views/home.html'
    })
    .when('/inbox/:name', {
    controller: 'InboxController',
    templateUrl: 'views/inbox.html'
    })
    .otherwise({redirectTo: '/'});
    }]);

    上面的例子,用when方法设置了两个路由,otherwise方法会在没有任何路由匹配时被调用。我们用它设置一个默认跳转到'/'路径的路由。
    当浏览器加载Angularjs应用时,会将url设置成默认路由所指向的路径。除非我们在浏览器中加载不同的url,否则默认会使用'/'路径的路由。

    总结

    主要学习了when方法的第二个参数的一些属性,在项目中,经常用到,这里就对其具体的描述记录一下,加深印象,在项目中,也是这样做的,这里算是先实践再理论了。

    文章来自

    Angularjs权威教程

  • 相关阅读:
    【不错的文章收藏了】我的Delphi开发经验谈
    【转载】Delphi异常处理try except语句和try finally语句用法以及区别
    Asp防止网页频繁刷新和强制不缓存的方法
    JavaScript的document和window对象详解
    Delphi下获取系统默认的UserAgent的方法
    【转载】ACCESS技巧集(DELPHI AND SQL)
    c#中const与readonly区别
    C#中virtual 方法和abstract方法的区别
    static(C# 参考)
    按键精灵
  • 原文地址:https://www.cnblogs.com/wolf-sun/p/4638029.html
Copyright © 2020-2023  润新知