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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- 'adb remount'的作用是什么？在什么情况下有用？
'adb remount' 将 '/system' 部分置于可写入的模式,默认情况下 '/system' 部分是只读模式的.这个命令只适用于已被 root 的设备. 在将文件 push 到 '/sys ...
- 类与接口（五）java多态、方法重写、隐藏
一.Java多态性 面向对象的三大特性:封装.继承.多态. 多态的类型,分为以下两种: 编译时多态: 指的是 方法重载.编译时多态是在编译时确定调用处选择那个重载方法,所以也叫 静态多态,算不上真正的 ...
- spring-quartz定时任务初探
最近有关定时任务的需求还蛮多的,我这里呢用的是最简单的用法,后续了解更深层次的用法来优化目前的代码. 首先就是引入相关jar quartz-1.6.4.jar spring的jar就不说了 接 ...
- mongodb3.X权限配置
环境: CentOS6.8 mongodb3.4.1 1.连接mongodb数据库(如果mongo命令没有做环境变量配置,需要定位到有mongo命令的目录) [root@VM_118_34_cent ...
- Oracle EBS 物化视图
怎么理解物化视图呢,先随意拿一个建物化视图的例子看一下. create materialized view EBS_ACCOUNTS_HIERARCHY_MV refresh complete on ...
- chattr -lsattr 文件加锁解锁简单用法
chattr: 加锁文件,无修改,无删除权限. 常用参数: +a: 可给文件追加内容,但无法删除. +i 加锁文件(文件不能被删除.改名.设定链接关系,同时不能写入或追加内容) -i ...
- java实现安全证书相关操作
https://blog.csdn.net/zhushanzhi/article/details/77864516 版权声明:本文为博主原创文章,未经博主允许不得转载. package test; i ...
- Python实例---模拟微信网页登录(day1)
第一步:创建Django项目 创建Django项目,添加App 创建静态文件夹static 修改settings.py文件 1. 取消csrf注释 2. 添加静态文件路径 # 添加静态文件路径 STA ...
- matlab使用总结2
1.MATLAB中a./b与a/b的区别以及左除和右除 http://blog.csdn.net/wk119911/article/details/7452411 a=[1 2;3 4]; b=[1 ...
- 有关java编辑器myeclipse编辑网站的一些设置(个人习惯)
一.界面显示设置 首先进入一个新的空间,里面的设置肯定都是默认的.点击上方导航栏的window-Perferences-Appearance可以去进行设置界面的显示,Theme中可以选择windows ...