先引用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. 谈一谈Java8的函数式编程（二） --Java8中的流

    流与集合    众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...

  2. Python之日志处理（logging模块）

    本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging四大组件记录日志 配置logging的几种方式 向日 ...

  3. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  4. 在Eclipse IDE使用Gradle构建应用程序

    文 by / 林本托 Tips 做一个终身学习的人. 1. 下载和配置Gradle Gradle Inc.是Gradle框架开发的公司,为Eclipse IDE提供了Gradle工具的支持. 此工具可 ...

  5. 使用sqlserver搭建高可用双机热备的Quartz集群部署【附源码】

    一般拿Timer和Quartz相比较的,简直就是对Quartz的侮辱,两者的功能根本就不在一个层级上,如本篇介绍的Quartz强大的序列化机制,可以序列到 sqlserver,mysql,当然还可以在 ...

  6. IPad分屏，当电脑第二显示屏

    最在在网上看到使用IPad可以做为电脑的第二个显示屏,对于我这样一个程序猿来说,这真是我的福音呀!因此在网上搜了许多关于Ipad投屏的信息,下面简单说明一下,包括怎么使用! 1.根据在网上搜索的结果, ...

  7. js文件下载及命名（兼容多浏览器）

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...

  8. Java中常见的数据结构的区别

    把多个数据按照一定的存储方式,存储起来,称存储方式之为数据结构. 数据的存储方式有很多,数组,队列,链表,栈,哈希表等等. 不同的数据结构,性能是不一样的,比如有的插入比较快,查询比较快,但是删除比较 ...

  9. jsonp跨域再谈

    昨天面试雷锋网,问到了jsonp跨域的问题,其实这个问题之前就会的,没有多大的深入,记得有一个名词在跨域中出现,就是同源机制, JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在J ...

  10. [转]html转码表

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...