angularJS -- 手动初始化

最新推荐文章于 2020-05-06 12:32:26 发布
最新推荐文章于 2020-05-06 12:32:26 发布
阅读量390 收藏
点赞数
分类专栏： angular学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mosherr_thorki/article/details/97260488
版权

初始化分为两种：自动初始化和手动初始化

angularJS在两种情况下使用自动初始化，通过ng-app指令配置：

  • 在 DOMContentLoaded 事件触发时
  • 在 angular.js 脚本被执行 && document.readyState 被置为 'complete'
<!DOCTYPE html>
<html>
<head>
	<title>auto-init</title>
	<script type="js/angular.min.js"></script>
</head>
<body ng-app="myApp">

</body>
<script type="text/javascript">
	angular.module('myApp', [])...;
</script>
</html>

自动初始化会把js代码入侵到html文件中，所以又提供了手动初始化，通过angular.bootstrap配置

angular.module('appName',[]);//必须要有
angular.bootstrap(element, [appName], [config]);
参数参数描述
element要绑定的DOM元素
appNamemodule名称
config详细配置
<!DOCTYPE html>
<html xmlns:ng="http://angular.js.org">
<head>
	<title>初始化</title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
	Hello World!
</body>
<script type="text/javascript">
	angular.element(document).ready(function () {
		// body...
		angular.module('myApp', []);
		angular.bootstrap(document, ['myApp']);
	});
</script>
</html>

以下是 Angular 代码运行时遵循的顺序：

  • 在HTML页面以及所有代码加载完毕后，Angular 会去找到应用的根元素（通常是文档的根节点）
  • 调用 api/angular.bootstrap 去 编译 各元素成为一个可执行的且双向绑定的应用

angular.bootstrap只会绑定第一次加载的对象，后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示

 延迟启动

这个特色可以让像 Batarang 一样的测试工具横插一杠进入 Angular 的引导进程，并且溜进模块中的DI注册机制中，这样就可以替换或者增强DI提供的服务。

当 api/angular.bootstrap 被调用时，如果 window.name 包含 NG_DEFER_BOOTSTRAP! 前缀，引导进程会被暂停直到 angular.resumeBootstrap() 被调用。

angular.resumeBootstrap() 以一个可选的数组作为参数。这个数组是包含了应用启动时需要被注入的模块。

↑ 这部分不懂，抄教程的，后面若是有研究再补充 ?

