先引用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. 7.java 加解密技术系列之 AES

    java 加解密技术系列之 AES 序 概念 原理 应用 代码实现 结束语 序 这篇文章继续介绍对称加密算法,至于今天的主角,不用说,也是个厉害的角色 — — AES.AES 的出现,就是为了来替代原 ...

  2. set集合（一）

    set 叫做集合  作用:  去重(去除重复) 举例-- >>> name_list = ['alben','nichole','lucy','andy','tom','alben' ...

  3. 可视化Git版本管理工具SourceTree的使用

    最近去了新公司,发现公司使用的团队版本管理工具是SourceTree,本人一直是SVN的热衷粉,很少使用git,所以从头学习git及可视化客户端SourceTree的使用,本贴只针对新手,大牛可以无视 ...

  4. python+unittest框架整理（一点点学习前辈们的封装思路，一点点成长。。。）

    预期框架整理目标: 1.单个用例维护在单个.py文件中可单个执行,也可批量生成组件批量执行 2.对定位参数,定位方法,业务功能脚本,用例脚本,用例批量执行脚本,常用常量进行分层独立,各自维护在单独的. ...

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

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

  6. ORACLE中死锁的知识点总结

      死锁的概念 什么是死锁呢? 其实我们生活中也有很多类似死锁的例子. 我先举一个生活中的例子:过年回家,父亲买了一把水弹枪,儿子和侄子争抢着要先玩,谁也不让谁,拆开包装后,一个抢了枪, 一个逮住了子 ...

  7. python之 centos6.7下 python 3.5.2、Django-1.9 安装

    在linux6.5中已经自带了python 2 .python 2.6 ,并且yum程序使用的就是自带的python,所以系统自带的python不要随意卸载否则可能导致yum用不了. 测试环境:cen ...

  8. 从零开始的JS生活（三）——内置对象

    咱们继续进行我们的正经的JS介绍.今天所要跟大家讲述的是JS中十分常用.十分常用.十分常用的内置对象. 一.世界上最熟悉的陌生就是,当你看着数组.而我看着你... - 数组对象 1.数组的概念 在内存 ...

  9. WPF界面XAML中的if……else……

    xaml本身并不支持if--else--,要用Converter替代if--else--来实现我们想要的效果,知者请速离开,不要浪费时间   需求:按照Window的WindowState来决定Gri ...

  10. 9.并发包非阻塞队列ConcurrentLinkedQueue

    jdk1.7.0_79  队列是一种非常常用的数据结构,一进一出,先进先出. 在Java并发包中提供了两种类型的队列,非阻塞队列与阻塞队列,当然它们都是线程安全的,无需担心在多线程并发环境所带来的不可 ...