您现在的位置是: 首页 » 网页代码 » AngularJS路由是什么
网页代码

AngularJS路由是什么

网页代码2020年2月16日 275人已围观

路由是AngularJS构建单页面应用的基础,它是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

网站运营中栏目排名优化技巧

AngularJS的路由实际上是一种纯前端的解决方案,它的本质是:当请求一个url时,根据路由配置这个url,然后再请求模板片段,并插入到ng-view中。AngularJS的路由更倾向于通过改变url进行页面的局部刷新。

路由

在后端开发中通过URL地址可以实现页面(视图)的切换,但是AngularJS是一个纯前端MVC框架,在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址(即不允许产生跳转),但Web应用中又经常通过链接(a标签)来更新页面(视图),当点击链接时还要阻止其向服务器发起请求,通过锚点(页内跳转)可以实现这一点。

实现单页面应用需要具备:

a、只有一页面

b、链接使用锚点

在单一页面中可以能过hashchange事件监听到锚点的变化,进而可以实现为不同的锚点准不同的视图,单页面应用就是基于这一原理实现的。而在AngularJS中对这一实现原理进行了封装,将锚点的变化封装成路由(Route),这是与后端路由的根本区别。

使用

1、引入angular-route.js

<!--引入angularjs核心库-->
<script src="js/angular.min.js"></script>
<!--引入angularjs路由模块-->
<script src="js/angular-route.js"></script>

2、实例化模块(App)时,当成依赖传进去(模块名称叫ngRoute)。

//作为依赖传入
 var App = angular.module('App',['ngRoute']);

3、配置路由模块

 App.config(['$routeProvider',function ($routeProvider) {
            $routeProvider.when('/index',{
                template:'<h1>这是index页面!!!!!</h1>'
//                templateUrl:'index.html'
            })
            .when('/book',{
                template:'<h1>这是book页面!!!!!</h1>'
            })
            .when('/collect',{
                template:'<h1>这是collect页面!!!!!</h1>'
            })
            .when('/home',{
                template:'<h1>这是home页面!!!!!</h1>'
            })
            .otherwise({
                redirectTo:'/index'
        })
    }])

在这里通过调用config方法配置路由,里面有两个参数,第一个参数为所要配置的服务,第二个参数为一个对象,配置当前路由的参数,如视图、控制器等,其中template就是字符串形式的视图模板,打印出一些内容,这个参数还可以是templateUrl,这样就会定位到外部文件。如果这个参数为 controller,就要结合控制器来使用, 这里的$routeProvider.when就相当于switch… case…语句,就是当锚点后面的值满足什么时会在当前显示什么内容,otherwise方法就是在不做任何点击操作时,所显示的内容。

4、布局模板

通过ng-view指令布局模板,路由匹配的视图会被加载渲染到些区域。

<ul class="list">
    <li><a href="#/index">index</a></li>
    <li><a href="#/book">book</a></li>
    <li><a href="#/collect">collect</a></li>
    <li><a href="#/home">home</a></li>
</ul>
<div class="content">
    <!--视图会被加载并渲染到此处-->
    <div ng-view=""></div>
</div>

网站运营中栏目排名优化技巧

当配置路由其中有个参数是controller的时候,要依赖控制器,代码如下:

 App.config(['$routeProvider',function ($routeProvider) {
            $routeProvider.when('/index',{
              //定位到abc.html,使用控制器
                templateUrl:'abc.html',
                controller:'demoController'
            })
            .when('/book',{
                template:'<h1>这是book页面!!!!!</h1>'
            })
            .when('/collect',{
                template:'<h1>这是collect页面!!!!!</h1>'
            })
            .when('/home',{
                template:'<h1>这是home页面!!!!!</h1>'
            })
            .otherwise({
                redirectTo:'/index'
        })
    }])
   App.controller('demoController',['$scope','$http','$routeParams', function ($scope,$http,$routeParams) {
        $scope.content = "正在学习AngularJs路由;"
    }])

abc.html中代码:

<body>
<div>{{content}}</div>
</body>

网站运营中栏目排名优化技巧

路由参数

1、提供两个方法匹配路由,分别是when和otherwise,when方法需要两个参数,otherwise方法做为when方法的补充只需要一个参数,其中when方法可以被多次调用。

2、第1个参数是一个字符串,代表当前URL中的hash值。

3、第2个参数是一个对象,配置当前路由的参数,如视图、控制器等。

a)、template 字符串形式的视图模板

b)、templateUrl 引入外部视图模板

c)、controller 视图模板所属的控制器

d)、redirectTo跳转到其它路由,只能在otherwise方法中使用

4、获取参数,在控制中注入$routeParams可以获取传递的参数

网站运营中栏目排名优化技巧

文章评论

    发表评论

    您的电子邮箱地址不会被公开。

站点信息
  • 站点运行:823天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:5948 条
  • 文章评论:5651 条
  • 微信公众号:扫描二维码,关注我们