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. <转>亲手缔造DNS体系，创建DNS私有根：DNS系列之六

    打造DNS私有根 我们现在已经从前面的博文中了解到了很多DNS的相关知识,今天我们用一个综合性的实验把前面的内容都串起来复习一下,这个有趣的实验就是DNS的私有根.私有根顾名思义是由个人或企业自行创建 ...

  2. CodeForce---Educational Codeforces Round 3 D. Gadgets for dollars and pounds 正题

    对于这题笔者无解,只有手抄一份正解过来了: 基本思想就是 : 二分答案,对于第x天,计算它最少的花费f(x),<=s就是可行的,这是一个单调的函数,所以可以二分. 对于f(x)的计算,我用了nl ...

  3. 线段相交 poj 1066

    // 线段相交 poj 1066 // 思路:直接枚举每个端点和终点连成线段,判断和剩下的线段相交个数 // #include <bits/stdc++.h> #include <i ...

  4. C# 与 VC Dll 传输信息

    考虑: 使用string类型传送: 在VC Dll中解析字符: 使用 string 类型将解析的类型传送到C#程序中: 建立VC解析的函数,提高代码可重用性

  5. MLE MAP EM

    1.最大似然估计 (MLE):  什么是最大似然估计?     问题:给定一组观察数据还有一个参数待定的模型,如何来估计这个未知参数呢? 观察数据(x1,y1)......(xn,yn)   待定模型 ...

  6. 关于登录的会话控制, 终极解决方案 - chunyu

    登录是用cookie还是session实现,一直有争议,普遍认为session更安全,可是有些功能,用cookie最方便也最高效,比如“记住我一周”.   cookie还是session,我的答案是两 ...

  7. 非常实用的Ubuntu常用终端命令

    先介绍关于文件和目录的命令: ls 列出当前目录文件(不包括隐含文件) ls -a 列出当前目录文件(包括隐含文件) ls -l 列出当前目录下文件的详细信息 cd .. 回当前目录的上一级目录 cd ...

  8. HDU 5768 Lucky7 （中国剩余定理 + 容斥 + 快速乘法）

    Lucky7 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5768 Description When ?? was born, seven crow ...

  9. C#中的ref和out的区别

    转载原地址 http://www.cnblogs.com/gjahead/archive/2008/02/28/1084871.html ref和out的区别在C# 中,既可以通过值也可以通过引用传递 ...

  10. oracle 11g 之 result cache

    oracle 11g 之 result cache 今天是2013-10-12,打算最近时间研究一下shared pool的相关原理以及awr报告分析.今天学习一下在oracle 11g shared ...