简介angular路由

angular路由

北京小课堂

分享人:吴昊杰

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.拓展思考

7.参考文献

8.更多讨论

1.背景介绍

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。

首先谈谈APP应用。平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦。但是当我们用一般的html页面做移动端,简单时候我们可以用这样的标签去链接页面时,速度还是可以的。   但是当我们的应用越来越多时,切换起来没那么流畅。又是碍于网速,页面加载进来有点慢。但是在angular里面,我们可以用路由进行切换。因为在angular里面,我们用户一般在加载这样的应用时,会整个的缓存在手机上。我们用路由进行切换时,不用再发起HTTP请求了。体验比原来好。


2.知识剖析

ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。

            在使用ngRoute的时候,实际上,我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的,如ng-grid。

            在ngRoute中,主要有$route、$routeProvider、$routeParams三个服务项目。

            $routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。


服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射

服务$routeParams保存了地址栏中的参数

服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

angular路由可以实现多视图的单页Web应用。 当请求一个url时,根据路由配置匹配这个url,然后请求模板片段,并插入到ng-view中去。这种做法使网页局部刷新,减少了切换网页时带来的突兀感, 也减少了项目的代码量。


3.常见问题

ngRoute实现原理和如何使用路由?

ngRoute实现原理

我们知道,设置

div1

            div2

            div3

        我是div1

            我是div2

            我是div3


这样的锚点,a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板,在锚点被链接时,监听到url的变化,加载相应的模板文件。


4.解决方案

NGROUTE包含以下部分:

服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射

服务$routeParams保存了地址栏中的参数

服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

$routeProvider提供了定义路由表的服务,它有两个核心方法,when(path,route)和otherwise(params)。

ngRoute的使用

a.引入两个文件,angular和angular-route:


                    

b.主页面中设置容器ng-view

c.然后在ng-app中注入ngRoute


d.最后配置路由表

一个简单的ngRoute结构示例

                    


5.参考文献

菜鸟教程

AngularJS路由二三事(一):ngRoute

ngRoute 模块_AngularJS中文网

6.更多讨论

为什么推荐用ui-router替代ngRoute

ngRoute在路由配置时用$routeProvider。

ui-router路由配置时用 $stateProvider 和$urlRouterProvider。

ngRoute是官方路由。

ui-route是第三方路由。

ngroute是用AngularJS框架的核心部分。

ui-router是一个社区库,它是用来提高完善ngroute路由功能的。

ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。

问题一: 为什么ui-router可以嵌套路由而ng-router不能嵌套路由

答:因为ng-router没有明确的父子层级关系,ui-router明确了这一点

问题二:不同页面之间如何传参?


.controller('pageOneCtrl', function ($scope, $state) {

              $scope.toPage2 = function (id) {

                $state.go('page2', {ID:id});

            };

            //接收页面:

            .controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {

              var receivedId = $stateParams.ID;

              console.log(receivedId);

            //打印的结果即为id

            });

可以通过点击事件进行传参

html中:

ng-click=“toPage2(name,number)”

控制器中:

  .controller('pageOneCtrl', function ($scope, $state) {

$scope.toPage2 = function (name,number) {

$state.go('page2', {

args:{

  NAME:name,

  NUMBER:number

  });

};

});

在第二个页面中通过$staeParams获得参数ID。

            .controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {

  var receivedName = $stateParams.args.NAME;

  var receivedNumber = $stateParams.args.NUMBER;

});

问题三:paramr是做什么用的

params是路由之中页面的参数传递方式.

this.$router.push({

 path:"/detail",

 params:{

 name:'nameValue',

 code:10011

 }

});

腾讯视频链接: https://v.qq.com/x/page/z0548ysulwk.html

PPT链接:https://ptteng.github.io/WEB/ppt/AngularRouter.html#/


鸣谢

感谢大家观看

BY :  李仁 | 吴昊杰

angular路由

小课堂

        分享人: 吴昊杰

你可能感兴趣的:(简介angular路由)