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. [Everyday Mathematics]20150127

    设 $f,g:[a,b]\to [0,\infty)$ 连续, 单调递增, 并且 $$\bex \int_a^x \sqrt{f(t)}\rd t\leq \int_a^x \sqrt{g(t)}\r ...

  2. SQL注入中利用XP_cmdshell提权的用法(转)

    先来介绍一下子服务器的基本情况,windows 2000 adv server 中文版,据称 打过了sp3,asp+iis+mssql .首先扫描了一下子端口,呵呵,开始的一般步骤. 端口21开放: ...

  3. UVALive 5029

    用字典树来查询,关键是怎么处理输入的8个数字代表的字符,把每个数分别除以0.95和1.05得到8的区间,按左区间从小到大排序,那么和第一个区间有交集的必然代表二进制0,与它没交集的之后都是1,因为题目 ...

  4. <转>Python3.x和Python2.x的区别介绍

    1.性能Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可以取得很好的优化结果.Py3.1性能比Py2.5慢 ...

  5. SQL你必须知道的-查询聚合分组排序

    use MySchoolTwo    -- 简单查询    select * from Student    -- 话说这种查询的效率要比 * 要高级点    select sId , sName , ...

  6. 关于display显示 linux

    export DISPLAY=ipaddressofyourmachineorpc:0.0 如果要在本来的机器上显示,使用 export DISPLAY=localhost:0

  7. Tkinter教程之Text篇(3)

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811348 '''Tkinter教程之Text篇(3)''''''14.自定义tag的两个内置 ...

  8. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  9. java.net.BindException: Address already in use: bind

    环境:jxse-2.7, netty-3.6.6.Final 现象:每次执行都抛出以下异常 八月 08, 2013 8:45:19 下午 net.jxta.logging.Logging logChe ...

  10. Gym 100818F Irrational Roots （数学）

    Irrational Roots http://acm.hust.edu.cn/vjudge/contest/view.action?cid=101594#problem/F [题意]: 判断一个整系 ...