angularjs的ng-route路由用法详解

路由功能主要是 $routeProvider服务 与 ng-view 实现。

ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。

更多内容参考:Angularjs总结

前提

首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular

<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-route/angular-route.js"></script>

这主要是因为angular-route.js需要传入window.angular这个参数,而这个参数只有在加载完angular才会出现。

(function(window, angular, undefined) {
'use strict';
...
ngRouteModule.directive('ngView', ngViewFactory);
...
})(window, window.angular);

路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

一般主要通过两个方法:

when():配置路径和参数;

otherwise:配置其他的路径跳转,可以想成default。

when的第二个参数:

controller:对应路径的控制器函数,或者名称

controllerAs:给控制器起个别名

template:对应路径的页面模板,会出现在ng-view处,比如”<div>xxxx</div>”

templateUrl:对应模板的路径,比如”src/xxx.html”

resolve: 这个参数着重说下,该属性会以键值对对象的形式,给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用,注入到控制器中。如果resolve中是一个promise对象,那么会等它执行成功后,才注入到控制器中,此时控制器会等待resolve中的执行结果。

详细的例子,可以参考下面的样例。

redirectTo:重定向地址

reloadOnSearch:设置是否在只有地址改变时,才加载对应的模板;search和params改变都不会加载模板

caseInsensitiveMatch :路径区分大小写

路由有几个常用的事件:

$routeChangeStart:这个事件会在路由跳转前触发

$routeChangeSuccess:这个事件在路由跳转成功后触发

$routeChangeError:这个事件在路由跳转失败后触发

代码参考:

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../../bower_components/angular/angular.js"></script>
    <script src="../../bower_components/angular-route/angular-route.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="#/b">click b</a></li>
        </ul>

        <ng-view></ng-view>
        <!-- <div ng-view ></div> -->
    </div>
    <script type="text/javascript">
    angular.module("myApp",["ngRoute"])
    .controller("aController",function($scope,$route){
        $scope.hello = "hello,a!";
    })
    .controller("bController",function($scope){
        $scope.hello = "hello,b!";
    })
    .controller("myCtrl",function($scope,$location){

        $scope.$on("$viewContentLoaded",function(){
            console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function(event,next,current){
            //event.preventDefault(); //cancel url change
            console.log("route change start!");
        });
    })
    .config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/a', {
            templateUrl: 'a.html',
            controller: 'aController'
          })
        .when('/b', {
            templateUrl: 'b.html',
            controller: 'bController',
            resolve: {
                  // I will cause a 1 second delay
                  delay: function($q, $timeout) {
                    var delay = $q.defer();
                    $timeout(delay.resolve, 3000);
                    return delay.promise;
                  }
            }
        })
        .otherwise({
            redirectTo: '/a'
          });
    });
    </script>
</body>
</html>

~~~~

1.ng-route路由 #

angular-route是angular自带的路由模块

1.1 安装路由 #

$ npm install angular-route

1.2 依赖模块 #

让当前模块依赖于ngRoute

var app = angular.module('appModule',['ngRoute']);

1.3 配置路由 #

app.config(function ($routeProvider) {
    $routeProvider.when('/home',{
        template:'<div>首页 {{title}}</div>',
        controller: function ($scope) {
            $scope.title = 'hello '
        }
    }).when('/user',{
        template:'<div>用户</div>',
        controller: function ($scope) {
            $scope.title = 'hello '
        }
    }).when('/contact',{
        template:'<div>zfpx</div>',
        controller: function ($scope) {
            $scope.title = 'hello '
        }
    }).when('/settings',{
        template:'<div>设置页面</div>',
    }).otherwise('/home');
})

1.4 创建路由链接 #

<a href="#/home">首页</a>
<a href="#/user">用户管理</a>
<a href="#/contact">联系</a>
<a href="#/settings">设置</a>
<div ng-view></div>

1.5 监控路由变化 #

app.run(function ($rootScope,$location) {
    $rootScope.flag = false;
    $rootScope.$on('$routeChangeStart', function (event,toState,fromState) {
        if(toState.$$route.originalPath=='/settings'){
            if(!$rootScope.flag){
                $location.path('user');
                alert('没有权限自动跳转到用户页面')
                event.preventDefault();
            }
        }
    })
});

1.6 获取路由参数 #

增加带参数跳转的按钮

$routeProvider.when('/home',{
    template:'<div>首页 {{title}}</div><button ng-click="go()"></button>',
    controller: function ($scope,$location) {
        $scope.title = 'hello ';
        $scope.go = function () {
            $location.path('contact/100');
        }
    }
})

增加路由

.when('/contact/:id',{
        template:'<div>zfpx{{count}}</div>',
        controller: function ($scope,$routeParams) {
            $scope.title = 'hello '
            $scope.count = $routeParams.id;
        }
})

2.angular-ui-route #

$ npm install angular-ui-router

2.1 配置路由 #

var app = angular.module('appModule',['ui.router']);
app.config(function ($stateProvider,$urlRouterProvider) {
    $stateProvider.state('home',{
        url:'/home',
        template:'<div>home</div>',
    }).state('user',{
        url:'/user',
        template:'<div>user</div>',
    }).state('contact',{
        url:'/contact',
        template:'<div>contact</div>',
    })
    $urlRouterProvider.otherwise('home');
})

2.2 创建路由连接 #

<a ui-sref="home">首页</a>
<a ui-sref="user">用户 </a>
<a ui-sref="contact">联系</a>
<div ui-view></div>

2.3 监控路由变化 #

