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 的用法进行简单介绍,并做一个对比 ...
随机推荐
- springboot 学习之路 15(集成shiro)
shiro: Apache Shiro 是 Java 的一个安全框架.功能强大,使用简单的Java安全框架,它为开发人员提供一个直观而全面的认证,授权,加密及会话管理的解决方案. 更多shiro介 ...
- Python数据类型之dict和set
Python内置了字典:dict的支持.在其他语言中也成为map,使用键-值(key-value)存储,具有极快的查找速度. 把数据放入dict的方法,除了初始化时指定外,还可以通过key放入. 由于 ...
- 使用python做简单的接口性能测试
思路:利用ruquest发送请求,利用多线程模拟并发 下面直接上代码: #!/user/bin/env python #coding=utf-8 import requests import date ...
- 【Vue.js学习】生命周期及数据绑定
一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...
- Django有关的所有命令
1. Django的安装 pip install django ==1.11.11 pip install -i yuan django==1.11.11 2. 创建项目 django-admin s ...
- npm WARN unmet dependency问题的解决方法
remove node_modules $ rm -rf node_modules/ run $ npm cache clean 详见这里: http://stackoverflow.com/ques ...
- HTTP协议详解之url与会话管理
1 当我们访问一个网址的时候,这中间发生了什么 输入网址——浏览器查找域名的IP地址——浏览器给Web服务器发送一个HTTP请求——服务端处理请—— 服务端发回一个HTTP响应——浏览器渲染显示HTM ...
- InnerClass annotations are missing corresponding EnclosingMember annotations. Such InnerClas...
如果 你的项目中使用了注解插件 比如butterknife 升级3.1之后打包编译 出现以下错误提示 InnerClass annotations are missing correspondi ...
- JMX RMI 攻击利用
攻击者通过构造恶意的MBean,调用 getMBeansFromURL 从远程服务器获取 MBean,通过MLet标签提供恶意的MBean对象下载. 前提条件: 允许远程访问,没有开启认证 (com. ...
- （mac系统下）mysql 入门
1.安装好mysql之后并且服务启动,系统偏好设置里有启动mysql服务的按钮 看到running表示可用 2.通过终端访问mysql 先到mysql的路径下(默认安装没有配置环境变量):cd /us ...