Angular--ui-router的使用

先引用Angular然后引用ui-router

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

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

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

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

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

myapp.config(function($stateProvider) {

$stateProvider

.state({

url: '/news',

})

.state({

url: '/music',

})

.state({

url: '/movie',

});

</script>

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

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

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

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

<ui-view></ui-view>

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

完整代码：

<!DOCTYPE html>

<head>

</head>

<body>

<ui-view></ui-view>

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

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

app.config(function($stateProvider){

$stateProvider

.state({

url: '/news',

})

.state({

url: '/music',

})

.state({

url: '/movie',

});

</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.util.Properties类学习笔记
学习目标: 1.认识properties文件,理解其含义,会正确创建properties文件. 2.会使用java.util.Properties类来操作properties文件. 3.掌握相对路 ...
Java如何转换protobuf-net中的bcl.DateTime对象
一.定义DateTime Message 参考文档:https://github.com/mgravell/protobuf-net/blob/master/src/Tools/bcl.proto m ...
id 生成器介绍
背景介绍在一般的业务场景中, 初始的时候简单的自增数(比如MySQL 自增键)就可以很好的满足需求, 不过随着业务的发展和驱动, 尤其是在分布式的场景中, 如何生成全局的唯一 id 便成了需要慎重考 ...
python 字符串常用方法
字符串常用方法 capitalize() String.capitalize() 将字符串首字母变为大写 name = 'xiaoming' new_name = name.capitalize() ...
pythion 第二弹
################################第二节################################################python中数据类型的常见的方法 ...
js实现防盗图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
java中的一些规则（菜鸟的课堂笔记）
ls 查看目录下文件 java规则代码都定义在类中,用class定义禁止一个源文件写两个类: 一个源文件中,只能有一个类文件是pubic: 一个源文件中如果有多个类,编译完之后会产生多个class ...
weex入门
近期要做一个安卓端的原生应用程序.情况是这样的:需求方原先已经实现了网页,是一个工具类应用,大致作用是连接到他们公司生产的硬件,然后通手机与智能硬件通信来对硬件进行一系列控制.不过呢,这个网页先前是由 ...
Android搞事篇——使用Intent跳转界面
跳转页面基本分为三个步骤: 1.初始化一个intent:(一个intent就够用了): 2.传入intent参数: 3.调用startactivity();实现跳转页面具体操作如下首先你需要一个项 ...
最短路径Floyd算法【图文详解】
Floyd算法 1.定义概览 Floyd-Warshall算法(Floyd-Warshall algorithm)是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被 ...

Angular--ui-router的使用

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

随机推荐

热门专题