目前没写javascript的吐槽,以后会写。
- angular自动启动过程
-
jqLite(document).ready(function() { angularInit(document, bootstrap); });
上面代码在 angular.js文件最后几行,当所有的angular代码执行完毕,就执行启动。 - 看下说明angular如何自动化加载的。
-
function angularInit(element, bootstrap) { var elements = [element],//扫描到的节点,document为默认。 appElement,//第一个确认的节点,初始化只会寻找一个节点 module,//节点对应的 module名 names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],//扫描的属性名 NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/; //添加节点,看下面的forEach function append(element) { element && elements.push(element); } //寻找 names 中在dom中的节点 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); } }); //寻找到第一个有效节点,查询出模块名 forEach(elements, function(element) { if (!appElement) { var className = ' ' + element.className + ' '; // 正则出 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; } }); } } }); if (appElement) { bootstrap(appElement, module ? [module] : []);//得到启动节点,与模块名。就调用bootstrap方法 } }
- bootstrap方法分两部分说明。
- 第一个 doBootstrap 方法
-
var doBootstrap = function() { //获得节点 element = jqLite(element); //看这个节点是否已经被使用了 if (element.injector()) { var tag = (element[0] === document) ? 'document' : startingTag(element); //Encode angle brackets to prevent input from being sanitized to empty string #8683 throw ngMinErr( 'btstrpd', "App Already Bootstrapped with this Element '{0}'", tag.replace(/</, '<').replace(/>/, '>')); } //给模块绑定基础数据 modules = modules | []; modules.unshift(['$provide', function($provide) { $provide.value('$rootElement', element); }]); modules.unshift('ng'); //初始化 注入器 var injector = createInjector(modules); //执行compile injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate', function(scope, element, compile, injector, animate) { scope.$apply(function() { element.data('$injector', injector); compile(element)(scope); }); } ]); //返回注入器 return injector; };
- 启动识别,分立即启动与手动启动
-
//注意这个属性,识别windows的这个属性,如果不存在就立即加载, var NG_DEFER_BOOTSTRAP = /^NG_DEFER_BOOTSTRAP!/; if (window && !NG_DEFER_BOOTSTRAP.test(window.name)) { return doBootstrap(); } window.name = window.name.replace(NG_DEFER_BOOTSTRAP, ''); //在这里请注意 modules.push(module) 这里 angular.resumeBootstrap = function(extraModules) { forEach(extraModules, function(module) { modules.push(module); }); doBootstrap(); };
相关推荐
generator-fountain-angular2, 使用 Angular 2启动 web webapp的文书'fountain'生成器 喷泉 Angular 2发电机 Fountain Angular 2生成器允许你使用最佳开发人员体验启动Angular2网络应用程序 !无论你想使用什么框架...
Angular-spring-boot-angular2.zip,Spring Boot后端,Angular2前端,带有Webpack、Typescript、SASS、Bootstrap4、Karma、JasmineSpring-Boot-Angular2启动套件,Angularjs于2016年发布,是Angularjs的重写版。...
angular2工程搭建 一、编译和运行环境搭建 1、node.js和npm安装 a、下载地址:https://nodejs.org/en/download/ b、通过node -v 和 npm -v检查是否正确安装 c、下载工程: 略 d、进入工程目录 cd ...
module-zero-core-template, ASP.NET 核心 mvc/Angular 启动项目 ASP.NET 样板文件 简介这是为 ASP.NET 样板文件创建 ASP.NET 核心 mvc/Angular 启动项目的模板。 它有 2个不同版本:ASP.NET 核心 MVC & jQuery ( ...
Angular-angular-seed-express.zip,[已弃用,请使用https://github.com/vyakymenko/angular-express]可扩展、可靠和模块化的angular 7启动程序项目,带有静态类型的构建aot编译、express服务器和pm2守护程序。...
angular的http模块应用 参考教材以及代码 实现的youtube搜索框 启动: npm install, npm start
这是最新版 SmartAdmin 的 Angular 版,提供给需要的朋友
Angular-starter-kit.zip,用于企业级项目的Angular 8 启动套件GX启动套件,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的...
Laravel开发-laravel-angular Laravel角料启动器
angular2-multiselect-dropdown, Angular 2下拉菜单多选 Angular2多选下拉菜单 Angular 2用于网络应用程序的多功能下拉菜单。 易于集成和使用。 文档| 演示/示例。 table-内容 1开始启动 。 安装 3使用 。 模板 5...
angular-camera, Angular 指令,便于网络摄像头捕获 Angular 相机指令一个 Angular 指令,可以轻松地从网络摄像机中... 正在启动使用 bower install angular-camera 通过 Bower 安装在你的应用程序中加载 omr.direct
Angular-aws-cognito-angular-quickstart.zip,一个基于Angular(V5)的快速启动单页应用程序,利用了Amazon Cognoto、S3和Dynamodb(无服务器架构)Cognoto快速启动,Angularjs于2016年发布,是Angularjs的重写版。...
Angular多重子级路由,范本文件;下载后,npm install安装modules来启动该文件
angular新建组件及组件复用,模板语法,ng g c helloworld! 双向数据绑定,angular注解,使用terminal命令启动项目
1. 基于Angular cli 1.6.5 最新稳定版 2. 项目代码可见附件 3. 解压后运行cmd 命令 npm install 下载依赖包 4. 下载完成后 npm start 启动项目 5. 打开浏览器 输入localhost:4200 即可
我的个人 Angular 项目启动。 特征 模块化方法 用于开发、暂存和生产的配置 Livereload(开发) Javascript 连接/缩小 CSS 串联/缩小 资产修改 html5mode路由 默认情况下还包括: (兼容) 要求 (和 Node.js)...
为了学习Angular 2(Release Candidate 4),本文的示例Web应用程序将包含以下功能和目标: ...允许用户创建,更新和浏览客户数据库 使用Angular 2前端和Microsoft .NET后端创建...使用Microsoft ASP.NET启动Web应用程序
本篇文章主要介绍了深入理解angular2启动步骤 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
app.js - 应用启动文件 controller.js - 控制器文件 filer.js - 过滤器文件 partials文件夹 - 显示模板文件夹 services.js - 后台API访问层文件 单文件应用,没有划分模块,不适合大型Angular应用开发。 需要大型...
angular-rpg, 用 app,Angular,ngrx/RxJS和构建的RPG游戏 Angular RPG 快速启动确定你拥有 node 版本> = 5.0和 NPM> = 3克隆/下载 repo,然后在 /src/app/app.component.ts 编辑 app.component.ts