angular——多页面路由

发表于

多页面路由与单页面路由的区别

之前的单页面路由是基于路径的路由，只能实现单页路由。接下来介绍基于状态的路由，为每个页面赋予不同的状态，就能实现多页面的路由。

多页面路由引入

  1. 引入angular-ui-router.js文件

  2. 模块中注入ui.router

    1
    var mod=angular.module('app',['ui.router']);

  3. 配置文件中注入$stateProvider和$urlRouterProvider,前者实现多页面路由，后者实现单页面路由中otherwise的功能

    1
    mod.config(function ($stateProvider,$urlRouterProvider) {})

  4. 单页路由配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //配置未定义的路径
    $urlRouterProvider.otherwise('/');
    //配置首页,状态为index
     $stateProvider.state('index',{
               url:'',
               templateUrl:'./index.html'
           }).state('about',{
               url:'/about',
               templateUrl:'./about.html',
               controller:function  ($scope) {
                   $scope.books=[{id:1,name:'王子与玫瑰'},{id:2,name:'夜莺与玫瑰'},{id:3,name:'王尔德'}]
               },
               //配置中注入的服务
               resolve:{
               }
        })

  5. 多页面路由配置