AngularJs 加载后才能执行: ---- AngularJS...应用架构 以上实例是一个完整的 AngularJS 单页Web应用(single page web application,SPA)。... 元素包含了 AngularJS 应用 (ng-app=)。 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。 在一个应用可以有很多控制器。...ng-app 指令位于应用的根元素下。 对于单页Web应用(single page web application,SPA),应用的根通常为 元素。...AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令 , AngularJS 载入指令中的模块,并将 ng-app 作为应用的根进行编译。
ast.program 各个方法的返回: astCompiler.compile:返回一个function,供调用执行 ast.ast::返回一个语法解析树 lexer.lex: 返回一个词法分割数组 下面按主结构对源码进行分析...源码分析 1. lexer 词法分析 游标进行逐个字符扫描,遇到不一样的字符做不一样的处理,如遇到 ' 或 " 表示字符串即开始读取字符串,一直到对应的闭合符号 ' 或者 ",还有如遇到数字或者.
其实很容易想明白,injector做了两件事 缓存那些service,以后作为参数注入 分析参数列表,找到需要的参数注入 下面源码分析如何实现上面两件事情。...return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name); } } 源码分析...链接 angularjs源码笔记(1.1)--directive compile angularjs源码笔记(1.2)--directive template angularjs源码笔记(1.3)--directive...ctrl & attrs angularjs源码笔记(2)--loader modules angularjs源码笔记(3)--injector angularjs源码笔记(4)--scope angularjs...源码笔记(5.1)--$parse angularjs源码笔记(5.2)--$parse(未完成) angularjs源码笔记(6)--工具类 (未完成) angularjs源码笔记(7)--常用指令
1.2 源码分析 function(watchExp, listener, objectEquality) { var scope = this, // 将可能的字符串编译成fn...$digest 当 scope 的值发生改变后,scope是不会自己去执行每个watcher的listenerFn,必须要有个通知,而发送这个通知的就是 $digest 2.1 源码分析 整个 $digest...的源码差不多100行,主体逻辑集中在【脏值检查循环】(dirty check loop) 中, 循环后也有些次要的代码,如 postDigestQueue 的处理等就不作详细分析了。...$evalAsync 3.1 源码分析 $evalAsync用于延迟执行,源码如下: function(expr) { if (!$rootScope.$$phase && !...源码: function(isolate) { var ChildScope, child; if (isolate) { child = new Scope();
true // or 'element' } 当配置element时,被transclude的是整个元素 当配置true是,被transclude的只是该元素的子元素 4.2 transclude主要源码...parentBoundTranscludeFn; } nodeLinkFn(childLinkFn, childScope, node, $rootElement, childBoundTranscludeFn); 4.4 应用...链接 angularjs源码笔记(1.1)--directive compile angularjs源码笔记(1.2)--directive template angularjs源码笔记(2)--inject...angularjs源码笔记(3)--scope
templateUrl配置 { templateUrl: '/user.html', replace: true, //false link: function () { ... } } 入口方法源码如下...childBoundTranscludeFn); } // 将queue设置为null,表示该directive已经获取成功并且compile完成,可以直接调用 linkQueue = null; 链接 angularjs...源码笔记(1.1)--directive compile angularjs源码笔记(1.2)--directive template angularjs源码笔记(2)--inject angularjs...源码笔记(3)--scope
前言 AngularJS被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。...我们知道ng-view是通过$routeProvider来订制页面路由规则,这个路由规则在phonecat项目源码中是这样定义的: 151029319647655.png 为了让页面跳转之前执行一些事情...当DOM元素变化的时候,AngularJS会在元素上添加特定的class: · ng-enter,当元素被添加时会被应用; · ng-move,当元素被移动时会被应用; · ng-leave,当元素被删除时会被应用...我们可以对ng-view应用AngularJS动画,在phone-cat项目中,animation.css中的下列代码实现了切换页面的淡入淡出动画: .view-frame.ng-enter, .view-frame.ng-leave...本文提出了两点技巧让AngularJS应用在页面切换时更加自然平滑。。 完整demo下载地址:AngularJS应用页面切换优化方案
AngularJS 扩展了 HTML AngularJS 通过 ng-directives扩展了HTML ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。...AngularJS指令 通过 指令 来扩展HTML。通过内置的指令来为应用添加功能,可以自定义指令。 指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序 3.1....应用程序 通过一个值**(ng-app=“myCode”)**连接到代码模块 3.4. ng-init指令 为 AngularJS 应用程序定义了 初始值。...AngularJS 服务(service) 在 AngularJS 中,服务是一个函数或对象,可在 AngularJS 应用中使用。 7.1....AngularJS HTML DOM AngularJS 为 HTML DOM 元素的 属性 提供了绑定应用数据的指令。
使用全局变量的坏处自不必说,污染了全局的名字空间,而通过函参传递引用,也可以通过两种方法实现: 闭包传递 后台解析出依赖对象,并通过Function.prototype.call进行传参 而在AngularJS...注入器的创建 AngularJS的API也提供了$injector部分,通过$injector可以使用get,has,instantiate,invoke以及上节提到的annotate...等方法,通过源码可以更清晰的理解。...AngularJS提供了多种注册服务的API,但是我们着重关注的是provider方法,其他factory,service方法都是基于此进行构建的。 ...首先确定AngularJS上下文的范围,并且获取依赖模块(在此处为空); 继续注册服务(依赖),将serviceProvider缓存至providerCache中; 声明控制器; 在此获取$injector
在AngularJS应用中实现认证授权 在每一个严肃的应用中,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。...用户需要通过认证和授权来查看应用的某个特定部分,或者在应用中进行特定的行为。为了在应用中对用户进行识别,我们需要让用户进行登录。...在用户管理方面,传统的服务器端应用和单页应用的实现方式有所不同,单页应用能够和服务器通信的方式只有AJAX。对于登录和退出来说也是如此。 负责识别用户的服务器端需要暴露出一个认证断电。...单页应用将会把用户输入的信息发送到这个节点进行认证。在一个基于认证系统的典型token中,这 项服务用于在认证完毕之后获取一个token或者一个包含已登录用户的名字和角色信息的对象。...web应用的认证方式非常不同。
怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。...这次正好学习AngularJS,直接复习一下前端的知识。目前这里还是弱点,慢慢深入的学习。 AngularJS是Google的优秀的前端框架,目前已经应用于多个产品。 ...AngularJs相对于其他的框架来说,有一下的特性: 1 MVVM 2 模块化 3 自动化双向数据绑定 4 语义化标签 5 依赖注入 由于很多概念都不了解,这些特性也无法理解。...通过简单的学习,大致了解了AngularJS的语法以及使用,包括如下的内容: 1 表达式 支持普通的JS表达式,表达式通过{{}}使用。...的应用程序 ng-init 初始化应用程序变量 ng-model 获取程序变量 ng-bind 绑定数据变量 3 控制器 通过控制器,控制应用程序。
AngularJS 多视图应用中的登录认证 在 AngularJS 的多视图应用中, 一般都有实现登录认证的需求, 最简单的解决方法是结合服务端认证, 做一个单独的登录页面, 登录完成之后再跳转回来,...这种方法当然可取, 不过就破坏了单页面应用 (SPA) 的体验, 追求完美的开发者肯定不会采用这种方法。...在 AngularJS 应用中, 都有一个唯一的变量 rootScope 当切换视图时, rootScope 会广播事件 angular // 声明应用程序模块 .module('app', ['ngRoute...loginView.html', allowAnonymous: true }) .otherwise({ redirectTo: '/home' }); }) // 应用启动时运行...$on('$routeChangeStart', onRouteChangeStart); }); 这样, AngularJS 在开始切换视图时 ($routeChangeStart) 会调用 (onRouteChangeStart
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。 ... 7 应用程序 8 参考手册 首先看一下html的事件 关于html的事件,文中给出了三个例子,点击、隐藏、显示。...$scope.myVar; }; } 关于AngularJS的模块 模块定义了用户的应用,所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。 ...例如下面的代码,定义了一个应用程序的模块myApp,并定义了一个控制器myCtrl: {{ firstName... 创建AngularJS应用程序 我的笔记 <textarea ng-model
在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。这一机制对于所有标准的表单元素...
scope:单个controller的作用域。可以直接在某controller下的页面引用scope下的变量 rootScope:多个controller作...
模板通过指令指示AngularJS进行必要的操作。 比如:ng-app指令用来通知AngularJS自动引导应用;ez-clock 指令用来通知AngularJS生成指定的时钟组件。...当AngularJS启动应用时,它会通过一个编译器解析处理这个模板文件,生成的结果就是: 视图: ?...由于AngularJS更清晰地界定了一个WEB应用的组成部分,这样,在一个团队中,可以有人负责 实现指令,有人负责开发模板,各自干擅长的事情,效率更高,成本更低。...封装其他组件库 这不是AngularJS鼓励的方向,但是确实有强劲的需求。...起点:声明化 基于前面的示例,我们容易感受到使用AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手。 事实上,我猜测这也是Misko开发AngularJS最初的动机。
2、遵循MVC模式开发,鼓励视图、数据、逻辑组件间松耦合; 3、将测试与应用程序编写放在同等重要的位置,在编写模块的同时编写测试。...因为各组件的松耦合,使得这种测试得以实现; 4、 应用程序页面端与服务器端解耦。两方只需定义好通信API,即可并行开发。...$scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中,这时前台UI会自动响应更新。 四、指令 1、什么是指令? 指令是AngularJS用来扩展浏览器能力的技术之一。...五、模块和服务 在AngularJS中,模块负责组织、启动、实例化应用。 模块的两个部分,一个是配置块,另一个是运行块。 配置块:在实例工厂(provider)注册和配置阶段运行。...AngularJS应用中的服务是一些用依赖注入捆绑在一起的、可替换的对象。这些对象可以提供一些封装好的逻辑操作,以供调用。
模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。...现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。...---- 添加控制器 你可以使用 ng-controller 指令来添加应用的控制器: AngularJS 实例 ...此外,你可以使用模块来为你应用添加自己的指令: AngularJS 实例 var app =...}; }); 模块和控制器包含在 JS 文件中 通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
<script type="text/javascript" src="angular.min.js"></script>
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。...$http AngularJS $http 是一个用于读取web服务器上数据的服务。...通用方法实例 AngularJS1.5 以上版本 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl',...data/sites.php") .then(function (response) {$scope.names = response.data.sites;}); }); 应用解析...AngularJS 应用通过 ng-app 定义。应用在 中执行。 ng-controller 指令设置了 controller 对象 名。
领取专属 10元无门槛券
手把手带您无忧上云