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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- Innodb页面存储结构-2
上一篇<Innodb页面存储结构-1>介绍了Innodb页面存储的总体结构,本文会介绍页面的详细内容,主要包括页头.页尾和记录的详细格式. 学习数据结构时都说程序等于数据结构+算法,而在i ...
- 分布式事务实现-Percolator
Google为了解决网页索引的增量处理,以及维护数据表和索引表的一致性问题,基于BigTable实现了一个支持分布式事务的存储系统.这里重点讨论这个系统的分布式事务实现,不讨论percolator中为 ...
- python 之socket
socket,它最初做为BSD UNIX的进程通信机制,通常被称做"套接字",如今已经成为windows和mac等其它操作系统所共同遵守的网络编程标准. socket使用ip+端口 ...
- innodb_file_per_table - 转换为InnoDB
共享InnoDB / var / lib / mysql / ibdata1存储的问题InnoDB表当前将数据和索引存储到共享表空间(/ var / lib / mysql / ibdata1).由于 ...
- Python初学者第三天 运算符、while循环
3day Python基础语法 1.运算符:算数运算符.比较运算符.赋值运算符.逻辑运算符 A.算数运算符:a=10,b=3 + 加 a+b - 减 a-b * 乘 a*b / 除 a/b ...
- 【转】Java学习---内存溢出的排查经历
[原文]https://www.toutiao.com/i6595365358301872643/ 前言 OutOfMemoryError 问题相信很多朋友都遇到过,相对于常见的业务异常(数组越界.空 ...
- VS2017C++单元测试
0.欢迎食用 希望对点进来的你有所帮助. 全文记流水账,内心想法如示例项目名称. 1.建立需测试的项目 新建项目 正常书写.h 和.cpp文件 2.新建单元测试 右击解决方案 -> 添加 -&g ...
- 作为一名GIS从业人员，这些网站你应该关注
前言:今年工作的第二年,端午节后,入职新公司.总算是回归本行,从事GIS相关工作.这个系列算是对在公司工作和学习成长的记录吧. 数据篇: 作为遥感的商业应用,首先考虑的是遥感数据的产品化. ...
- MySQL多实例.md
MySQL5.7多实例配置 数据库实例1配置文件 # cat /etc/my.cnf [mysqld] datadir=/data/mysql port=3306 socket=/tmp/mysql. ...
- c# winform 自动升级
winform自动升级程序示例源码下载 客户端思路: 1.新建一个配置文件Update.ini,用来存放软件的客户端版本: [update] version=2011-09-09 15:26 2.新 ...