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. Stamps and Envelope Size

    题意: 容量为s的信封,给n组邮票的面值,求哪一组能组成的连续的面值的最大值最大,若有多组答案,输出面值数量最小的一组,若数量相等,输出最大面值最小的一组,若最大面值相等,输出第二大面值最小的一组,依 ...

  2. 《Python CookBook2》 第一章 文本 - 每次处理一个字符 && 字符和字符值之间的转换

    文本 - 总结: 什么是文本Python 中的string 类型是不可变类型.文本,一个字符的矩阵,每一个单独的文本快可以被缩进和组织起来. 基本的文本操作①解析数据并将数据放入程序内部的结构中:②将 ...

  3. CCCallFuncN误用导致引用计数循环引用

    昨天测试“角色被遮挡部分透明显示”功能时,发现角色死亡后,其轮廓精灵不会消失.调试发现,角色在死亡时,其引用计数retain_count居然是9.这是由引用计数混乱引起的内存泄露. 加了很多日志跟踪r ...

  4. SSH无法连接服务器

    服务器版本如下: @kelWEB4:/etc# lsb_release -a LSB Version: :core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd ...

  5. adb常用命令介绍

    adb connect 命令格式:adb connect <host>[:<port>] 作用:connect to a device via TCP/IP,Port 5555 ...

  6. 基于easyui的验证扩展

    基于easyui的验证扩展 ##前言 自己做项目也有好几年的时间了,一直没有时间整理自己的代码,趁春节比较闲,把自己以前的代码整理了一篇.这是基于easyui1.2.6的一些验证扩展,2012年就开始 ...

  7. Hadoop学习笔记2---配置详解

    配置系统是复杂软件必不可少的一部分,而Hadoop配置信息处理是学习Hadoop源代码的一个很好的起点.现在就从Hadoop的配置文件谈起. 一.Hadoop配置格式 Hadoop配置文件格式如下所示 ...

  8. elisp debug

    M-x  是运行command的意思. 若使用常规Emacs debugger(即不使用edebuger),先把要debug的函数加入到debug-on-entry:  M-x   debug-on- ...

  9. 丁又专老师作业——Java检测代码

    package com.util; import java.io.*; import java.util.regex.Pattern; /** * 代码统计工具 * 统计某个java源文件或某个目录中 ...

  10. Spring EL method invocation example

    In Spring EL, you can reference a bean, and nested properties using a 'dot (.)' symbol. For example, ...