Angular单页应用&AngularJS内部实现原理
回顾
- 自定义指令
- 登录后获取登录信息session
- 首先在登录验证的时候保存一个user
- 在学生管理页面中运用ajax调用获取到登录的用户信息
- 对注销按钮添加点击事件：调用ajax在表现层给user赋值为null
Angular实现单页应用
angular中实现单页应用是运用了UI-router插件
- 路由
- 后台中的路由是用来配置路径，分配请求的方法；
- angular中的路由也是同样的原理，通过导入ui-router插件，在main.js中配置不同的路由
- 实现方法
先导入ui-router文件
var mainApp = angular.module("mainApp",["ui-router","regApp","loginApp","studentApp"]);
mainApp.config(function($urlRouterProvider,$stateProvider){
$urlRouterProvider.when("","/reg");
$stateProvider.state("reg",{
url:"/reg", //路由匹配的路径
templateUrl:"modules/reg/reg.html", //文件模板路径
controller:"RegController"
}
} //在html中的代码
<body>
<div ui-view><div>
<body>
Angular内部实现原理
angular的实现原理主要是利用了三个对象：$watch,$digest,$apply;
$watch 监听（列表）对象（类数组）
所有页面上绑定的属性都会放在监听列表中，并不是所有$scope中的属性都会放在监听列表中，只有页面上绑定的才会放入监听列表。
监听列表的作用就是放置所有绑定在页面上的属性
$scope.$watch("name",function(a,b){
console.log("name is changed");
});
//里边两个参数，a是修改之后的值，b是修改之前的值
$digest 循环对象
- 循环监听列表中的数据是否发生变化，则把$watch中的所有数据拿来循环，一旦有监听对象发生变化就调用回调函数进行DOM操作。
- 直到没有数据变化为止。
- 为了防止无限循环，在设计angular的过程中设定了循环次数最多10次，如果超过10次则会报错。
- 这种机制就要求不要进行过多的数据联动。
- 这个机制有一个前提：循环列表中的对象在Angular的上下文环境中。
用$apply可以让代码回到Angular的上下文环境
setTimeout(function(){
$scope.$apply(function(){
$scope.name = "changed";
});
}, 1000);
Angular单页应用&AngularJS内部实现原理的更多相关文章
- AnjularJs的增删改查(单页网站)
2016.6.4 学习文献: 你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式:http:/ ...
- vue路由实现多视图的单页应用
多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...
- [Angularjs]单页应用之分页
写在前面 在项目中,用到单页应用的分页,当时想到使用滚动加载的方案,可是几次尝试都没配置成功,闲着无聊就弄了一个demo. 系列文章 [Angularjs]ng-select和ng-options [ ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用
写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
随机推荐
- Set,Map数据结构
/*Set : 多个value的集合, value不重复Map : 多个key-value对的集合, key不重复 1. Set容器 1). Set() 2). Set(array) 3). add( ...
- No suitable authentication method found to complete authentication (publickey,keyboard-interactive).
string command = Command.Text; StringBuilder result = new StringBuilder(); try { var connectionInfo ...
- xp sp3安装 iis5.1
1.依次打开左下角的 "开始" 菜单----控制面板----选择 "添加/删除程序", 点击窗体左侧 "添加/删除Windows组件"(A) ...
- [JavaScript] 判断键盘同时按某些键时执行操作。
前言:之前知乎上看到过一个介绍国外炫酷网站的,其中一个敏感网站用同时按住"q.a.p.l" 才能观看视频 放手则立即强制停止 (手动斜眼).这个功能的实际用处,我认为是可以在做一些 ...
- Linux 下安装python软件包
1.安装setuptools 下载地址:https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py 解压: tar zxvf set ...
- QML学习心得
Qt Quick之于QML,正如Qt 之于 C++,QML是Qt中开发的一个新的语言,而Qt Quick是这个语言的一个组件库,其中包含了很多用QML写的可以现成使用的组件. QML Hello Wo ...
- 如何在Ubuntu 14.04中使用Samba共享文件
Linux 下的文件共享利器 Samba 想必大家已经非常熟悉了,今天我们介绍下如何在Ubuntu 14.04中使用 Samba 共享网络文件.打印机和其它公共资源. 1.安装 Samba 和图形配置 ...
- 蚁群算法matlab实现
大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下用matlab实现蚁群算法: %蚂蚁算法test %用产生的一个圆上的十个点来检验蚂蚁 ...
- MySQL 学习笔记 (范式)
范式基本就是不要有重复的数据,表和表之间都是用主键和外键来联系 表的关系通常分3中 1 对 1 1 对 多 多 对 多 多 对 多 是用另一个表来实现的,这个表记入了a 表和 b表之间多对多的联系主键
- Cmake ,Out of Source Build
Out of Source build呢,就是让Cmake产生的临时垃圾文件,不关乎于项目实际本身的文件放到一个目录里,一般我们把这个目录放在项目根目录(也可以认为是根CmakeLists.txt)下 ...