Angular--ui-router的使用
先引用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的使用的更多相关文章
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
随机推荐
- Java生成二维码--QRGen
最近公司需求需要生成一个二维码 , 由于之前没有接触过 , 故此做个记录 . 在网上找到了不少二维码生成工具,都蛮好用的. 不过要集成二维码生成功能到应用开发中,就要选择最好用成熟的库了,最终决定采用 ...
- 探讨SQL Server并发处理存在就更新七种解决方案
前言 本节我们来讲讲并发中最常见的情况存在即更新,在并发中若未存在行记录则插入,此时未处理好极容易出现插入重复键情况,本文我们来介绍对并发中存在就更新行记录的七种方案并且我们来综合分析最合适的解决方案 ...
- Unity遮挡透明渐变
遮挡透明若没有渐变实现方法: 1.透明中物体存在list中 2.每过一段时间(可以每帧,但是流畅性会降低)摄像机发送一条射线向玩家,out hitInfo 3.list与hitInfo比对,将在lis ...
- 利用 os.walk() 遍历目录
os.walk: walk(top, topdown=True, onerror=None, followlinks=False) 参数: top 要遍历的目录地址 topdown 为真,则优先遍历t ...
- C语言指针声明探秘
C语言指针声明探秘
- .net core中引用webservice，并忽略https证书验证
1.打开vs, 工具-->扩展和更新 下载这个 2. 在admin下右键,添加-->connected service 选择wsdl文件路径,或者服务的url,比如https://**** ...
- cpp(第三章）
1.使用{}初始化时,{}若为空则默认初始化为0,至于防范类型转化错误 2.int对计算机而言最为自然的长度,处理起来效率最高的长度.int可能是short(16位)也可能是long(32位),在知道 ...
- MySQL优化之表结构优化的5大建议（数据类型选择讲的很好）
殊不知,在N年前被奉为"圣经"的数据库设计3范式早就已经不完全适用了.这里我整理了一些比较常见的数据库表结构设计方面的优化技巧,希望对大家有用. 由于MySQL数据库是基于行(Ro ...
- JS数组+JS循环题
先看JS循环作业题: 一.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 <script type="text/javascript"> ...
- Java基础——继承
学习Java继承之前,我们想回忆一下Java面向对象需要特别注意的几个关键点. 面向对象是将复杂的事情简单化了,它通过封装的方式使得代码的重用性更高和安全性更强.平时我们要学会用面向对象的方式去思考, ...