angular.js之路由的选择方法  更新时间:2016年09月24日 13:59:56   投稿:jingxian   下面小编就为大家带来一篇angular.js之路由的选择方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的。 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源。 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息。但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的模块,然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。 而要做到上面介绍的功能就必须使用路由功能了。 主体思路: 1. 后台设立多个独立的模块 2. 建立一个路由控制模块 3. 根据需要通过路由提取需要模块加载到主页上 4. 加载的同时,将其他模块隐藏。 那么,路由模块的建立需要多少功夫呢?其实意外地简单: 首先,主页面上,写上对应的代码: 这个代表路由区域和视图区域,只有写了这个标签才会触发路由事件: angularjs • TodoMVC Double-click to edit a todo Created by Sindre Sorhus Part of TodoMVC 其他的东西都是装饰,只要看第24行就可以了。 在路由区域和视图区域中,我们可以添加内容进去——甚至添加一个网页进去。 接下来请看对应的app.js。 var app = angular.module(“myTodo”, [‘ngRoute’]); //路由的配置: app.config(function($routeProvider) { var routeconfig = { templateUrl: “body.html”, controller: “myTodoCtrl” /*controller: ‘myTodoCtrl’*/ } var ohter_config = { templateUrl: “other.html” } $routeProvider. when(“”,routeconfig). //status : 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when(“/other”, ohter_config). when(“/:aaa”, routeconfig ). otherwise( { redirectTo: “/all” }); }); app.controller(“myTodoCtrl”, function($scope, $routeParams, $filter){ console.log($routeParams); }); 如果仅仅使用路由的话,以上的代码就足够使用了。它会保证; 1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到 /all 上面,网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all 只需要注意index后面的就可以了。 2. 当页面跳转方向是/other的时候,跳转到 http://127.0.0.1:8020/finishAngularJS-mark2/iother.html 上 3. 当出现特定的跳转的时候(这里规定跳转的是/active,/complete/all三个),也会跳转到对应页面,但这是在index下的跳转—— http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete 【尤其注意的一点:除了2会跳出这个页面,其他的跳转是显示在规定的视图区和路由区上面的,body网页上的内容会被加载过来。】 接下来我们讲解原理: app.config(function($routeProvider) 这便是用来设定路由的代码,直接写就好 var routeconfig = { templateUrl: “body.html”, controller: “myTodoCtrl” /*controller: ‘myTodoCtrl’*/ } var ohter_config = { templateUrl: “other.html” } 这是两个跳转,跳转是一个对象,templateUrl,即模板是body.html,这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器,名字是——myTodoCtrl。 第二个跳转因为不重要所以pass。 $routeProvider. when(“”,routeconfig). //status : 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when(“/other”, ohter_config). when(“/:aaa”, routeconfig ). otherwise( { redirectTo: “/all” }); }); 这一段代码是用来进行判断的,当哈希值发生改变的时候,执行对应的跳转对象。 当哈希值为””即第二句,为空的时候,执行routeconfig 当哈希值为”/other”,即第五局,执行other_config 当哈希值是一个特殊变量的时候,变量的名称为aaa,值为X(X可以是定义好的任何指,这里是all,complete,active中其中一个),即”/active”,”/complete”,”/all”的时候,执行routeconfig。 当哈希值是其他情况的时候,默认跳转到哈希值为”/all”上。 我们得到了哈希值,执行了后面的对象,取出对象的模板,添加在了主页上面,启动了控制器,整个路由便算完成了。 以上就是小编为大家带来的angular.js之路由的选择方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~ 您可能感兴趣的文章: Angularjs制作简单的路由功能demo AngularJS 路由详解和简单实例 AngularJS路由实现页面跳转实例 angular.js 路由及页面传参示例 使用AngularJS对路由进行安全性处理的方法 AngularJS监听路由的变化示例代码 AngularJS 路由和模板实例及路由地址简化方法(必看) 详解Angular4中路由Router类的跳转navigate AngularJS监听路由变化的方法 AngularJS中的路由使用及实现代码 angularjs 路由 相关文章 Angular2使用SVG自定义图表(条形图、折线图)组件示例 这篇文章主要介绍了Angular2使用SVG自定义图表(条形图、折线图)组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下 2019-05-05 AngularJS数据源的多种获取方式汇总 在AngularJS中获取数据源的方式有很多种,本文给大家整理几种获取数据源的方式,对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧 2016-02-02 Angular实现类似博客评论的递归显示及获取回复评论的数据 这篇文章主要给大家介绍了关于Angular如何实现类似博客评论的递归显示及获取回复评论的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-11-11 AngularJS中$watch和$timeout的使用示例 这篇文章给大家介绍了AngularJS中$watch和$timeout的使用例子,通过示例代码相信更能让大家理解,有需要的朋友们下面来一起看看吧。 2016-09-09 AngularJS $http post 传递参数数据的方法 今天小编就为大家分享一篇AngularJS $http post 传递参数数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】 这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下 2019-05-05 AngularJS实用开发技巧(推荐) Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下 2016-07-07 AngularJS 指令的交互详解及实例代码 这篇文章主要介绍了AngularJS 指令的交互,这里整理了详细的资料及实例代码,有兴趣的小伙伴可以参考下 2016-09-09 Angular2中Bootstrap界面库ng-bootstrap详解 不知道大家有没有留意,最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ,之前工作中一直在用 AngularJS 1.x 的UI Bootstrap , 因此对这个ng-bootstrap 也是很感兴趣,所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。 2016-10-10 Ionic+AngularJS实现登录和注册带验证功能 这篇文章主要介绍了Ionic+AngularJS实现登录和注册带验证功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-02-02 最新评论

