Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router works.

Key Value:

ng-href="#/list/{{item.name}}"
.state('list.item', {

                url: '/:item',

                templateUrl: 'templates/list.item.tmpl.html',

                controller: 'ItemCtrl',

                controllerAs: 'item'

            })
ui-sref="list.item({item: item.name})"

the same as 

ui-sref=".item({item: item.name})" <!-- ui.route understand to find the parent router-->

Note: we can put template into a spreated html, here we just put inside index.html and use type to define it.

script type="text/ng-template"

<!DOCTYPE html>

<html ng-app="app">

<head>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>

    <meta charset="utf-8">

    <title>JS Bin</title>

</head>

<body>

<div class="container">

    <h4>

        A brief introduction to <strong class="text-danger">ui-router</strong>

        <span class="text-muted">(v0.2.0)</span>

    </h4>

    <div>

        <ul class="nav nav-pills">

            <li><a ui-sref="home">Home</a></li>

            <li><a ui-sref="list">Shopping List</a></li>

        </ul>

    </div>

    <div ui-view></div>

</div>

<script type="text/ng-template" id="templates/home.tmpl.html">

    <div class="row">

        <h3>What is ui-router?</h3>

        <p>URL routing is a popular approach to matching the contents of a URL to specific functionality within a web

            application. URL routes programmatically present specific content to users based on the URL that they are

            visiting. It is a popular approach that has proven to be very effective.</p>

        <P>Something that might not be obvious is that URL routing is also a finite state machine. When you configure

            the routing for an app, you are laying out the various states the application can be in, and informing the

            application what to display and do when a specific route is encountered.</P>

        <p>AngularJS supplies URL routing by default. It is adequate, but also has some limitations.</p>

    </div>

</script>

<script type="text/ng-template" id="templates/list.tmpl.html">

    <div class="row padded">

        <div class="list-group col-xs-3">

            <a class="list-group-item"

               ng-repeat="item in list.shoppingList"

               ng-class="{active: item.selected}"

               ng-href="#/list/{{item.name}}"

               ng-click="list.selectItem(item)">{{item.name}}</a>

        </div>

        <div ui-view class="col-xs-9"></div>

    </div>

</script>

<script type="text/ng-template" id="templates/list.item.tmpl.html">

    <h3>{{item.item}}</h3>

    <img ng-src="//robohash.org/{{item.item}}.png"/>

</script>

<script src="app.js"></script>

</body>

</html>

"ui-view" is important to tell where ui-router should show the view.

/**

 * Created by Answer1215 on 12/16/2014.

 */

angular.module('app', ['ui.router'])

    .config(function($stateProvider, $urlRouterProvider) {

        $stateProvider

            .state('home', {

                url: '/home',

                templateUrl: 'templates/home.tmpl.html'

            })

            .state('list', {

                url: '/list',

                templateUrl: 'templates/list.tmpl.html',

                controller: 'ListCtrl',

                controllerAs: 'list'

            })

            //nested router: "list.item",

            // ui-router understands that item is under list parent.

            .state('list.item', {

                url: '/:item',

                templateUrl: 'templates/list.item.tmpl.html',

                controller: 'ItemCtrl',

                controllerAs: 'item'

            })

    })

    .controller('ListCtrl', ListCtrl)

    .controller('ItemCtrl', ItemCtrl)

function ItemCtrl($stateParams) {

    var ItemCtrl = this;

    ItemCtrl.item = $stateParams.item;

}

function ListCtrl() {

    var ListCtrl = this;

    ListCtrl.shoppingList = [

        {name: 'Milk'},

        {name: 'Eggs'},

        {name: 'Bread'},

        {name: 'Cheese'},

        {name: 'Ham'}

    ];

    ListCtrl.selectItem = function(selectedItem) {

        _(ListCtrl.shoppingList).each(function(item) {

            item.selected = false;

            if(selectedItem === item) {

                selectedItem.selected = true;

            }

        });

    };

}

Read More: https://egghead.io/lessons/angularjs-introduction-ui-router

[AngularJS] Introduction to ui-router的更多相关文章

  1. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  2. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  3. AngularJS学习之 ui router

    1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...

  4. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  5. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  7. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  8. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  9. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

随机推荐

  1. ArcGIS AO开发高亮显示某些要素

    参考代码1 ifeaturecursor pcur = ifeatureclass.search(iqueryfilter pfilter); pfilter.whereclause = strAdd ...

  2. Linux基本命令（4）有关关机和查看系统信息的命令

    有关关机和查看系统信息的命令 命令 说明 shutdown 正常关机 reboot 重启计算机 ps 查看目前程序执行的情况 top 查看目前程序执行的情景和内存使用的情况 kill 终止一个进程 d ...

  3. 常见设计模式的解析和实现（C++）之九—Decorator模式

    作用:动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. UML结构图: 抽象基类: 1)  Component :定义一个对象接口,可以为这个接口动态地 ...

  4. 使用std::function 把类成员函数指针转换为普通函数指针

    前言 这是改造前一篇 设计模式 的基础,使通知者不必知道观察者的类名和函数名,只需要知道更新函数的原型即可. 开发环境:WIN7 32位 + VS2010 发现在VS2005中使用std::funti ...

  5. MFC图形图像

    一.CDC类 CDC类简介 CDC类是一个设备上下文类. CDC类提供了用来处理显示器或打印机等设备上下文的成员函数,还有处理与窗口客户区关联的显示上下文的成员函数.使用CDC的成员函数可以进行所有的 ...

  6. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

  7. Nginx和Tengine的详细安装图文教程（Linux下）

    简洁安装 安装依赖 yum -y install gcc openssl-devel pcre-devel zlib-devel 编译三步走./configure \ --prefix=/opt/sx ...

  8. Spring Auto scanning components

    Normally you declare all the beans or components in XML bean configuration file, so that Spring cont ...

  9. codeforces 630D Hexagons!

    D. Hexagons! time limit per test 0.5 seconds memory limit per test 64 megabytes input standard input ...

  10. [iOS 多线程 & 网络 - 1.3] - NSOperation

    A.NSOperation的基本使用 1.NSOperation的作用 配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOperatio ...