基于项目实战解析ng启动加载过程
前言
在AngularJS项目开发过程中，自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。
下面以实际项目为例进行简要讲解。
1.载入ng库
2.等待，直到DOM树构造完毕。
3.发现ng-app，自动进入启动引导阶段。
4.根据ng-app名称找到相应的路由。
5.加载默认地址。
6.Js顺序执行，加载相应模版页
sys_tpls/home.html
7.在此，可以看到index路由中只是填充了ui-view为sys_login的div模块，填充页面内容为sys_tpls/sys_login.html。
sys_tpls/sys_login.html
至此，模型、控制器依次登场亮相。可见，此页面关联的控制器为LoginController。其中用户ID、密码均进行了ng-model的绑定。
至此angularJS项目的启动全过程大致讲解完毕。
注：AngularJS的三种启动方式
方式1: 自动启动
Angular会自动的找到ng-app，将它作为启动点，自动启动。
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>New Page</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../../vendor/bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="./02.boot1.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<span></span>
</div>
</body>
</html>
JS
var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
function($scope) {
$scope.Name = "Puppet";
}
]);
方式2: 手动启动
在没有ng-app的情况下，只需要在js中添加一段注册代码即可
<body>
<div ng-controller="MyCtrl">
<span></span>
</div>
</body>
JS
var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
function($scope) {
$scope.Name = "Puppet";
}
]);
/**
* 这里要用ready函数等待文档初始化完成
*/
angular.element(document).ready(function() {
angular.bootstrap(document, ['myModule']);
});
方式3:多个ng-app
ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)
<body>
<div id="app1" ng-app="myModule1">
<div ng-controller="MyCtrl">
<span></span>
</div>
</div>
<div id="app2" ng-app="myModule2">
<div ng-controller="MyCtrl">
<span></span>
</div>
</div>
</body>
JS
/**
* 第一个APP
* @type {[type]}
*/
var myModule1 = angular.module("myModule1", []);
myModule1.controller('MyCtrl', ['$scope',
function($scope) {
$scope.Name = "Puppet";
}
]);
// angular.element(document).ready(function() {
// angular.bootstrap(app1, ['MyModule1']);
// });
/**
* 第二个APP
* @type {[type]}
*/
var myModule2 = angular.module("myModule2", []);
myModule2.controller('MyCtrl', ['$scope',
function($scope) {
$scope.Name = "Vincent";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(app2, ['myModule2']);
});
美文美图
AngularJS进阶(三十九)基于项目实战解析ng启动加载过程的更多相关文章
-
Java进阶(三十九)Java集合类的排序,查找,替换操作
Java进阶(三十九)Java集合类的排序,查找,替换操作 前言 在Java方向校招过程中,经常会遇到将输入转换为数组的情况,而我们通常使用ArrayList来表示动态数组.获取到ArrayList对 ...
-
Tomcat源码分析三：Tomcat启动加载过程（一）的源码解析
Tomcat启动加载过程(一)的源码解析 今天,我将分享用源码的方式讲解Tomcat启动的加载过程,关于Tomcat的架构请参阅<Tomcat源码分析二:先看看Tomcat的整体架构>一文 ...
-
mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)
Web绘图--mxGraph项目实战(精华篇) 声明 本文部分内容所属论文现已发表,请慎重对待. 需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式 ...
-
AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&;Promise&;Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
-
AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
-
AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
-
AngularJS进阶(三十八)上拉加载问题解决方法
AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...
-
AngularJS进阶(三十五)浏览器兼容性解决之道
浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...
-
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...
随机推荐
-
判断浏览器类型用 document.documentMode方式，
if ( document.documentMode && document.documentMode < 9 ){ document.write( '<script sr ...
-
log4j向oracle中插入一条系统当前时间的sql语句
配置log4j,要向oracle插入一条系统当前时间的sql语句,按网上查找的总是出现各种各样的报错,最后总结出的写法是: ### shezhi### log4j.rootLogger = debug ...
-
浏览器-02 Chromium的多线程
Chromium 的多线程机制 概述 每个进程都有很多的线程; 多线程主要是为了保证UI线程(chrome 线程,主线程)不会被任何其它费时的操作阻碍而影响对用户的响应; 为了解决多线程通信和同步问题 ...
-
iOS开发多线程篇—创建线程
iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...
-
Java经典编程题50道之四十八
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. public ...
-
python 错误捕获机制分析
python语言是编程中使用率在Top 3之内的语言.python语言以灵活与简单著称,那么越是灵活的语言越需要判断出错的功力. 简单示例 以下是一个简单的错误程序,被除数不可为0,那么看看该代码的执 ...
-
HttpRunner Manager接口自动化测试平台实践（Windows）
1. 源码下载 github: https://github.com/HttpRunner/HttpRunnerManager 下载后放入项目目录,结构如下: 2.依赖环境 根据根目录require ...
-
MySQL crash-safe replication(1)
MySQL 5.6 对复制功能提供了新特性:slave 支持 crash-safe,可以解决之前版本中系统异常断电可能导致的 SQL thread 信息不准确的问题. 原文:Enabling cras ...
-
CentOS下使用crontab+mysqldump实现定时自动备份数据库
一 : 为什么要进行数据库的备份? 最主要的原因:尽可能地减少损失,包括时间上.精神上和金钱上的损失.很多人都不注意备份数据,以致在发生问题后丢失大量的重要数据.要知道,在地球上网是很危险的,即使做好 ...
-
spring cloud 消费者
本消费者 加了 Hystrix, 为了后续监控用. 1. 依赖: <parent> <groupId>org.springframework.boot</groupId ...