ui-route和ng-route

Question

ui-route和ng-route

Wscats opened this issue 8 years ago · comments

ui路由

引入JS文件

开始引入angular和ui-route的js文件

<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-ui-router.js"></script>

与原生angular不同的是，ui路由用ui-view而不是ng-view
<div ui-view></div>
在angular服务中注入ui.router
var app = angular.module('wsscat', ['ui.router']);

配置路由

用到**$stateProvider**和**$urlRouterProvider**两个服务
/* 注入$stateProvider，$urlRouterProvider */
        app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
            /* 使用when来对一些不合法的路由进行重定向 */
            $urlRouterProvider.when('', '/main');
            /* 通过$stateProvider的state()函数来进行路由定义 */
            $stateProvider.state('main', {
                url: '/main',
                templateUrl: 'views/main.html',
                controller: 'mainCtrl'
            }).state('main.a', {
                url: '/pageMain1',
                templateUrl: 'views/pageMain1.html',
                controller: 'pageMain1Ctrl'
            })
        }]);

主路由，路由地址为_#/main_

app.controller('mainCtrl', function($scope) {
            $scope.name = 'wsscat';
        })

main路由下的子路由，路由地址为_#/main/pageMain1_

app.controller('pageMain1Ctrl',function($scope){
            $scope.name = 'abc'
        })

嵌套路由

此时我们就可以在main.html上放第二个ui-view这里比原生好的地方在于可以嵌套路由
main.html

main
{{name}}
<div ui-view></div>

pageMain1.html

456
{{name}}

路由传参

我们在生成一个新的子控制器

.state('main.b', {
                url: '/pageMain2/:id',
                templateUrl: 'views/pageMain2.html',
                controller: 'pageMain2Ctrl'
            })

留意我们在url定义的路由中多了个**:id**，这样我们就可以在控制器之间传递参数
url: '/pageMain2/:id'

在控制器中我们注入$state服务

app.controller('pageMain2Ctrl',function($scope,$state){
            $scope.name = 'cbd'
            console.log($state.params);
        })

用$state.params就可以访问到路由上的参数
例如我们输入#/main/pageMain2/1，就会返回一个对象Object {id: "1"}

一个视图多个ui-view

当一个视图拥有多个ui-view,例如下面这样，平时我们一般一个视图只有一个ui-view的情况

<div ui-view name="first"></div>
<div ui-view name="second"></div>

当拥有多个这样的ui-view我们就要加上name属性，并绑定它到路由配置中的views属性，让子视图决定渲染到哪一个ui-view里面

.state('main.a', {
                url: '/pageMain1',
                views: {
                    "first": {
                        templateUrl: 'views/pageMain1.html',
                        controller: 'pageMain1Ctrl'
                    }
                }
            }).state('main.b', {
                url: '/pageMain2/:id',
                views: {
                    "first": {
                        templateUrl: 'views/pageMain2.html',
                        controller: 'pageMain2Ctrl'
                    }
                }
            }).state('main.c', {
                url: '/pageMain3/:id',
                views: {
                    "second": {
                        templateUrl: 'views/pageMain3.html',
                        controller: 'pageMain3Ctrl'
                    }
                }
            })

enoyao · Answer 1 · Thu Aug 18 2016 23:09:31 GMT+0800 (China Standard Time)

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <header>wsscat的应用</header>
        <div ui-view></div>
    </body>
    <style></style>
    <script type="text/javascript" src="../js/angular.js" ></script>
    <script type="text/javascript" src="angular-ui-router.js"></script>
    <script>
        /* 使用ui-router来进行路由定义，需要注入ui.router模块 */
        var app = angular.module('wsscat', ['ui.router']);
        /* 注入$stateProvider，$urlRouterProvider */
        app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
            /* 使用when来对一些不合法的路由进行重定向 */
            $urlRouterProvider.when('', '/main');
            /* 通过$stateProvider的state()函数来进行路由定义 */
            $stateProvider.state('main', {
                url: '/main',
                templateUrl: 'views/main.html',
                controller: 'mainCtrl'
            }).state('main.a', {
                url: '/pageMain1',
                templateUrl: 'views/pageMain1.html',
                controller: 'pageMain1Ctrl'
            }).state('main.b', {
                url: '/pageMain2/:id',
                templateUrl: 'views/pageMain2.html',
                controller: 'pageMain2Ctrl'
            })
        }]);
        //路由地址为#/main
        app.controller('mainCtrl', function($scope) {
            $scope.name = 'wsscat';
        })

        //路由地址为#/main/pageMain1
        app.controller('pageMain1Ctrl',function($scope){
            $scope.name = 'abc'
        })

        app.controller('pageMain2Ctrl',function($scope,$state){
            $scope.name = 'cbd'
            console.log($state.params);
        })
    </script>

</html>

enoyao · Answer 2 · Sun Sep 25 2016 23:01:59 GMT+0800 (China Standard Time)

切换页面的时候，链接变色

首先我们用app.run方法在每次我们进入到对应路由前获取我们当前路由的地址
这里用到$location服务获取路由地址，注意我这里是用了ui-router，所以是$stateChangeSuccess，如果是ng-router那就是$routerChangeSuccess

app.run(function($rootScope, $location) {
                $rootScope.$on('$stateChangeSuccess',
                    function(data) {
                        console.log($location.path())
                        $rootScope.path = "#"+$location.path()
                })
})

然后在对应的DOM结构中写上这样来切换这个类
<a ng-href="#/main/pageMain1" class="{{'#/main/pageMain1'==path?'red':''}}">pageMain1</a>

enoyao · Answer 3 · Sat Dec 10 2016 05:43:38 GMT+0800 (China Standard Time)

ng路由

加载路由依赖，放在angular框架后面

<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>

$location.path

$routeProvider
两个核心方法when()和otherwise()

controller //function或string类型。在当前模板上执行的controller函数，生成新的scope
controllerAs //string类型，为controller指定别名
template //string或function类型，视图所用的模板，这部分内容将被ngView引用
templateUrl //string或function类型，当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址