45.angular路由设置
转自:https://www.cnblogs.com/best/tag/Angular/
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明:
template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
.when('/computers',{template:'这是电脑分类页面'})
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
controllerAs:
string类型,为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。
实例
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script> </head> <body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script> <script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script> <div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div> <div ng-view="">
</div>
</div>
</body>
</html>
45.angular路由设置的更多相关文章
- angular路由详解:
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- angular路由配置用法
在如今,很多事用于HTML5嵌套在webview,成为(伪)app,用a链接来跳转,简单页面来说的话,速度还是可以的,但是应用越来越多,是用不流畅,当然原生的app像安卓以及IOS来说的话,跳转是 ...
- angular路由参数说明
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- ICBC中的路由设置
才去的中国工商银行,用身份证叫了A0076的号,前边还有26个人,闲来无聊果断拿出手机收取wifi.有两个ssid为ICBC的路由,信道分别是1号和6号,还好不需要密码,不过一会就连接上了. 那我先上 ...
- Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致
Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致,如果参数不一致,传过去为null
随机推荐
- HTML5与后台服务器的数据流动问题
编辑中,尚未完稿...2017.7.14 1345 很多前端开发出来的HTML5可能对于后台开发者来说,并不是很清楚,也许像我一样一知半解.而且真的让人很糊涂的地方就是前端的JS如何与后端的数据库进行 ...
- [using_microsoft_infopath_2010]Chapter6 发布提交表单数据
本章概要: 1.使用正确的方法发布表单 2.发布表单画库到SharePoint 3.在发布和保存表单之间做出选择 4.理解不同发布表单方式之间的区别
- POJ 1942
开始时竟然用了分情况讨论. 仔细思考一下,哈哈,发现不过是多重集合的组合数而已. #include <iostream> #include <cstdio> #include ...
- QQ在线人数统计图数据解析
转载请注明出处:http://blog.csdn.net/xiaoy_h/article/details/27980851 我相信非常多人一定去过这个地方: http://im.qq.com/onli ...
- oracle 10g/11g 命令对照,日志文件夹对照
oracle 10g/11g 命令对照,日志文件夹对照 oracle 11g 中不再建议使用的命令 Deprecated Command Replacement Commands crs_st ...
- node09---中间件
如果我的的get.post回调函数中,没有next参数,那么就匹配上第一个路由,就不会往下匹配了. 如果想往下匹配的话,那么需要写next() 1app.get("/",funct ...
- Django shortcut functions
django.shortcuts package提供提供帮助类和函数可以更便捷的操作MVC中的每一部分,包含: render(request, template_name,[dictionary],[ ...
- 新疆大学(新大)OJ xju 1010: 四个年级 C++ STL map 将4层循环优化成2层循环可解
1010: 四个年级 时间限制: 3 Sec 内存限制: 128 MB 题目描述 为了加强全体软件学院的同学的较量,学院想让ACM协会设计一次活动让所以软件学院的同学都加入,并且要实现高年级和低年级 ...
- HDU 2120 Ice_cream's world I【并查集】
解题思路:给出n对点的关系,求构成多少个环,如果对于点x和点y,它们本身就有一堵墙,即为它们本身就相连,如果find(x)=find(y),说明它们的根节点相同,它们之间肯定有直接或间接的相连,即形成 ...
- 前端学习之路——scss篇
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先 ...