路由

module.config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/', {template: '首页页面'}).when('/computers', {template: '分类页面'}).when('/printers', {template: '列表页面'}).otherwise({redirectTo: '/'});
        }]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

• 第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

5、在$route(路由)中，提供了两个依赖性服务：$location、$routeParams；$location、$routeParams均可在controller中使用，如上otherDetailCtrl中，可通过$routeParams获取路由时所传参数，可通过$location进行路由跳转。

<div ng-controller="ctrl">
    <a href="#home">主页</a>
    <a href="#list">列表</a>
    <a href="#settings">设置</a>
    <div ng-view></div>
</div>
<script src="../angular.js"></script>
<script type="text/javascript" src="../angular-route.js"></script>
<script>
var app = angular.module('appModule',['ngRoute']);
app.controller('ctrl', function ($scope,$location,ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: routeParams) {scope.go = function(){
console.log($location)$location.path('settings/10/manster')
        }
    });
app.config(function(ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: …eProvider){//配置routeProvider，AngularJS $routeProvider 用来定义路由规则。$routeProvider.when('/home',{
            template:'<div>这是主页</div><button ng-click="go()">go-settings</button>',
            controller:'ctrl',
        }).when('/list',{
            template:'<div>这是列表</div>',
controller:function($scope,$routeParams){
            },
        }).when('/settings',{
            template:'<div>这是设置</div>',
            controller:'ctrl',
        }).when('/settings/:id/:name',{
            template:'<div>设置{{id}}-{{name}}</div>',
controller:function($scope,$routeParams){
console.log($routeParams)$scope.id = $routeParams.id;$scope.name = $routeParams.name;
            }
        }).otherwise('/home')
    })

ui-router

ui-router和route的不同之处

<span ui-sref="home">主页</span>
<span ui-sref="user">用户</span>
<div ui-view></div>

app.config(function($stateProvider,$urlRouterProvider){
    $stateProvider.state('home',{
        url:'/home',
        template:'<span ui-sref="home.video">视频</span>/<span ui-sref="home.audio">音频</span><div ui-view></div>',
    }).state('home.video',{
        url:'/home/video',
        template:'<span>电视</span>/<span>电影</span>'
    }).state('home.audio',{
        url:'home/audio',
        template:'<span>唱片</span>/<span>歌曲</span>'
    }).state('user',{
        url:'/user',
        template:'<span ui-sref="user.u1">用户一</span>、<span ui-sref="user.u2">用户二</span> <div ui-view></div>'
    }).state('user.u1',{
        url:'/user/u1',
        template:'<span>Manster</span>'
    }).state('user.u2',{
        url:'/user/u2',
        template:'<span>Alex</span>'
    })$urlRouterProvider.otherwise('home')

app.run(function(ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: …){
    //监控路由变化rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
    });
    //监听不存在的路由
    $rootScope.$on('$stateNotFound',function(event,toState,toParams,fromState,fromParams){
    });
    //切换出错$rootScope.$on('$stateChangeError', function (event) {
        alert('没有此模板');
        $state.go('user');
    });
})

<a ui-sref="home.user">子内容</a>
<a ui-sref="home.profile">子内容</a>
<div ui-view></div>
<div ui-view="tmp1"></div>//指定名称
<div ui-view="tmp2"></div>

module.config(['$routeProvider', function ($routeProvider) {
    ParseError: KaTeX parse error: Expected 'EOF', got '}' at position 152: …rectTo: '/'});
}̲]);

app.config…stateProvider,ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: …outerProvider){stateProvider.state('home',{
        url:'/home/:id',
        views:{
            '':{//默认模板
                templateUrl:'1.html',
                controller: function ($scope,$stateParams) {
                    $scope.id =$stateParams.id//获得url中的参数
                }
            },
            'tmp1@home':{ //名称@url
                template:'<div>tmpl1</div>'
            },
            'tmp2@home':{
                template:'<div>tmpl2</div>'
            },
        },
    })
})