AngularJS ngRoute与页面迁移

最新推荐文章于 2021-06-05 05:18:02 发布

chenggou9601

最新推荐文章于 2021-06-05 05:18:02 发布

阅读量375

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3161974/blog/1358798

版权

<!--ngRoute与页面迁移
1.1使用ngRoute
下面例子说明了一个简单的AngularJS应用是如何进行页面迁移的。需要做以下事情：
1.加载完angular.js之后，引入angular-route.js文件，这样能昂ngRoute模块变得可用。
2.在html中通过ng-view指令标明哪一块需要进行页面迁移。每个应用只有一个ng-view
3.当创建自定义模块时，需要声明它依赖与ngRout模块 angular.module('routingApp',['ngRoute'])。
4.通过$routeProvider,我们可以在AngularJS的config块中定义页面迁移规则。
5.应用内部的迁移可以通过简单的anchor标签来进行，也可以通过手动指定浏览器中的URL来实现。
6.它会自动管理浏览器历史，因此完全可以通过浏览器中的back和forward按钮在应用中进行页面迁移。
$routeProvider让我们可以通过when()函数将所有的迁移规则定义在同一个地方。when函数接收两个参数：
第一个参数是URL或者表示URL的正则表达式，对应迁移规则。　　第二个参数是一个表示配置的对象，它包含了发生迁移时需要进行什么样的操作。
1.2迁移配置选项
$routeProvider.when(url,{//url定义了触发迁移选项的URL。
template:string,//template 如果要显示的html页面不是很大，那么可以直接将它作为字符串传入$routeProvider.when函数的第二个配置对象中。会直接将这个html模板插入ng-view指令中
templateUrl:string,//templateUrl 通常情况下，各个视图的HTML会无比巨大而复杂，我们可以把HTML封装到各个文件中，将指向HTML文件的URL作为templateUrl参数。
　　　　　　　　　　　　　　　　　　　当进行页面迁移时，只用从服务器上加载相应的HTML文件就可以了。例如：$routePrivider.when('test',{templateUrl:'views/test.html'})
                                  本例从服务器上获取view/test.html页面并将其载入ng-view。
controller:string,function or array,//controller
resolve:object<key,function>

url定义了触发迁移选项的URL。
template 如果要显示的html页面不是很大，那么可以直接将它作为字符串传入$routeProvider.when函数的第二个配置对象中。会直接将这个html模板插入ng-view指令中
templateUrl 通常情况下，各个视图的HTML会无比巨大而复杂，我们可以把HTML封装到各个文件中，将指向HTML文件的URL作为templateUrl参数。
　　　　　　　当进行页面迁移时，只用从服务器上加载相应的HTML文件就可以了。例如：$routePrivider.when('test',{templateUrl:'views/test.html'})
             本例从服务器上获取view/test.html页面并将其载入ng-view。
controller
controllerAs 当不想在controller属性中指定控制器名称时，controllerAs属性提供了便捷的解决之道
         $routeProvider.when('/',{
                    template:'<h5>This is the default route</h5>',
                    controller:'Myctrl as ctrl'
                })    等同于：
                   $routeProvider.when('/',{
                    template:'<h5>This is the default route</h5>'，
                     controller:'Myctrl'，
                     controllerAs：'ctrl'
                })
redirectTo  有时，某些迁移会被重命名，不同的url实际上指向同一页面。它能用于错误处理，也能用于常规迁移。
resolve  功能强大 时一种在迁移之前执行和完成一系列异步任务的方式。当需要检验用户是否已经登陆并拥有相应操作权限，甚至需要在控制器和页面
         迁移加载到视图之前就预先加载某些数据时，这一功能提供了解决之道。
1.3Resolve与迁移检验
1.4$routeParams服务
   一个理想的单页面应用中，AngularJS可以直接启用某个控制器并进行相应页面迁移，而不需要先进入浏览页面再进入具体信息页面。这些URL参数并
   不需要从URL中解析，也可以直接从$routeParams服务中非常方便地进行访问。
    resolve: {
                                auth: ['$q', '$location', 'UserService',
                                    function($q, $location, UserService) {
                                        return UserService.session().then(
                                                function(success) {},
                                                function(err) {
                                                    $location.path('/login');
                                                    $location.replace();
                                                    return $q.reject(err);
                                                });
                                    }]
                            }
 .when('/team/:code',{})  这能够告诉AngularJS，URL中/team/之后地部分将通过$routeParams解析出code变量的值并传递给控制器
-->
<html>
<head>
    <title>AngularJS Routing</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
</head>
<body ng-app="routingApp">
<h2>AngularJS Routing Application</h2>
<ul>
    <li><a href="#">Default Route</a></li>
    <li><a href="#/second">Default Route</a></li>
    <li><a href="#/asdasdasd">Default Route</a></li>
</ul>

<div ng-view></div>

<script type="text/javascript">
    angular.module('routingApp',['ngRoute'])
            .config(['$routeProvider',function ($routeProvider) {
                $routeProvider.when('/',{
                    template:'<h5>This is the default route</h5>'
                })
                        .when('/second',{
                            template:'<h5>This is the second route</h5>'
                        })
                        .otherwise({redirectTo:'/'});
            }]);
</script>
</body>
</html>
<!--一个完整地AngularJS迁移示例
https://github.com/shyamseshadri/angularjs-up-and-running/tree/master/chapter10
-->

<!--html5模式
激活HTML5模式
angular.modile('myHtml5App',['ngRoute])
.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
$locationProvider.html5Mode(true);
//可选代码
$locationProvider.hashPrefix('!');
//此处的页面迁移配置别无二致
}])；
想要开启HTML5模式，需要在配置中引用$locationProvider并调用html5Mode函数，指定参数为true。推荐的做法是同时调用hashPrefix('!')来支持SEO(Search Engine Optimization
搜索引擎优化)  对于不含#的URL而言，AngularJS中只需要在客户端做这些事情就足够了
index.html需要在<head>中加入一个含有href属性的<base>标签，这将会告诉浏览器静态资源的放置路径以哪个URL为根节点。
<html><head><base href="/app"></head></html>
-->
<!--备选方案：ui-router-->

转载于:https://my.oschina.net/u/3161974/blog/1358798

chenggou9601

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS ngRoute与页面迁移

<!--ngRoute与页面迁移1.1使用ngRoute下面例子说明了一个简单的AngularJS应用是如何进行页面迁移的。需要做以下事情：1.加载完angular.js之后，引入angular-route.js文件，这样能昂ngRoute模块变得可用。2.在html中通过ng-...
复制链接

扫一扫