search

Wscats / angular-tutorial

:rabbit:Some of the angular tutorial - 《Angular学习笔记》
387 stars 125 forks source link

ui-route和ng-route #17

Open Wscats opened 8 years ago

Wscats commented 8 years ago

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'
                    }
                }
            })
Wscats commented 8 years ago 
<!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>
Wscats commented 8 years ago

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

首先我们用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>

Wscats commented 7 years ago

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()