angularJS基础篇之自动初始化

最新推荐文章于 2019-01-09 09:53:39 发布
原创 最新推荐文章于 2019-01-09 09:53:39 发布 · 262 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular #初始化 #基础篇

本文介绍 AngularJS 的自动初始化流程，包括 DOMContentLoaded 触发后如何寻找根作用域、加载相关模块、创建注入器及编译 DOM 等关键步骤。同时提供手动初始化示例。

 

 

    angularJS会在DOMContentLoaded触发后执行，通过ng-app指令寻找根作用域：

 

  • 载入和指令内容相关的模块
  • 创建一个应用的注入器
  • 已经拥有ng-app指令的标签为根节点来编译其中的DOM

 

    手动初始化：

 

angular.element(document).ready(function(){
     angular.bootstrap(document);
});

 

AngularJS学习第一篇 AngularJS基础知识
12-29
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序； <div ng-app=Demo></div> 2、 ng-init： 为 AngularJS 应用程序定义了 初始值； 通常情况下，我们使用一个控制器或模块来代替它； 我的名字是...
AngularJS基础 ng-cut 指令介绍及简单示例
10-21
通过ng-init指令初始化count变量为0。代码中的<!DOCTYPE html>、、、以及<script src="..."></script>标签是为了建立一个基本的HTML5文档结构以及引入AngularJS库。 实际代码如下： ```html <!DOCTYPE html> ...
AngularJS 初始化
文燚的博客
09-02 2171
自动初始化 Angular 在以下两种情况下自动初始化： 1. 在 DOMContentLoaded 事件触发时 2. 在 angular.js 脚本被执行的同时如果 document.readyState 被置为 ‘complete’ （兼容老版本 IE，DOMContentLoaded 事件在 IE9 才开始被支持） 初始化时，Angular 会去找 ng-app 这个指明应用开始所在...
angularjs设置focus
luanshaofeng的程序人生
08-30 5147
Usage focus-on="focusMe"/> app.controller('MyCtrl', function($scope, focus) { focus('focusMe'); }); Source app.directive('focusOn', function() { return function(scope, elem, attr) {
AngularJS开发指南02：引导程序
小猪猪and小马马的博客
02-18 567
概览 这一节解释了AngularJS初始化的过程，以及需要的时候你该如何修改AngularJS的初始化。 AngularJS的  标签 这个示例展示了我们推荐的整合AngularJS的方法，它被称之为“自动初始化”。 xmlns:ng="http://angularjs.org" ng-app> ... src="angular.js">
Angular6 中设置标签元素获得焦点
chanchaw的专栏
01-09 3682
打开某个页面就使指定的标签元素获取焦点，下面的贴图依次按照html模板、ts控制器的顺序制定 在线源码 https://stackblitz.com/edit/angular-srcat3?embed=1&amp;amp;file=src/app/app.component.html ...
AngularJS ng-init 应用初始化时定义变量
houyanhua1的专栏
04-28 5020
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&gt; &lt;script src="angular.min.js"&g
AngularJS学习笔记之基本指令(init、repeat)
10-24
本篇文章将深入探讨AngularJS中的基本指令，包括`ng-app`、`ng-init`、`ng-model`以及`ng-repeat`。 1. **ng-app** 指令： `ng-app`是启动AngularJS应用的标志性指令，它告诉AngularJS哪个HTML元素是应用的根元素...
利用VS Code开发你的第一个AngularJS 2应用程序
10-18
1. **初始化项目目录**：首先，创建一个名为`angular2-quickstart`的文件夹，然后在VS Code中打开这个文件夹。 2. **生成`package.json`**：在根目录下创建`package.json`文件，定义项目的依赖和脚本。这里包含了...
angularjs
chezi3964的博客
04-22 230
一、AngularJS 初始化加载流程 1、浏览器载入HTML，然后把它解析成DOM。2、浏览器载入angular.js脚本。3、AngularJS等到DOMContentLoaded事件触发。4、AngularJS寻找ng-app指令，这个指令指示了应用的边界。5、使用ng-app中...
angularjs初始化时，同一方法调用了2次
alex的博客
09-26 4979
先补充一个概念：脏检查。 首先纠正误区，Angular并不是周期性触发脏检查。 只有当UI事件，ajax请求或者 timeout 延迟事件，才会触发脏检查。 为什么叫脏检查? 对脏数据的检查就是脏检查，比较UI和后台的数据是否一致!对于我遇到的问题，是这样的： 首先在全局js文件中，绑定了controller与view的关系：state('orderMang', {
angularJS自执行函数的妙用
yclfdn2004的专栏
06-29 5558
自执行函数（IIFE），给每个文件提供一个独立的作用域  /* avoid */ // logger.js angular .module('app') .factory('logger', logger); // logger function会被当作一个全局变量 function logger() { } // storage.js angular .mo
AngularJs渲染完毕后执行指定操作
热门推荐
点火三周的专栏
07-27 2万+
最近用AngularJs做了一个Web的项目，AngularJs的设计真的很适合CRUD。真的建议很多内部的提高生产力的工具转而采用Web，以AngularJs为框架。 通常的Web程序，我们需要在页面加载完成的时候执行某些特定的操作，在没有AngularJs的时候一般采用的是监听onLoad event。但在使用AngularJs来渲染页面时，onLoad不能保证AngularJs已经完成了页面
angularjs2 组件的生命周期
何欣澄的博客
05-11 4620
组件的生命周期由angular内部管理，从组件的创建、渲染到数据变动，再到dom中移除。这期间每个环节都有angular提供的一系列钩子。通过钩子可以让开发者很方便的在这些事件触发的时候执行响应的回调函数。生命周期钩子 angular会顺序执行以下钩子方法 ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked
angular.element方法汇总(转)以及AngularJS 动态添加元素和删除元素
litao8976的博客
06-03 1万+
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
angular.js初始化命令 ng-init，ng-bind
12-21 7964
在angular.js可以通过ng-init来初始化所需要的数据。而不需要通过其他方式再去渲染一遍。 如下代码所示：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body ng-app ng-init="msg='hello'"> <div id=
AngularJS(七)AngularJS对象的初始化时机
暖阳阳
05-20 1924
１、angularJS对象何时需要进行初始化？ 在angularJS中所有变量，对象，方法都绑定在scope域中。scope域中。scope域中。 scope域 |–1、变量——-&amp;gt;不需要初始化，一般已经有值 |–2、对象——-&amp;gt;|-对象没有值： 　　　　　　 　 |-调用对象的方法， 　　　　　　 　 |-或者调用对象的属性 　　　　　　　 　 此时必须对对象进行...
angularJS 学习笔记2 初始化angularInit过程
huyangyamin的专栏
04-07 7137
整个DOMLoaded后，触发angularInit函数，执行各个模块的初始化过程。入口angularInit函数 （Angular.js L1278)function angularInit(element, bootstrap) { var appElement, module, config = {}; // The element `element` has
angularJS 初始化
djp0910的博客
09-02 359
AngularJS 启动有两种方式 1、绑定初始化，自动加载 通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。 <body ng-app="myApp"&...
AngularJs插件与组件全集
开发者可以使用ng-app指令来初始化一个AngularJS应用模块。 2. 控制器（Controllers） 控制器是管理AngularJS应用中的作用域（Scope）的JavaScript函数。作用域是一个对象，保存着视图（即用户界面）和控制器之间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值