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和伟大的 ...
随机推荐
- hdu 1711---KMP
题目链接 Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], ...
- 把ipad作为电脑的第二显示器
需要:1,iPad 2,ios端需要软件idisplay(在pp助手里搜索idisplay下载即可) 3,windows需要软件iDisplay(链接http://www ...
- 如何通过 WebP 兼容减少图片资源大小
作者:学军又拍云 CDN 服务公测 WebP 自适应功能,为客户减少图片资源大小.本文我们将一起来阐述WebP兼容的来龙去脉. 前言我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片 ...
- 深入解析java String中getBytes()的编码问题
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6900536.html Java服务器后台在和Android端App通信时,遇到了两端关于用MD5加密同一包含 ...
- python内置的全局变量
print(__doc__) # 文件注释print(__file__) # 当前文件的绝对路径print(__package__) # 当前文件所在的包 当前文件: None 导入其他的文件:指定文 ...
- 用超链接传递数组或get方式
<?php /** * 超链接传递数组参数 */ if($_GET['names']){ $arr=explode('-',$_GET['names']);//将数组分割为字符串 print_r ...
- python——爬虫&问题解决&思考（三）
继续上一篇文章的内容,上一篇文章中,将爬虫调度器已经写好了,调度器是整个爬虫程序的"大脑",也可以称之为指挥中心.而现在,我们要做的就是去将调度器中用到的其他组件写好.首先是url ...
- 2-SAT算法
参考blog 参考论文 参考论文 题目 & 题解 裸2-SAT poj3683 poj3207 poj3678 poj3648 2-SAT + 二分法 poj2723 poj2749 hdu3 ...
- 一位菜鸟的java 最基础笔记
java的特性 简单性(Simple). 结构体系中立(Architecture Neutral). 面向对象(Object Oriented). 易于移植(Portable). 分布式(Distri ...
- nodejs零基础详细教程1：安装+基础概念
第一章 建议学习时间2小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...