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

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

<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>{{title}}<title>
head>
<body>
    <div>
        <ul>
            <li><a href="#home">homea>li>
            <li><a href="#link">linka>li>
            <li><a href="#about">abouta>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: '

404

'
, 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... }])

你可能感兴趣的:(Frame,for,data)