AngularUI Router学习笔记

AngularUI Router

一,准备ui-router。

1,使用npm包管理器install 该服务。(使用npm只是其中一种途径)在当前项目的命令行中输入 npm install angular-ui-router

2 , 在index.html中包含 angular-ui-router.js ;

3,在主模型的依赖关系列表中加入 ui.router

具体的代码可以如下:

<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">script>
    <script src="js/angular-ui-router.min.js">script>
    <script>
        var myApp = angular.module('myApp', ['ui.router']);
        ...
    script>
    ...
head>
<body>
    ...
body>
html>

二,Nested States & Views。

1,首先,完成上一步的操作。

2,添加 ui-view指令到中。


<body>
    <div ui-view>div>
    
    <a ui-sref="state1">State 1a>
    <a ui-sref="state2">State 2a>
body>

3,可以观察到ui-sref用在标签之中。ui-sref除了能够实现state的改变,如果某个state有与之对应的URL,那么ui-sref还会自动给标签添加href属性。接下来我们会定义一些模板,它们会被插入到ui-view的位置。应该注意的是它们也会有自己的ui-view


<h1>State 1h1>
<hr/>
<a ui-sref="state1.list">Show Lista>
<div ui-view>div>

<h1>State 2h1>
<hr/>
<a ui-sref="state2.list">Show Lista>
<div ui-view>div>

4 , 接着继续添加子模版,它们会被插入到其父状态的ui-view之中。


<h3>List of State 1 Itemsh3>
<ul>
  <li ng-repeat="item in items">{{ item }}li>
ul>

<h3>List of State 2 Thingsh3>
<ul>
  <li ng-repeat="thing in things">{{ thing }}li>
ul>

5,最后通过$stateProvider服务将所有的状态都连接起来。

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "partials/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });
});

6,以下链接可以看到实现的效果。

Go to Quick Start Plunker for Nested States & Views

三,Multiple & Named Views。

意思就是每一个state有多个view与之相对应。

1,添加多个ui-view


<body>
    <div ui-view="viewA">div>
    <div ui-view="viewB">div>
    
    <a ui-sref="route1">Route 1a>
    <a ui-sref="route2">Route 2a>
body>

2,然后使用config对模块进行修饰。

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

3,以下链接可以看到实现的效果。

Go to Quick Start Plunker for Multiple & Named Views

参考资料:

github上的ui-router文档

你可能感兴趣的:(AngularUI Router学习笔记)