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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- OneAPM NI 基于旁路镜像数据的真实用户体验监控
在这个应用无处不在的时代,一次网络购物,一次网络银行交易,一次网络保险的购买,一次春运车票的购买,一次重要工作邮件的收发中出现的延时,卡顿对企业都可能意味着用户忠诚度下降,真金白银的损失. 因而感知真 ...
- sqlserver 一键备份，异机还原脚本
REM +---------------------------------------------------------------------------------+ REM |desc AU ...
- 【EJB学习笔记】——EJB开发环境搭建（Eclipse集成JBoss）
之前一直用的EJB开发环境是他们搭建好的,直接拿来用,不过还是感觉老吃别人嚼好的不太好吃,所以自己动手来玩一玩. EJB开发依赖的最基本的环境:JDK.Eclipse.JBoss,这里简单介绍一下最基 ...
- Ctrl+Alt+F1~F6
Ctrl+ALT+F1~F6 可以进入不同的字符终端和图形界面.体现了 linux 或者 unix 的多用户的特点. 6个不同的终端,相当于六个不同的用户. 保持更新,转载请著名出处.
- 一起学习Boost标准库--Boost.texical_cast&format库
今天接续介绍有关字符串表示相关的两个boost库: lexical_cast 将数值转换成字符串 format 字符串输出格式化 首先,介绍下lexical_cast ,闻其名,知其意.类似C中的at ...
- django模板系统（下）
主要内容:母版,继承母版,块,组件,静态文件 母版 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Beta阶段第一次冲刺
Beta阶段第一次冲刺 以后严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正 ...
- Alpha冲刺&总结报告（12/12）（麻瓜制造者）
各个成员今日完成的任务 邓弘立: 完成了上传头像的功能 符天愉: 对所有接口进行了再次测试 江郑: 完成了发布需求接口部分的进一步测试和接口文档的编写 刘双玉: 完成了商品信息接口部分的进一步测试和接 ...
- PyQt5--QToggleButton
# -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: '' import sys fr ...
- sphinx编译安装
install sphinx wget http://sphinxsearch.com/files/sphinx-2.0.8-release.tar.gz tar zxvf sphinx--relea ...