AngularJS 学习笔记 08：ngRoute 实现 SPA单页面开发

偏执的太偏执、 2022-05-26 08:10 96阅读 0赞

*  只有一个页面，链接使用锚点(哈希)
 *  引入 `angular-route.js` 路由模块
 *  在子页定义控制器 ng-controller
 *  使用 $rootScope 全局属性

<!DOCTYPE html>
    <html ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>{
       {title}}<</title>
    </head>
    <body>
        <div>
            <ul>
                <li><a href="#home">home</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#about">about</a></li>
            </ul>
            <div class="content">
                
                <div ng-view></div>
            </div>
        </div>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="app.js"></script>
    </body>
    <html>

*  `$routeProvider.when('path', option)` 支持链式调用  
    option  
    
    
     *  `template`：模板
     *  `templateUrl`：模板路径
     *  `controller`：指定控制器
     *  `redirectTo`：跳转到其他路由，更新$location path的值

`app.js`：

// 依赖于路由模块
    var app = angular.module('App', ['ngRoute']);
    
    // 配置路由
    app.config(['$routeProvider', function($routeProvider) { 
    
        $routeProvider.when('/',{
            templateUrl: './views/index.html'
            controller: 'mainCtrl'
        })
        //根据位置传参
        .when('/home/:name/:age',{
            templateUrl: './views/home.html',
            controller: 'homeCtrl'
    
        })
        .when('/like',{
            templateUrl: './views/like.html',
            controller: 'linkCtrl'
        })
        .when('/about',{
            templateUrl: './views/about.html'
            controller: 'about'
        })
        // 若无匹配时使用的路由定义
        .otherwise({
            template: '<h1>404</h1>',
            redirectTo: './views/404.html'
        })
    }])
    
    // 定义控制器
    app.controller('mainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){ 
        $rootScope.title='默认页';
        // code...
    }])
    
    app.controller('homeCtrl',  ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams){ 
        $rootScope.title='主页';
        // 获取传参
        $scope.user = $routeParams;
    }])
    
    app.controller('linkCtrl', ['$scope', $rootScope, function($scope, $rootScope){ 
        $rootScope.title='联系';
        // code...
    }])
    
    app.controller('aboutCtrl', ['$scope', '$rootScope', function($scope, $rootScope){ 
        $rootScope.title='关于';
        // code...
    }])