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. 【转】ACE开发环境搭建

    Windows平台 1)        下载ACE源码 ACE官方网址:http://www.cs.wustl.edu/~schmidt/ACE.html ACE下载地址:http://downloa ...

  2. hdu 3635 Dragon Balls（加权并查集）2010 ACM-ICPC Multi-University Training Contest（19）

    这道题说,在很久很久以前,有一个故事.故事的名字叫龙珠.后来,龙珠不知道出了什么问题,从7个变成了n个. 在悟空所在的国家里有n个城市,每个城市有1个龙珠,第i个城市有第i个龙珠. 然后,每经过一段时 ...

  3. 对LR analysis的平均事务响应时间和summary中时间值不同的解释

    最近在做性能测试对LR结果分析时,又碰到了关于summary里与平均事务响应时间中各交易的响应时间值不同的问题.在此做个记录. 若交易中设置了思考时间,分析时需要注意查看是否过滤思考时间. 设置是否包 ...

  4. hdu1722 bjfu1258 辗转相除法

    这题就是个公式,代码极简单.但我想,真正明白这题原理的人并不多.很多人只是随便网上一搜,找到公式a了就行,其实这样对自己几乎没有提高. 鉴于网上关于这题的解题报告中几乎没有讲解原理的,我就多说几句,也 ...

  5. Web自动化框架之五一套完整demo的点点滴滴（excel功能案例参数化+业务功能分层设计+mysql数据存储封装+截图+日志+测试报告+对接缺陷管理系统+自动编译部署环境+自动验证false、error案例）

    标题很大,想说的很多,不知道从那开始~~直接步入正题吧 个人也是由于公司的人员的现状和项目的特殊情况,今年年中后开始折腾web自动化这块:整这个原因很简单,就是想能让自己偷点懒.也让减轻一点同事的苦力 ...

  6. Windows套接字Socket函数

    1.使用套接字函数之前,先要加载套接字函数库: #include "Winsock2.h" #pragma comment(lib,"Ws2_32.lib") ...

  7. MFC图形图像

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

  8. 数往知来C#之面向对象准备〈一〉

    1.CLR加载编译源文件 注1.:当你点击调试或者生成解决方案的时候这就是一个编译过程首先CLR加载源文件也就是你写的代码(此代码在文件中是字符串)然后将项目中的嗲吗编译成IL代码进而生成程序集 证明 ...

  9. bookhub -- 扁平化本地电子书管理与分享工具

    代码 github 地址:https://github.com/JackonYang/bookhub 初稿:    1. 关键功能点 扫描本地电子书(扩展名 pdf/epub 等),将不重复的复制到特 ...

  10. Java每日一则-001

    Java中类名与文件名的关系 1.Java保存的文件名必须与类名一致: 2.如果文件中只有一个类,文件名必须与类名一致: 3.一个Java文件中只能有一个public类: 4.如果文件中不止一个类,文 ...