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

只有一个页面，链接使用锚点(哈希)
引入 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...
}])

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

猜你喜欢