angular-ui-router速学
Demo1
初始化
<html ng-app="app">
<head>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<ul class="nav navbar-nav">
<li>
<a ui-sref="home" ui-sref-active="active">Photos</a>
</li>
<li>
<a ui-sref="about" ui-sref-active="active">About</a>
</li>
</ul> <div ui-view> </div> <script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
angular.module('app',["ui.router"])
.config(function($stateProvider){ let routeStates = [
{
name: 'home',
url: '/home',
template: '<h3>home!</h3>'
},
{
name: 'about',
url: '/about',
template: '<h3>about!</h3>'
}
] routeStates.forEach(state => {
$stateProvider.state(state);
})
}) </script>
</html>
Demo2
使用controller和templateUrl属性
<script>
angular.module('app',["ui.router"]) .controller('loginController', function($scope) {
$scope.name = 'finley';
})
.config(function($stateProvider){ let routeStates = [
{
name: 'home',
url: '/home',
template: '<h3>home!</h3>'
},
{
name: 'about',
url: '/about',
template: '<h3>about!</h3>'
},
{
name: 'login',
url: '/login',
controller: 'loginController',
templateUrl: 'views/login.html'
}
] routeStates.forEach(state => {
$stateProvider.state(state);
})
}) </script>
项目代码：https://git.oschina.net/finley/angular-ui-router-demo/
参考：https://github.com/angular-ui/ui-router/wiki
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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- Android 经典欧美小游戏 guess who
本来是要做iOS开发的,因为一些世事无常和机缘巧合与测试工作还有安卓系统结下了不解之缘,前不久找到了guess who 源码,又加入了一些自己的元素最终完成了这个简单的小游戏. <?xml ve ...
- Intellij IDEA去除@Autowired下划线红色提示
Intellij IDEA通过@Autowired注入的对象,在不改变配置的情况下一直有红色下划线,虽然不影响运行,但是跟小Alan一样有强迫症的肯定受不鸟. 那么怎么去除它呢? 解决方式:改变@Au ...
- Python之密度聚类
# -*- coding: utf-8 -*- """ Created on Tue Sep 25 10:48:34 2018 @author: zhen "& ...
- python-docx 使用教程
快速入门 入门python-docx很容易.让我们来看一下基础知识. 官方文档地址请点击 打开文档 你需要的第一件事是工作的文档.最简单的方法是: from docx import Document ...
- python类的内置方法
1,__init__(self) 初始化方法,实例化一个对象的时候就会被执行 2,__call__(self,*args) 把实例对象作为函数调用,即实例化一个对象后,在对象后面加括号即可调用__ca ...
- 巧用top percent优化top 1
废话不多说,直接上sql B.CREW_ID, E.CREW_NAME,C.OFFBLK,C.ONBLK,dbo.PEK_OPS_Date(A.STD) as STD FROM dbo.FLIGHTS ...
- Cisco ASA 使用ASDM 配置管理口 方法
CISCO ASA防火墙ASDM安装和配置 准备一条串口线一边接台式机或笔记本一边接防火墙的CONSOLE 接口,通过CRT或者超级终端连接ASA在用ASDM图形管理界面之前须在串口下输入一些命令开启 ...
- Qt: QSqlRecord字段值为null时注意事项
QSqlRecord在对应字段值为null时,QSqlRecord::value返回的QVariant是有效但为null(相当于使用QVariant(Type type)构造的),所以此时做对应类型的 ...
- MPT树详解
目录 MPT树定义 MPT树的作用是什么? 前缀树与默克尔树 前缀树 默克尔树 三种节点类型 MPT中的Merkle HP编码 官方表示形式 相关MPT树 参考目录 @ MPT树定义 一种经过改良的. ...
- OpenCV——边缘检测入门、Canny边缘检测
边缘检测的一般步骤: 最优边缘检测的三个评价标准: 低错误率:表示出尽可能多的实际边缘,同时尽可能地减少噪声产生的误报: 高定位性:标识出的边缘要与图像实际边缘尽可能接近: 最小响应:图像中的边缘只能 ...