ui路由引入JS文件开始引入angular和ui-route的js文件 <div

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

ng路由加载路由依赖，放在angular框架后面 <div class="snippet-clipboard-conten

ui-route和ng-route about angular-tutorial HOT 3 OPEN

wscats commented on May 29, 2024

ui-route和ng-route

from angular-tutorial.

Comments (3)

Wscats commented on May 29, 2024

<!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>

from angular-tutorial.

Wscats commented on May 29, 2024

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

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

from angular-tutorial.

Wscats commented on May 29, 2024

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 //重定向的地址

from angular-tutorial.

ui-route和ng-route about angular-tutorial HOT 3 OPEN

Comments (3)

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

ng路由

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent