angular资源:
angular文档:http://docs.angularjs.org/api
angular官网:http://angularjs.org/
angular源码:https://github.com/angular/angular.js
angular下载:http://code.angularjs.org/
学习版本:
1.2.0-rc.2
流程简述:
angular初始化大致上有2部分:
1.初始化angular框架,模块等
2.解析document
1.读取angular.js脚本,执行angular框架上下文脚本
2.初始化angular框架,配置模块,挂载angular对象
3.使用angular框架,初始化(扫描)document中,相应的节点
angular源码,加载启动部分:
angular源码,初始化angular框架部分
angular源码,装载angular及module部分
angular源码,入口(angularInit)部分:
学习膜拜:
1.把javascript写出了oop的范,设计模式,设计原则很好的体现了出来。
2.angular的结构,已经不是为了实现的页面功能,而是成为了一个应用框架。
学习吐槽:
setupModuleLoader的时候,死绑定的属性为'angular',我要copy装b改名字,让我咋弄?
angularInit的时候,为毛最初是elements,最后却用一个element去引导,module也只能是最后一个element上的,并且module只能为单模块名。
angular文档:http://docs.angularjs.org/api
angular官网:http://angularjs.org/
angular源码:https://github.com/angular/angular.js
angular下载:http://code.angularjs.org/
学习版本:
1.2.0-rc.2
流程简述:
angular初始化大致上有2部分:
1.初始化angular框架,模块等
2.解析document
1.读取angular.js脚本,执行angular框架上下文脚本
(function(window, document, undefined) { ... })(window, document);
2.初始化angular框架,配置模块,挂载angular对象
publishExternalAPI(angular);
3.使用angular框架,初始化(扫描)document中,相应的节点
angularInit(document, bootstrap);
angular源码,加载启动部分:
(function(window, document, undefined) { //设置严格模式 'use strict'; /********* 省略代码 *********/ //尝试绑定使用jquery对象 bindJQuery(); //公布angular扩展api函数(初始化angular环境) publishExternalAPI(angular); //document加载完成后,加载angular jqLite(document).ready(function() { //加载angular入口 angularInit(document, bootstrap); }); })(window, document);
angular源码,初始化angular框架部分
function publishExternalAPI(angular){ /******************************** 设置angular公共属性,成员 ********************************/ extend(angular, { 'bootstrap': bootstrap, 'copy': copy, 'extend': extend, 'equals': equals, 'element': jqLite, 'forEach': forEach, 'injector': createInjector, 'noop':noop, 'bind':bind, 'toJson': toJson, 'fromJson': fromJson, 'identity':identity, 'isUndefined': isUndefined, 'isDefined': isDefined, 'isString': isString, 'isFunction': isFunction, 'isObject': isObject, 'isNumber': isNumber, 'isElement': isElement, 'isArray': isArray, '$$minErr': minErr, 'version': version, 'isDate': isDate, 'lowercase': lowercase, 'uppercase': uppercase, 'callbacks': {counter: 0} }); /******************************** 创建angular默认模块 ********************************/ angularModule = setupModuleLoader(window); /******************************** 尝试挂载ngLocale模块 ********************************/ try { angularModule('ngLocale'); } catch (e) { angularModule('ngLocale', []).provider('$locale', $LocaleProvider); } /******************************** 配置ng模块 ********************************/ angularModule('ng', ['ngLocale'], ['$provide', function ngModule($provide) { $provide.provider('$compile', $CompileProvider). directive({ a: htmlAnchorDirective, input: inputDirective, textarea: inputDirective, form: formDirective, script: scriptDirective, select: selectDirective, style: styleDirective, option: optionDirective, ngBind: ngBindDirective, ngBindHtml: ngBindHtmlDirective, ngBindTemplate: ngBindTemplateDirective, ngClass: ngClassDirective, ngClassEven: ngClassEvenDirective, ngClassOdd: ngClassOddDirective, ngCsp: ngCspDirective, ngCloak: ngCloakDirective, ngController: ngControllerDirective, ngForm: ngFormDirective, ngHide: ngHideDirective, ngIf: ngIfDirective, ngInclude: ngIncludeDirective, ngInit: ngInitDirective, ngNonBindable: ngNonBindableDirective, ngPluralize: ngPluralizeDirective, ngRepeat: ngRepeatDirective, ngShow: ngShowDirective, ngStyle: ngStyleDirective, ngSwitch: ngSwitchDirective, ngSwitchWhen: ngSwitchWhenDirective, ngSwitchDefault: ngSwitchDefaultDirective, ngOptions: ngOptionsDirective, ngTransclude: ngTranscludeDirective, ngModel: ngModelDirective, ngList: ngListDirective, ngChange: ngChangeDirective, required: requiredDirective, ngRequired: requiredDirective, ngValue: ngValueDirective }). directive(ngAttributeAliasDirectives). directive(ngEventDirectives); $provide.provider({ $anchorScroll: $AnchorScrollProvider, $animate: $AnimateProvider, $browser: $BrowserProvider, $cacheFactory: $CacheFactoryProvider, $controller: $ControllerProvider, $document: $DocumentProvider, $exceptionHandler: $ExceptionHandlerProvider, $filter: $FilterProvider, $interpolate: $InterpolateProvider, $http: $HttpProvider, $httpBackend: $HttpBackendProvider, $location: $LocationProvider, $log: $LogProvider, $parse: $ParseProvider, $rootScope: $RootScopeProvider, $q: $QProvider, $sce: $SceProvider, $sceDelegate: $SceDelegateProvider, $sniffer: $SnifferProvider, $templateCache: $TemplateCacheProvider, $timeout: $TimeoutProvider, $window: $WindowProvider, $$urlUtils: $$UrlUtilsProvider }); } ]); }
angular源码,装载angular及module部分
function setupModuleLoader(window) { function ensure(obj, name, factory) { return obj[name] || (obj[name] = factory()); } /********************************** 声明window的angular属性 声明angular的module属性 注:angular.module设置为return的module函数 *********************************/ return ensure(ensure(window, 'angular', Object), 'module', function() { var modules = {}; /********************************** module函数 *********************************/ return function module(name, requires, configFn) { /*******. 省略代码 *******/ }); }); }
angular源码,入口(angularInit)部分:
function angularInit(element, bootstrap) { //检索加载angular的dom元素列表 var elements = [element], //加载angular的dom元素 appElement, //加载的模块 module, //检索angular加载的关键字 names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'], //提取angular加载模块的正则表达式 NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/; //追加加载angular的dom元素 function append(element) { element && elements.push(element); } /********************************************************************** 遍历angular加载的关键字 检索分为两种方式: 1.使用document.getElementById,检索id中关键字 2.使用element.querySelectorAll,参考:http://www.w3.org/TR/selectors-api/] **********************************************************************/ forEach(names, function(name) { names[name] = true; append(document.getElementById(name)); name = name.replace(':', '\\:'); if (element.querySelectorAll) { forEach(element.querySelectorAll('.' + name), append); forEach(element.querySelectorAll('.' + name + '\\:'), append); forEach(element.querySelectorAll('[' + name + ']'), append); } }); /********************************************************************** 解析加载angular的dom元素及module 解析分为两种方式: 1.获取element.className,提取元素class属性内容,作为module名 2.获取names中存在于dom元素上的属性,提取属性内容,作为module **********************************************************************/ forEach(elements, function(element) { if (!appElement) { var className = ' ' + element.className + ' '; var match = NG_APP_CLASS_REGEXP.exec(className); if (match) { appElement = element; module = (match[2] || '').replace(/\s+/g, ','); } else { forEach(element.attributes, function(attr) { if (!appElement && names[attr.name]) { appElement = element; module = attr.value; } }); } } }); //如果存在需要加载angular的dom元素,调用bootstrap引导加载appElement,module if (appElement) { bootstrap(appElement, module ? [module] : []); } }
学习膜拜:
1.把javascript写出了oop的范,设计模式,设计原则很好的体现了出来。
2.angular的结构,已经不是为了实现的页面功能,而是成为了一个应用框架。
学习吐槽:
setupModuleLoader的时候,死绑定的属性为'angular',我要copy装b改名字,让我咋弄?
angularInit的时候,为毛最初是elements,最后却用一个element去引导,module也只能是最后一个element上的,并且module只能为单模块名。
相关推荐
《Angular全方位指南》是针对Angular框架的一...这个教程的压缩包"angular-the-complete-guide-master"很可能包含了源码、笔记、示例项目和其他辅助材料,帮助你在实践中巩固所学知识,进一步提升你的Angular开发技能。
【标题】"jx-ocr前端开发笔记"指的是一个关于jx_ocr项目的前端开发学习资料,这通常涉及到使用JavaScript、HTML、CSS等技术在Web环境中实现OCR(Optical Character Recognition,光学字符识别)功能。OCR是将图像中...
【标题】:“图书馆写笔记【商城带后台源码】.rar”揭示的是一款与图书管理相关的商城系统,其中包含了前端和后端的源代码。这个系统可能是为了帮助用户在线浏览、购买、管理图书,以及记录读书笔记而设计的。源码的...
Servlet容器如Tomcat、Jetty等负责加载和管理Servlet,处理客户端的请求并转发给相应的Servlet实例。 接下来,笔记会详细介绍JSP(JavaServer Pages),这是一种动态网页技术,允许开发者将HTML代码与Java代码混合...
本笔记将深入探讨AngularJS的核心概念和技术点,帮助读者理解并掌握这个框架。 一、AngularJS 概述 AngularJS 提供了双向数据绑定、依赖注入、指令系统等特性,使得开发人员可以更加专注于业务逻辑,而不用过于关注...
《构建个人笔记应用——以JavaScript为核心的技术解析》 在当今数字化时代,笔记应用已经成为我们...通过不断学习和实践,我们可以利用JavaScript的灵活性和强大功能,打造出功能丰富、用户体验优秀的个人笔记应用。
源码分析可以帮助我们学习到图形渲染性能优化的技巧,如懒加载、批量操作等。 8. **国际化与本地化**:对于一个全球化的应用,源码中可能包含多语言支持的实现,这对于需要进行本地化开发的开发者来说是一大参考。 ...
在学习前端开发的过程中,掌握各种技术是至关重要的。...在实践中不断探索和学习新的前端框架和技术,如React、Vue、Angular等,以及现代前端工作流,如Create React App或Vue CLI,能进一步提高开发效率。
- 轻主题通常指的是设计简洁、加载速度快、用户体验流畅的网站界面。这个社区可能采用扁平化设计,颜色搭配清新,字体易读,图标简洁,以提高用户的浏览体验。 8. **电脑+手机版**: - 这表明项目实现了跨平台...
从这个源码包,我们可以学习到以下知识点: 1. **网站架构**:源码将展示如何组织和构建一个大型企业级网站,包括目录结构和文件组织方式。 2. **前端技术**:通过HTML、CSS和JavaScript,了解网页布局、样式控制...
在IT行业中,Web开发是至关重要的一环,而“web笔记两连发”这一主题可能涵盖了两个方面的内容,即源码理解和工具使用的深入探讨。这里,我们主要关注的是压缩包内的文件"316_分页算法.pdf",这通常与Web开发中的...
【描述】"blog:我的网页笔记" 的描述简洁明了,进一步确认了这是一个关于博客内容的讨论,主要围绕作者在网页制作过程中的学习和体验。描述中没有提供具体的技术细节,但我们可以预期文章中会包含作者的实践总结、...
源码中会包含这些文件,展示如何布局页面、处理用户交互和动态加载数据。对于前端部分,理解路由管理、状态管理(如Redux或Vuex)以及组件化编程的概念也很重要。 此外,系统可能还涉及到权限管理、错误处理、日志...
【笔记前端】是一个基于JavaScript技术构建的Web应用,目前已被成功部署到Heroku云平台,为用户提供服务。这个项目的核心是前端开发...对于想要深入学习前端开发的人来说,分析和研究这个项目将是一次宝贵的学习机会。
这篇笔记主要涵盖了前端开发的基础知识、框架学习以及遇到问题的解决经验,旨在帮助初学者系统地掌握前端技术栈。 首先,前端基础知识是所有前端开发者必备的技能。这包括HTML、CSS和JavaScript三大核心技术。HTML...
【web前端技术笔记】是关于Web开发领域前端技术的一份详细学习资料,主要涵盖了Web前端的基础到高级的各种知识点。这份笔记以"webProject-master"作为压缩包文件名,表明其可能是一个开源项目,允许用户查看、学习...
这个压缩包内的"前端资料"可能涵盖了上述部分或全部知识点,包括HTML和CSS的实例文件、JavaScript源码、项目结构、笔记文档等。通过这些资料,学习者可以深入学习前端开发,提高自己的实践能力。对于初学者来说,这...
"blog全在issues里"这一描述暗示了项目中的博客文章或者学习笔记可能存储在GitHub仓库的Issue模块中,这是一个常见的用于记录项目进展、讨论问题或分享知识的方式。下面我们将深入探讨前端开发的相关知识点,特别是...
"Post-it"是一个在线平台,其设计目标是提供一个简单易用的网站,让用户能够轻松地分享和发布各种内容。...开发者可以通过查看这些源码进一步了解"Post-it"网站的实现细节,学习如何利用JavaScript构建类似的应用。
学习者可以通过解压文件来获取课程的源码、笔记、练习项目等,以便于跟随课程进度进行实战练习,巩固所学知识。在学习过程中,配合阅读代码、运行示例、解决问题,将极大提升对JavaScript的理解和实际运用能力。