$rootScope.$on('$stateChangeStart', function (event,toState,toParams,fromState,fromParams) {
    if(toState.url=='/settings'){
        if(toState.needLogin){
            $state.go('user');
            event.preventDefault();
        }
    }
})

增加路由

.state('settings',{
    url:'/settings',
    needLogin:true,
    template:'<div>settings</div>',
})

2.3.1 监听不存在的路由 #

$rootScope.$on('$stateNotFound', function (event) {
    alert('没有这样的路由');
    $state.go('user');
    event.preventDefault();
})

2.3.2 切换出错 #

 $rootScope.$on('$stateChangeError', function (event) {
    alert('没有此模板');
    $state.go('user');
})

2.3.3 进入路由时 #

onEnter: function () {
    alert('进入');
},

2.3.4 退出路由时 #

onExit: function () {
    alert('退出');
}

2.3.4 设置服务 #

resolve: {
    add:function (){
        return {name:1}
    },
    promise: function ($q,$timeout) {
        var defer = $q.defer();
        $timeout(function () {
            defer.resolve({age:8});
        },3000)
        return defer.promise;
    }
}

在控制器中使用服务

template:'<div>user {{name}}{{age}}</div>',
controller: function ($scope,add,promise) {
    $scope.name = add.name
    $scope.age = promise.age
},

2.4 路由嵌套 #

设置子路由

$stateProvider.state('home',{
    url:'/home',
    templateUrl:'1.html',
}).state('home.user',{
    url:'/user',
    template:'<div>Hello</div>',
}).state('home.profile',{
    url:'/profile',
    template:'<div>world</div>',
}).state('settings',{
    url:'/settings',
    template:'<div>settings</div>',
});
$urlRouterProvider.otherwise('home');

一级路由

<a ui-sref="home">首页</a>
<a ui-sref="settings">设置</a>
<hr>
<div ui-view></div>

1.html中设置二级路由

<a ui-sref="home.user">子内容</a>
<a ui-sref="home.profile">子内容</a>
<div ui-view></div>

2.5 配置多视图 #

views:{
    '':{
        templateUrl:'1..html',
    },
    'tmp1@home':{
        template:'<div>tmpl1</div>'
    },
    'tmp2@home':{
        template:'<div>tmpl2</div>'
    },
}

配置模板

<a ui-sref="home.user">子内容</a>
<a ui-sref="home.profile">子内容</a>
<div ui-view></div>
<div ui-view="tmp1"></div>
<div ui-view="tmp2"></div>

3.路由demo #

3.1 配置根view #

<div ui-view></div>

3.2 引入样式 #

<link href="css/ionic.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.3 配置路由 #

var app = angular.module('appModule',['ui.router']);
app.config(function ($stateProvider,$urlRouterProvider) {
    $stateProvider.state('tab', {
        url:'/tab',
        views:{
            '':{
                templateUrl:'1.html'
            }
        }
    }).state('tab.home', {
        url:'/home',
        views:{
            '':{
                templateUrl:'tmpl/home.html'
            }
        }
    }).state('tab.car', {
        url:'/car',
        views:{
            '':{
                templateUrl:'tmpl/list.html'
            }
        }
    }).state('tab.search', {
        url:'/search',
        views:{
            '':{
                templateUrl:'tmpl/search.html'
            }
        }
    });
    $urlRouterProvider.otherwise('tab/home')
})

3.4 设置子路由 #

配置index.html

<div ui-view=""></div>
<div class="tab-nav tabs">
    <a ui-sref="tab.home" class="tab-item">
        <i class="icon ion-home "></i>
    </a>
    <a ui-sref="tab.search"  class="tab-item">
        <i class="icon ion-search"></i>
    </a>
    <a ui-sref="tab.car"  class="tab-item">
        <i class="icon ion-ios-cart"></i>
    </a>
</div>

3.5 参数的传递 #

state('tab.home', {
    url:'/home/:id',
    views:{
        '':{
            templateUrl:'tmpl/home.html',
            controller: function ($scope,$stateParams) {
                $scope.id = $stateParams.id
            }
        }
    },
}).state('tab.car', {
    url:'/car',
    views:{
        '':{
            templateUrl:'tmpl/list.html',
            controller: function ($scope,$state) {
                $scope.go = function () {
                    $state.go('tab.home',{id:100})
                }
            }
        }
    },
})

增加跳转按钮

<button ng-click="go()">点击</button>

~

AngularJSng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使用示例,然后引入一个更加强大的客户端路由框架ui-router

Angular 路由

在APP中定义多个页面的控制器,并给出对应的模板。然后$routeProvider进行配置,即可将URL映射到这些控制器和视图。 首先定义一个基本的Angular APP,并引入ngRoute

Angular$routeService在ngRoute模块里。需要引入它对应的JavaScript文件,并在我们的APP里ngRoute添加为模块依赖(如何添加模块依赖?)。

var app = angular.module('ngRouteExample', ['ngRoute'])
    .controller('MainController', function($scope) {
    })
    .config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/users', {
              templateUrl: 'user-list.html',
              controller: 'UserListCtrl'
          })
          .when('/users/:username', {
              templateUrl: 'user.html',
              controller: 'UserCtrl'
          });

        // configure html5
        $locationProvider.html5Mode(true);
    });

上述代码中,$routeProvider定义了两个URL的映射:/users使用user-list.html作为模板,UserListCtrl作为控制器;/users/:username则会匹配类似/users/alice之类的URL,稍后你会看到如何获得:username匹配到的值。

~~

未经允许不得转载:WEB前端开发 » angularjs的ng-route路由用法详解

赞 (0)