[Angularjs]视图和路由(一)
写在前面
对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面。
将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一种更好的做法。
我们会将这些模版分解到视图中,并在布局模版中进行组装。Angularjs允许我们在$route服务的提供者$routeProvider中通过声明路由实现该功能呢。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
一个例子
在HTML中,需要引用AngularJS之后引用angular-route:
<script src="JS/angular.min.js"></script><script src="JS/angular-route.min.js"></script>
然后,要把ngRoute模块在应用中当作依赖加载进来:
<script>var app = angular.module('app',['ngRoute']);</script>
布局模板
创建一个布局模版,就是告诉angularjs把模板渲染到何处。通过将ng-view指令和路由组合到一起,我们可以精确的指定当前路由所对应的模板在dom中的渲染位置。
例如,有这样一段html
<body><header>这是header</header><div><div ng-view></div></div><footer>这是footer</footer> </body>
在这个例子中,将所有需要渲染的内容都放到了<div>中,而<header>和<footer>中的内容在路由改变时不会发生变化。
ng-view是由ngRoute模块提供的一个特殊指令,它的独特作用是在HTML中给$route对应的视图内容占位。ng-view是一个优先级为1000的终极指令。angularjs不会运行同一个元素上的低优先级指令(例如<div ng-view></div>元素上其他指令都是没有意义的)
ngView指令遵循以下规则
1、每次触发$routeChangeSuccess事件,视图都会更新。
2、如果某个模版同当前的路由相关联:
创建一个新的作用域。
移除上一个视图,同时上一个作用域也会被清楚。
将新的作用域同当前摹本关联在一起。
如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来。
触发$viewContentLoaded事件。
如果提供了onload属性,调用该属性所指定的函数。
路由
angularjs提供了when和otherwise两个方法来定义路由。用config函数在特定的模块或应用中定义路由。
现在,我们使用when方法添加一个特定的路由。
when方法:path,route
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head><title>路由</title><script src="JS/angular.min.js"></script><script src="JS/angular-route.min.js"></script><script>var app = angular.module('app', ['ngRoute']);app.config(['$routeProvider', function ($routeProvider) {//这里指定路由 $routeProvider.when('/', {templateUrl: './views/Login.html',controller: 'LoginController'}).when('/Login', {templateUrl: './views/Login.html',controller: 'LoginController'})}]);//控制器 app.controller('LoginController', function ($scope) {});</script><style>ul {list-style-type: none;}</style> </head> <body><header>这是header</header><div><div ng-view></div></div><footer>这是footer</footer> </body> </html>
Login视图Login.html
<div><ul><li>用户名:<input type="text" /></li><li>密 码:<input type="password" /></li><li><button>登录</button><button>取消</button></li></ul> </div>
在浏览器中查看
当然访问这样的路由:http://localhost:18174/1_4_route.html#/Login也是可以的。
第一个参数:是路由路径,这个路径会与$location.path进行匹配,$location.path也就是当前的URL的路径。如果路径后面还有其他内容,或使用了双斜线也可以正常匹配。我们也可以在url中存储参数,参数需要以冒号开头(例如:name),获取url参数可以使用$routeParams获取。
第二个参数是配置对象,决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包括controller、template、templateUrl、resolve、redirectTo和reloadOnSearch。
总结
这里介绍了路由与视图的简单知识点,也是由于在项目中用到的,也只能用到那儿,从哪儿学习,然后自己弄个demo学习了。这里举了一个简单的例子,先上手。当然,在实际的项目中,在项目中添加Controller,views等文件夹,使项目结构更清晰一些。
参考
angularjs权威教程
转载于:https://www.cnblogs.com/wolf-sun/p/4621854.html
[Angularjs]视图和路由(一)相关推荐
- [Angularjs]视图和路由(三)
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- [Angularjs]视图和路由(四)
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- flask框架视图和路由_角度视图,路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
- 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- 视图组件,路由组件,版本控制
1,视图组件 django中写CBV的时候继承View,rest_framework继承的是APIView,,其实APIView是继承View urlpattEerns = [# url(r'^boo ...
- drf4 视图与路由组件
APIView和View的区别 不管是View还是APIView最开始调用的都是as_view() APIView继承了View, 并且执行了View中的as_view()方法,最后把view返回了, ...
- django08: 视图与路由(旧笔记)
视图(Views) https://www.cnblogs.com/liwenzhou/articles/8305104.html 1.CBV和FBV 2.上传文件示例 路由 https:/ ...
- (转)Vue-初步了解vue-router的三要素:路由map 、路由视图、路由导航
安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...
最新文章
- 2021年春季学期-信号与系统-第二次作业参考答案-第九小题
- 那些年,我们一起做过的性能优化
- HDUOJ----4501小明系列故事——买年货(三维背包)
- c++ 遍历所有点且距离最短_编程小白暑期进阶笔记41-C语言数据结构与算法图遍历的应用...
- Java基础学习总结(87)——坚持写Java等技术类博客的好处
- 【python笔记】异常
- 摄像头实时帧率_能够侦测的摄像头,怎么选?
- 大数据在电力行业的应用前景有哪些?
- 《转》阿里负责人揭秘面试潜规则
- 基于MATLAB的混沌密码与数字图像加密应用、信息隐藏
- Deqin- 升级版测手速游戏
- 2021年全球与中国农用拖拉机变速器行业市场规模及发展前景分析
- 引擎入门 | Unity UI简介–第1部分(1)
- VS2003 安装错误
- vba打开html文件,vba打开网页的四种方法
- 【第57题】输入、输出系列5-文件锁定功能
- 平台 恒鑫 机器人_电机转子组装机器人系统-恒鑫智能
- Linux基础命令二
- Typora 基本使用操作
- JPEG解码_C语言实现
热门文章
- 弧形面如何逆时针排序_环形导轨如何实现拐弯?
- ffmpeg视频播放流程
- java socket 消息中转,Java中Socket实现消息传输(传输原型)
- shell脚本发邮件内容html,Shell发送邮件以HTML展示
- 服务器上使用mysql_在服务器上安装、使用MySQL的注意事项
- TensorFlow 图片预处理
- 4.5 为什么使用深层表示
- 华为谷歌安装器 Android6.0,GO谷歌安装器华为
- java yyyy-mm-dd 日期格式_Java中的日历日期为yyyy-MM-dd格式
- 华为调研了82位离职博士,任正非发电邮深讨人才流失根源