angular路由介绍
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。
从这个角度想想，要实现一个gmail的应用，真的就不难了。
2. 路由的代码实现
理论不多说了，直接上代码！！ 还是基于我们之前用yeoman构建的项目。
业务场景：论坛功能，帖子列表页(list.html) 和 帖子内容页(detail.html)。
代码文件：
- 1. 增加：app/demo-route.html
- 2. 增加：app/views/route/list.html
- 3. 增加：app/views/route/detail.html
- 4. 修改: app/scripts/app.js
- 5. 修改: app/scripts/controllers/main.js
1). 增加：app/demo-route.html
这个文件是主页面(ng-app)，包含视图(ng-view)
- <!DOCTYPE html>
- <html ng-app="routeApp">
- <head>
- <title>route</title>
- <script src="lib/angular/angular.min.js"></script>
- <!--需要额外引入angular-route.min.js-->
- <script src="lib/angular/angular-route.min.js"></script>
- <script src="scripts/app.js"></script>
- <script src="scripts/controllers/main.js"></script>
- </head>
- <body >
- <h1>Route Demo index</h1>
- <div ng-view></div>
- </body>
- </html>
2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。
- <hr/>
- <h3>Route : List.html</h3>
- <ul>
- <li ng-repeat="id in [1, 2, 3 ]">
- <a href="#/list/{{ id }}"> ID{{ id }}</a>
- </li>
- </ul>
3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)
- <hr/>
- <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。
- var routeApp = angular.module('routeApp',['ngRoute']);
- routeApp.config(['$routeProvider',function ($routeProvider) {
- $routeProvider
- .when('/list', {
- templateUrl: 'views/route/list.html',
- controller: 'RouteListCtl'
- })
- .when('/list/:id', {
- templateUrl: 'views/route/detail.html',
- controller: 'RouteDetailCtl'
- })
- .otherwise({
- redirectTo: '/list'
- });
- }]);
在routeApp模块中，我们定义了路由和布局模板。routeApp的默认URL是/list，即http://localhost:9000/demo-route.html#/list。 跳转详细页的路由是/list/:id，id为参数。
同时，/list的布局模板是views/route/list.html，属于RouteListCtl的控制器管理空间。
5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。
- routeApp.controller('RouteListCtl',function($scope) {
- });
- routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
- $scope.id = $routeParams.id;
- });
分别对应该路由中的两个控制器声明。
angular路由介绍的更多相关文章
- angular路由（自带路由篇）
一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- node之路由介绍
路由介绍 ----路由是指向客户端提供它所发出的请求内容的机制:----对基于 Web 的客户端 / 服务器端程序而言,客户端在 URL 中指明它想要的内容,具体来说就是路径和查询字符串 下面我看看一 ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
随机推荐
- Combogrid的onChange和onSelect
这里只作记录一下 在easyui开发过程中遇到下边两个事儿 combogrid/combotree做级联: $("#" + deptId).combotree( { url : u ...
- [Android Pro] Android应用性能测试之CPU和内存占用(转载)
首先稍做分析一下测试环境:我们知道CPU和内存占用是一个实时变化的状态,而市面上还没有具体的哪款android应用能做到实时监控CPU和内存占用并使用log日志保存.考虑到android的底层框架是基 ...
- sonar使用故障Unable to load component class org.sonar.scanner.report.ActiveRulesPublisher/Unable to load component interface org.sonar.api.batch.rule.ActiveRules: NullPointerException
nginx后两个sonar负载分担 解决办法 Credit to @teryk-sonarsource-team, just making it an answer: Delete the direc ...
- EF 不允许启动新事务，因为有其他线程正在该会话中运行。
引起原因:在查询中提交了更改.如在遍历的时候,调用了savechanges(): 解决:把savechange()提到循环外. IOrderedQueryable<TOH ...
- Nginx安装及配置文件解释
安装nginx,还是在mac上面用brew比较方便. 首先,brew install nginx,提示改权限 sudo chown -R $(whoami) /usr/local 然后brew ins ...
- dedecms织梦 v5.6 两处跨站漏洞
漏洞版本: dedecms织梦 v5.6 漏洞描述: DedeCMS内容管理系统软件采用XML名字空间风格核心模板:模板全部使用文件形式保存,对用户设计模板.网站升级转移均提供很大的便利,健壮的模板标 ...
- [C++基础]那些容易被混淆的概念：函数/数组指针-指针函数/数组，类/函数模板-模板类/函数
函数指针-指针函数 函数指针的重点是指针.表示的是一个指针,它指向的是一个函数.eg: int (*pf)(); 指针函数的重点是函数.表示的是一个函数,它的返回值是指针.eg: int* fun() ...
- EasyUI-EasyUI框架入门学习
前言 新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,需要我这菜鸟对EasyUI框架进行一些基础的 ...
- USD Series: Installation
Today I would like to talk is Unified Service Desktop. It was published in Dynamics CRM 2013 Spring ...
- GIS中要素的捕捉以及C++实现
这篇文章早在去年就写出来了,但是由于当时毕业论文有一段是直接引用了我的这篇文章,怕引起查重的麻烦就删掉了,在此,重新挂出来和大家一起分享. 要素的选择,也称为要素的捕捉,在CAD.计算机图形学和地理信 ...