Angular 学习笔记 5

来源：互联网发布：算法之道 pdf 编辑：程序博客网时间：2024/05/16 10:53

这篇和下一篇将介绍 ui-router。

https://github.com/angular-ui/ui-router

为什么使用这个而不使用 angular 原生的 router 呢？

因为项目已经用这个了。

依赖。

ui-router 创造了 state 的概念，我的第一反应是多此一举，

然后用着用着感觉还行。

例子1 basic state

  var state = "hi, everyone!";    angular.module('myApp', ['ui.router'])            .config(function ($stateProvider) {                $stateProvider                        .state(state, {                            url: '/hello',                            template: '<div>{{showState()}}</div>',                            controller: function ($scope) {                                $scope.showState = function () {                                    return state                                }                            }                        })            })    ;

<div ng-app="myApp">    <div ui-view>This div will be replaced.</div></div>

直接访问是不行的，需要加上 #hello，这就是路由。

例子2 three ways to change state

改变 state 或 route 的方法有三，最直接的就是改变访问的 url。

另外两种就是利用 ui-serf directive 或 $state 服务。

 angular.module('myApp', ['ui.router'])            .config(function ($stateProvider) {                $stateProvider                        .state('state1', {                            url: '/state1',                            template: '<div ui-sref="state2">go to state2</div>' +                            '<div ng-click="goToState2()">another way to state2</div>',                            controller: function ($scope, $state) {                                $scope.goToState2 = function () {                                    $state.go('state2');                                };                            }                        })                        .state('state2', {                            url: '/state2',                            template: '<div ui-sref="state1">go to state1</div>'                        })            })    ;

<div ng-app="myApp">    <div ui-view>This div will be replaced.</div></div>

例子3 $stateParams

有时候需要用到 url 中的部分路径作为参数，

这是就可以使用 $stateParams 服务了。

 angular.module('myApp', ['ui.router'])            .config(function ($stateProvider) {                $stateProvider                        .state('state', {                            url: '/state/:index',                            template: '<div>{{person}}</div>',                            controller: function ($scope, $stateParams) {                                var personList = [                                    "Linda",                                    "Mike",                                    "John"                                ];                                $scope.person = personList[$stateParams.index - 1]                            }                        })            })    ;

<div ng-app="myApp">    <div ui-view>This div will be replaced.</div></div>

0 0