基于项目实战解析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启动加载过程的更多相关文章

  1. Java进阶(三十九)Java集合类的排序,查找,替换操作

    Java进阶(三十九)Java集合类的排序,查找,替换操作 前言 在Java方向校招过程中,经常会遇到将输入转换为数组的情况,而我们通常使用ArrayList来表示动态数组.获取到ArrayList对 ...

  2. Tomcat源码分析三：Tomcat启动加载过程（一）的源码解析

    Tomcat启动加载过程(一)的源码解析 今天,我将分享用源码的方式讲解Tomcat启动的加载过程,关于Tomcat的架构请参阅<Tomcat源码分析二:先看看Tomcat的整体架构>一文 ...

  3. mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)

    Web绘图--mxGraph项目实战(精华篇) 声明     本文部分内容所属论文现已发表,请慎重对待. 需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式 ...

  4. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  5. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  6. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  7. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  8. AngularJS进阶(三十五)浏览器兼容性解决之道

    浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...

  9. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

随机推荐

  1. jquery easyui combox不能编辑只能选择

    $('#tts').combobox({ editable:false });

  2. idea热部署

    <!-- 热部署模块 --> <dependency> <groupId>org.springframework.boot</groupId> < ...

  3. angular学习笔记 父子组件传值

    一.如何将父组件的值传到子组件? 在子组件里面引入Input,然后用@Input 变量1 接收 接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中 ...

  4. 项目实战15.2—企业级堡垒机 jumpserver快速入门

    必备条件 硬件条件 ① 一台安装好 Jumpserver 系统的可用主机(堡垒机) ② 一台或多台可用的 Linux.Windows资产设备(被管理的资产) 服务条件 (1)coco服务 ① 鉴于心态 ...

  5. 多表insert操作详解

    --1.无条件的多表insert all ; ; ; --没有条件,向多个目标表全量插入,必须有all insert all --不指定emp_1后面的列,也不指定values,那么emp_1中的所有 ...

  6. 背包DP入门小笔记01背包

    FJUT OJ 2347 http://59.77.139.92/Problem.jsp?pid=2347 采药 TimeLimit:1000MS  MemoryLimit:128MB 64-bit ...

  7. Node.js C/C++ 插件

    插件 Addons 是动态链接的共享对象.他提供了 C/C++ 类库能力.这些API比较复杂,他包以下几个类库: V8 JavaScript, C++ 类库.用来和 JavaScript 交互,比如创 ...

  8. k8s Kubernetes v1.10

    #转移页面 http://www.cnblogs.com/elvi/p/8976305.html

  9. SQL Server 虚拟化（2）——理想的SQL Server虚拟机架构

    本文属于SQL Server虚拟化系列 搭建SQL Server虚拟机,在各个组织之间都有自己的标准和最佳实践.从第一眼看去,光物理配置就有过百种,所有的这些细微差别都有可能为后续日常管理过程中故障侦 ...

  10. STATE（状态）模式

    引子 场景 在我们软件开发的过程中,有许多对象是有状态的.而对象的行为会随着状态的改变而发生改变.例如开发一个电梯类,电梯有开门.关门.停止.运行等行为,同时电梯也会有开门状态.关门状态.停止状态.运 ...