在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的。

乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源。

例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息。但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的模块,然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。

而要做到上面介绍的功能就必须使用路由功能了。

主体思路:

1. 后台设立多个独立的模块

2. 建立一个路由控制模块

3. 根据需要通过路由提取需要模块加载到主页上

4. 加载的同时,将其他模块隐藏。

那么,路由模块的建立需要多少功夫呢?其实意外地简单:

首先,主页面上,写上对应的代码:

<ng-view></ng-view>这个代表路由区域和视图区域,只有写了这个标签才会触发路由事件:

<html lang="en" ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由区域,视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
    
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
  

</body>
</html>

其他的东西都是装饰,只要看第24行就可以了。

在路由区域和视图区域中,我们可以添加内容进去——甚至添加一个网页进去。

接下来请看对应的app.js。

var app = angular.module("myTodo", ['ngRoute']);
//路由的配置:
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

  $routeProvider.
   when("",routeconfig).
   //status : 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
  
});

如果仅仅使用路由的话,以上的代码就足够使用了。它会保证;

1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到

/all
上面,网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。

2. 当页面跳转方向是/other的时候,跳转到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html

3. 当出现特定的跳转的时候(这里规定跳转的是/active,/complete/all三个),也会跳转到对应页面,但这是在index下的跳转——

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

【尤其注意的一点:除了2会跳出这个页面,其他的跳转是显示在规定的视图区和路由区上面的,body网页上的内容会被加载过来。】

接下来我们讲解原理:

app.config(function($routeProvider)

这便是用来设定路由的代码,直接写就好

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

这是两个跳转,跳转是一个对象,templateUrl,即模板是body.html,这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器,名字是——myTodoCtrl。

第二个跳转因为不重要所以pass。

$routeProvider.
   when("",routeconfig).
   //status : 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

这一段代码是用来进行判断的,当哈希值发生改变的时候,执行对应的跳转对象。

当哈希值为””即第二句,为空的时候,执行routeconfig

当哈希值为”/other”,即第五局,执行other_config

当哈希值是一个特殊变量的时候,变量的名称为aaa,值为X(X可以是定义好的任何指,这里是all,complete,active中其中一个),即”/active”,”/complete”,”/all”的时候,执行routeconfig。

当哈希值是其他情况的时候,默认跳转到哈希值为”/all”上。

我们得到了哈希值,执行了后面的对象,取出对象的模板,添加在了主页上面,启动了控制器,整个路由便算完成了。

以上就是小编为大家带来的angular.js之路由的选择方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~

您可能感兴趣的文章:

  • Angularjs制作简单的路由功能demo
  • AngularJS 路由详解和简单实例
  • AngularJS路由实现页面跳转实例
  • angular.js 路由及页面传参示例
  • 使用AngularJS对路由进行安全性处理的方法
  • AngularJS监听路由的变化示例代码
  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • 详解Angular4中路由Router类的跳转navigate
  • AngularJS监听路由变化的方法
  • AngularJS中的路由使用及实现代码
张贴在3