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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- VMWare虚拟机安装Linux系统时安装界面显示不全的解决、Linux分区
1.只有最下面的按钮不全(可以显示字的一部分):可以用Tab键操控进行下一步 2.只有一半左右的界面:用Alt+鼠标左键移动安装界面 3.关于Linux分区:如果想用Linux进行深入操作,尽量不要选 ...
- JSP中文乱码问题终极解决方案
在介绍方法之前我们首先应该清楚具体的问题有哪些,笔者在本博客当中论述的JSP中文乱码问题有如下几个方面:页面乱码.参数乱码.表单乱码.源文件乱码.下面来逐一解决其中的乱码问题. 一.JSP页面中文乱码 ...
- Zabbix 添加主机，获取模板templateID
添加一个Host Name=Mail CAS_1.1,IP=10.16.3.4的主机,并加入组groupID=30,连接模板templateID=10132. # -*- coding: UTF-8 ...
- Python2与python3中字符串的区别
Python2 在python中包含两种字符串类型:str和unicode,str并不是完全意义上的字符串,其实是由unicode经过编码(encode)后的字节组成的字节字符串,而unicode则是 ...
- Linux 配置 hosts
1. hosts 是什么 维基百科对 hosts 的介绍如下: hosts文件(域名解析文件)是一个用于储存计算机网络中各节点信息的计算机文件. 这个文件负责将主机名称映射到相应的IP地址. host ...
- 【转】Java学习—什么是时间复杂度
[原文]https://www.toutiao.com/i6593144782992704007/ 转载:程序员小灰 时间复杂度的意义 究竟什么是时间复杂度呢?让我们来想象一个场景: 某一天,小灰和大 ...
- 2.3Python基础语法（三）之输入输出
返回总目录 目录: 1.input输入 2.print输出 (一)input输入 1.input的处理方式 # 输入input string = input("请输入一个字符串:" ...
- 【12】python 栈型数据结构模拟、队列型数据结构模拟
一.压栈操作模拟 #__author:"吉*佳" #date: 2018/10/21 0021 #function:栈 # 栈:即是先进后出的一种数据结构 # (1)模拟压栈操作 ...
- U-Mail：如何实现EDM的个性化和定制化？
设想一下,一个上班族一天要接到多少垃圾邮件?据媒体报道,目前来往的邮件中,高达95%以上的是垃圾邮件,而且有些垃圾邮件还会故意占据着邮箱的最前列.同时,随着人们接受资讯越来越快捷便利,渠道越来越多,也 ...
- [python]如何理解uiautomator里面的 right，left，up，down 及使用场景
关于Android自动化uiautomator 框架,前面有讲在有些场景下,比如需要在设置界面中将某些选项开关打开或者关闭(前提是这些选项和开关的控件(resourceId,className,tex ...