先引用Angular然后引用ui-router

路由清单：我们依赖的ui.router中提供了一个服务$state，此时可以用config来配置这个服务。用$stateProvider的state方法来设置路由清单。也就是说，定义一个个“状态”。

小tip：服务除了factory、service之外，还有一个provider。provider一般工程师不会自己定义的，你只需要知道所有的内置服务都是provider函数写的。provider函数写出的服务，可以在依赖注入前，用config函数配置。

config表示配置，可以配置任何内置服务，此时$state就是插件给我们的服务。一般的，服务对应的Provider就是服务名字后面直接加Provider（下文中黄色背景代码段）：

<script type="text/javascript">

var myapp = angular.module("myapp",["ui.router"]);

//配置路由表，实际上在配置$state服务。

myapp.config(function($stateProvider) {

$stateProvider

.state({

name: 'news',

url: '/news',

template: '<h3>新闻频道</h3>'

})

.state({

name: 'music',

url: '/music',

template: '<h3>音乐频道</h3>'

})

.state({

name: 'movie',

url: '/movie',

template: '<h3>电影频道</h3>'

});

});

</script>

配置路由使用$stateProvider的state方法，又是一个装饰者模式。

.state().state().state()装饰了三回，连续打点。

配置的时候有三个配置：名字name、路由url、模板template。

此时页面上不要忘记放置一个

<ui-view></ui-view>

的E级别指令。此时动态的内容（template里面的内容）都将呈现在ui-view里面。

完整代码：

<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

<meta charset="UTF-8">

<title>路由演示</title>

</head>

<body>

<ui-view></ui-view>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript" src="js/angular-ui-router.js"></script>

<script type="text/javascript">

var app = angular.module("app",["ui.router"]);

//对$state服务进行一个配置，此时可以书写路由清单

app.config(function($stateProvider){

$stateProvider

.state({

name: 'news',

url: '/news',

template: '<h3>新闻频道</h3>'

})

.state({

name: 'music',

url: '/music',

template: '<h3>音乐频道</h3>'

})

.state({

name: 'movie',

url: '/movie',

template: '<h3>电影频道</h3>'

});

});

</script>

</body>

</html>

Angular--ui-router的使用的更多相关文章

  1. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  2. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  3. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  4. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

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

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

  6. angularjs ngRoute和ui.router对比

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

  7. ngRoute 与ui.router区别

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

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

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

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

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

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

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

随机推荐

  1. SPFA求单源最短路径

    序 求最短路径的算法有很多,各有优劣. 比如Dijkstra(及其堆(STL-priority_queue)优化),但是无法处理负环的情况: 比如O(n^3)的Floyd算法:比如Bellman-Fo ...

  2. TensorFlow for R

    TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nod ...

  3. RavenDB FS 安装使用 介绍

    前言 最近项目因为要存储图片和文件,折腾了RavenDB,使用RavenDB的FS系统统一管理图片和文件. 安装 RavenDB 的FS文件系统,需要用到windows的远程差分压缩功能: 安装好之后 ...

  4. UX2内核浏览加速技术纲要

    UX2内核是本人负责主要开发的浏览服务项目,其主要目的是为开发者提供一个简单好用.轻便的网络浏览服务.UX2内核的安卓端是基于WebView进行深度优化的,同时欢迎大家使用这个内核用于app页面或浏览 ...

  5. ORACLE聚合函数细节

    select * from emp order by mgr; 概要 select count(1), --14 sum(1), --14 count(*), --14 count(distinct ...

  6. Python一键升级所有 模块/package

    import os,time allPackage=os.popen('pip list') allPackage=allPackage.read() allPackage=allPackage.sp ...

  7. python基础操作_方法（函数）

    #函数,方法#普通方法def hello(): print('hello')hello()#带形参的方法def hello1(name): print('hello%s'%name)hello1('布 ...

  8. [0] JAVABEAN & JAVASERVLET

    Servlet技术是Sun公司提供的一种实现**页的解决方案,它是基于Java编程语言的WEB服务器端编程技术.Servlet技术也是Jsp技术的基础.一个Servlet程序就是一个实现了特殊接口的J ...

  9. 处理jQuery append加入的元素 绑定事件无效的方法

    通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...

  10. thinkphp获取特定字段的两种方法

    thinkphp getField( )和field( ) 2014年10月05日 ⁄ 综合 ⁄ 共 1509字 ⁄ 字号 小 中 大 ⁄ 评论关闭 做数据库查询的时候,比较经常用到这两个,总是查手册 ...