Angularjs - 路由 angular-ui-router
注意，使用的路由不是官方的，而是第三方的。因为这个更加强大支持嵌套而且大家都是这样用的
http://www.tuicool.com/articles/zeiy6ff
http://www.open-open.com/lib/view/open1416878937309.html
http://angular-ui.github.io/
安装
npm install angular-ui-router
或者直接使用
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
练习1：（在指定url和templateUrl路径时。好像不能用相对路径，当时我是必须使用‘/’才能正常使用的。另外注意单词拼写templateUrl,并且config的两个参数是固定形式，就和$scope一样必须写死）
main.html
<!DOCTYPE html>
<html ng-app = 'myapp'>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.6//css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>AngularJS Home Page (Ui-router Demonstration)</h3>
<div data-ui-view=""></div>
<script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myapp",["ui.router"]);
myApp.config(function($stateProvider,$urlRouterProvider)
{
$urlRouterProvider.when("","/pageTab");
$stateProvider
.state("pageTab",{url:"/pageTab",templateUrl:"pageTab.html"})
.state("pageTab.page1",{url:"/page1",templateUrl:"page1.html"})
.state("pageTab.page2",{url:"/page2",templateUrl:"page2.html"})
.state("pageTab.page3",{url:"/page3",templateUrl:"page3.html"})
})
</script>
</body>
</html>
pageTab.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<span style="width:100px" ui-sref=".page1"><a href="">page1</a></span>
<span style="width:100px" ui-sref=".page2"><a href="">page2</a></span>
<span style="width:100px" ui-sref=".page3"><a href="">.page3</a></span>
</div>
<div>
<div ui-view=""></div>
</div>
</div>
</body>
</html>
page1.html + page2.html + page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page-1</title>
</head>
<body>
page-1
</body>
</html>
练习2：（比起上一个练习，这个路由规则更加体现出多层次嵌套）
main.html
<!doctype html>
<html ng-app="MyUIRoute">
<head>
<meta charset="utf-8">
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
<script type="text/javascript">
var myUIRoute = angular.module('MyUIRoute', ['ui.router']);
myUIRoute.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("","/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "tpls/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "tpls/list_1.html",
controller: function($scope) {
$scope.items = ["喵", "了", "个", "咪"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "tpls/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "tpls/list_2.html",
controller: function($scope) {
$scope.things = ["哔", "了","狗"];
}
});
});
</script>
</html>
tpl/state1.html + state2.html (新建一个目录，添加两个页面，内容大体如下、修改可以区分页面的内容就可以了)
<h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
tpl/list_1.html + list_2.html (在tpl，添加两个页面，内容大体如下、修改可以区分页面的内容就可以了)
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
练习3：（再进一步复杂的嵌套）
main.html
<!doctype html>
<html ng-app="routerApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body style="margin-top: 50px;">
<div ui-view></div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
<script type="text/javascript">
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.when("",'/index');
$stateProvider
.state('index', {
url: '/index',
views:
{
'': {
templateUrl: 'tpls3/index.html'
},
'topbar@index': {
templateUrl: 'tpls3/topbar.html'
},
'main@index': {
templateUrl: 'tpls3/home.html'
}
}
})
.state('index.usermng', {
url: '/usermng',
views: {
'main@index':
{
templateUrl: 'tpls3/usermng.html',
controller: function($scope, $state) {
$scope.addUserType = function() {
$state.go("index.usermng.addusertype");
}
}
}
}
})
.state('index.usermng.highendusers', {
url: '/highendusers',
templateUrl: 'tpls3/highendusers.html'
})
.state('index.usermng.normalusers', {
url: '/normalusers',
templateUrl: 'tpls3/normalusers.html'
})
.state('index.usermng.lowusers', {
url: '/lowusers',
templateUrl: 'tpls3/lowusers.html'
})
.state('index.usermng.addusertype', {
url: '/addusertype',
templateUrl: 'tpls3/addusertypeform.html',
controller: function($scope, $state) {
$scope.backToPrevious = function() {
window.history.back();
}
}
})
});
</script>
</body>
</html>
tpl3/index.html（核心页面）
<div class="container">
<div ui-view="topbar"></div>
<div ui-view="main"></div>
</div>
tpl3/home.html （默认主页）
<div class="jumbotron text-center">
<h2>首页</h2>
<p>
首页的形式一般比较<span class="text-danger">灵活</span>，而且可能随时发生变化。
</p>
</div>
tpl3/topbar.html (头部组件)
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">品牌LOGO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cy_tp_ul">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="cy_tp_ul">
<ul class="nav navbar-nav navbar-right" style="margin-top: 0px;">
<li><a ui-sref="index"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a ui-sref="index.usermng"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
</ul>
</div>
</div>
</nav>
<div style="margin:10px 0px 10px 0px;border:1px solid #e5e5e5;"></div>
tpl3/usermng.html （用户管理核心页面）
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="list-group">
<a ui-sref="#" class="list-group-item active">用户分类</a>
<a ui-sref="index.usermng.highendusers" class="list-group-item">高端用户</a>
<a ui-sref="index.usermng.normalusers" class="list-group-item">中端用户</a>
<a ui-sref="index.usermng.lowusers" class="list-group-item">低端用户</a>
<a ng-click="addUserType()" class="list-group-item">新增用户</a>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div ui-view></div>
</div>
</div>
tpl3/highendusers.html （高端用户页面）
<div class="row">
<div class="col-md-12">
<h3>高端用户列表</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>作品</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>大漠穷秋</td>
<td>29</td>
<td>《用AngularJS开发下一代WEB应用》</td>
</tr>
<tr>
<td>大漠穷秋</td>
<td>29</td>
<td>《用AngularJS开发下一代WEB应用》</td>
</tr>
<tr>
<td>2</td>
<td>大漠穷秋</td>
<td>29</td>
<td>《Ext江湖》</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">大漠穷秋</td>
<td>《ActionScript游戏设计基础（第二版）》</td>
</tr>
</tbody>
</table>
</div>
</div>
tpl3/normalusers.html （中端用户页面）
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong>This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
tpl3/lowusers.html （低端用户页面）
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>Star</button>
</div>
tpl3/addusertypeform.html （添加用户页面）
<h3>新增用户</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">
邮箱：
</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="推荐使用126邮箱">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="只能是数字、字母、下划线">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-primary" ng-click="backToPrevious()">返回</button>
</div>
</div>
</form>
Angularjs - 路由 angular-ui-router的更多相关文章
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- AngularJS学习之 ui router
1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- 转AngularJS路由插件
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angular当router使用userhash:false时路由404问题
angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...
随机推荐
- XP下使用IIS访问asp出现无权查看网页问题的解决办法
这是用户权限问题,因为你用的磁盘是NTFS格式. 解决方法: 一.添加用户(“Everyone”或者“IUSR_你的机器名”,如IUSR_HONG,即“Internet 来宾用户”) 二.修改用户权限 ...
- GLSL的qualifier
uniform:从应用程序到vertex shader 到fragment shader都能使用,但是值一直不变: varying:从vertex shader到fragment shader,在fr ...
- Balance（poj 1837）
题意:一个天平上有C个挂钩,第i个挂钩的位置为C[i],C[i] < 0表示该挂钩在原点的左边,C[i] > 0表示该挂钩在原点的右边:然后给出G个钩码的重量,问有多少种挂法使得天平保持平 ...
- makefile_2
我们的工程有 8 个 C 文件,和 3 个头文件,我们要写一个 Makefile 来告诉 make 命令如何编译和链接这几个文件.我们的规则是:1)如果这个工程没有编译过,那么我们的所有 C 文件都要 ...
- scp 指定端口
scp -P33033 zp.tar root@111.222.123.01:/da1/web/zhaopin.shouhuobao.com #sshd的端口指定的是33033
- .net自定义事件，经典简单实例代码
1,新建一个控制台应用程序TestDelegate,本项目主要实现:热水器加热,报警器监控,当热水温度达到80度的时候报警器报警这样一个简单的事件处理程序 2,定义委托处理程序 public dele ...
- ****CSS各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
- AndroidDev站点推荐-zz
Android-Dev-Bookmarks 项目目前可以生成书签文件导入到浏览器中了,ADB 站点上的内容也是一样的,方便在线浏览.现在内容更新开始按期发布同时也会有个简短的介绍,内容逐渐增多比较难直 ...
- css div 清理浮动的2种方法
使用float属性,导致div的内容发生浮动,浮动带来负影响: 1.背景不能显示 2.边框撑不开 3.div的padding和margin不能起作用: 处理float浮动的两种方式: 1.div的子类 ...
- poj 1113:Wall（计算几何，求凸包周长）
Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28462 Accepted: 9498 Description ...