熬不动夜的老陈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 安装及初始化
jeason_chan_zju的博客
08-23 557
文章目录1 安装2 初始化/新建项目 1 安装 前提是已经安装了nodejs和npm然后无其他要求。 为什么要安装nodejs和npm?理由如下： angular本身时利用js或者ts实现框架，想在本地运行需要js的解释器，nodojs即为脱离了浏览器的js解释器 angular本质上就是js的第三方包，因此，还是可以 通过npm进行安装、管理的 angular本身就是前后端分离的实现，node...
AngularJS 初始化
文燚的博客
09-02 2034
自动初始化 Angular 在以下两种情况下自动初始化： 1. 在 DOMContentLoaded 事件触发时 2. 在 angular.js 脚本被执行的同时如果 document.readyState 被置为 ‘complete’ （兼容老版本 IE，DOMContentLoaded 事件在 IE9 才开始被支持） 初始化时，Angular 会去找 ng-app 这个指明应用开始所在...
angularjs 手动初始化
weixin_30764883的博客
12-08 75
相信大家首次初始化angular都这样搞: <html ng-app="appName"> 这样做的话通常是没有问题的，但在ie下就悲剧了，要在html下加id： <html ng-app id="ng-app"> this works～ 当然我们还可以选择手动初始化angular app： angular.element(docume...
angularjs
chezi3964的博客
04-22 177
一、AngularJS 初始化加载流程 1、浏览器载入HTML，然后把它解析成DOM。2、浏览器载入angular.js脚本。3、AngularJS等到DOMContentLoaded事件触发。4、AngularJS寻找ng-app指令，这个指令指示了应用的边界。5、使用ng-app中...
AngularJS-下一个大框架
01-27
控制器负责初始化 $scope 并处理业务逻辑，而模型则包含应用程序的数据和状态。 依赖注入（Dependency Injection，DI）是 AngularJS 提升可测试性和可维护性的重要工具。通过 DI，AngularJS 能够自动管理对象之间的...
angularjs-socket-node-chat
06-21
2. **app.js**：NodeJS服务器端代码，用于初始化Express和Socket.IO。 3. **client.js**：AngularJS客户端代码，用于处理用户界面和Socket.IO通信。 4. **stylesheets**：CSS样式文件，定义聊天应用的视觉样式。 5. ...
Angularjs-first-app:第一个 Angular js 应用
06-25
2. **创建 HTML 结构**：在 HTML 文件中引入 AngularJS 库，设置`ng-app`指令初始化应用，并使用`ng-controller`定义控制器。 ```html <html ng-app="myApp"> <body ng-controller="MyCtrl"> {{ message }} ...
angularjs-keeptrack:另一个带有 angular js 的 Keep Track Web 应用程序
06-28
该项目的核心概念是利用 AngularJS 的模块化、指令和服务来创建一个交互式的用户界面。在 "angularjs-keeptrack-master" 压缩包中，我们可以预期找到以下关键组成部分： 1. **模块（Module）**: 在 AngularJS 中，...
SPA-AngularJS-Project:带有 AngularJS 考试项目的 SPA
07-02
6. `index.html`: 应用的入口文件，通常包含应用的初始化代码和AngularJS的引用。 7. `scripts`: 可能包含第三方库和其他JavaScript文件。 8. `styles`: CSS样式表，用于定义应用的外观和布局。 9. `.gitignore`: ...
AngularJS初始化普通数组和对象数组
weixin_30338497的博客
01-04 458
1 普通数组： 2 ng-init="persons=['john','jack']" 3 对象数组： 4 ng-init="persons=[{name:'john',age:20},{name:'jack',age:40}]" 转载于:https://www.cnblogs.com/cag2050/p/5100427.html...
angularJS 初始化两个方法处理办法。
weixin_41574976的博客
05-06 701
在被初始化方法中调用另一方法，下展示此处理办法
AngularJS(七)AngularJS对象的初始化时机
暖阳阳
05-20 1834
１、angularJS对象何时需要进行初始化？ 在angularJS中所有变量，对象，方法都绑定在scope域中。scope域中。scope域中。 scope域 |–1、变量——-&amp;gt;不需要初始化，一般已经有值 |–2、对象——-&amp;gt;|-对象没有值： 　　　　　　 　 |-调用对象的方法， 　　　　　　 　 |-或者调用对象的属性 　　　　　　　 　 此时必须对对象进行...
angularjs初始化时，同一方法调用了2次
alex的博客
09-26 4859
先补充一个概念：脏检查。 首先纠正误区，Angular并不是周期性触发脏检查。 只有当UI事件，ajax请求或者 timeout 延迟事件，才会触发脏检查。 为什么叫脏检查? 对脏数据的检查就是脏检查，比较UI和后台的数据是否一致!对于我遇到的问题，是这样的： 首先在全局js文件中，绑定了controller与view的关系：state('orderMang', {
angularJS 初始化
djp0910的博客
09-02 296
AngularJS 启动有两种方式 1、绑定初始化，自动加载 通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。 <body ng-app="myApp"&...
angular.js初始化命令 ng-init，ng-bind
12-21 7895
在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=
spring手动初始化bean
大道至简 分而治之
08-21 2654
ApplicationContext ctx= new ClassPathXmlApplicationContext(new String[]{“beans.xml”,”application.xml”});   BeanFactory  factory =ctx;
Angular - 如何在页面加载后马上做初始化
weixin_30415113的博客
10-19 887
Bootstrap -- How tomanually initialize Angular How to run function in angular controller on document ready? Angular.js - how to execute function on page load? Call angular function...
AngularJS数组操作
热门推荐
紫天专栏
06-22 3万+
1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码“：true|false”,使用逗号隔开，可以控制包括样式，显示与隐藏等功能，} 1、数组的创建 var arrayObj = new Array();//创建一个数组 var arrayObj = new Array
dynamic-datasource-spring-boot-starter 怎么手动初始化数据源
最新发布
06-10
dynamic-datasource-spring-boot-starter 提供了两种手动初始化数据源的方式： 1. 使用 DataSourceBuilder 类手动创建数据源 你可以使用 DataSourceBuilder 类手动创建数据源，然后将它添加到动态数据源中。具体代码如下： ```java @Configuration public class DataSourceConfig { @Bean @ConfigurationProperties(prefix = "spring.datasource.master") public DataSource masterDataSource() { return DataSourceBuilder.create().build(); } @Bean @ConfigurationProperties(prefix = "spring.datasource.slave1") public DataSource slave1DataSource() { return DataSourceBuilder.create().build(); } @Bean @ConfigurationProperties(prefix = "spring.datasource.slave2") public DataSource slave2DataSource() { return DataSourceBuilder.create().build(); } @Bean public DataSource dynamicDataSource(@Qualifier("masterDataSource") DataSource masterDataSource, @Qualifier("slave1DataSource") DataSource slave1DataSource, @Qualifier("slave2DataSource") DataSource slave2DataSource) { DynamicRoutingDataSource dynamicRoutingDataSource = new DynamicRoutingDataSource(); Map<Object, Object> dataSourceMap = new HashMap<>(3); dataSourceMap.put(DataSourceKey.MASTER.name(), masterDataSource); dataSourceMap.put(DataSourceKey.SLAVE1.name(), slave1DataSource); dataSourceMap.put(DataSourceKey.SLAVE2.name(), slave2DataSource); // Set master datasource as default dynamicRoutingDataSource.setDefaultTargetDataSource(masterDataSource); // Set slave datasource as target datasource dynamicRoutingDataSource.setTargetDataSources(dataSourceMap); // To put datasource keys into DataSourceContextHolder to judge if the datasource is exist DynamicDataSourceContextHolder.dataSourceKeys.addAll(dataSourceMap.keySet()); return dynamicRoutingDataSource; } } ``` 2. 手动添加数据源到动态数据源中 你也可以手动将已经创建好的数据源添加到动态数据源中。具体代码如下： ```java @Autowired private DynamicRoutingDataSource dynamicRoutingDataSource; @Bean public void addDataSource() { DataSource dataSource = createDataSource(); dynamicRoutingDataSource.addDataSource("key", dataSource); } ``` 以上两种方式都是可以手动初始化数据源的，只需要根据具体的场景选择合适的方式即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值