基于项目实战解析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. MySQL中UTF8编码的数据在cmd下乱码

    MySQL中UTF8编码的数据在cmd下乱,在数据库ide中看到的却是中文. 其实,原因是cmd用gbk的格式来显示数据,那么我们只需要将utf-8存储的数据用gbk的格式输出到cmd即可. 解决方法 ...

  2. SpringBoot学习之启动探究

    SpringApplication是SpringBoot的启动程序,我们通过它的run方法可以快速启动一个SpringBoot应用.可是这里面到底发生了什么?它是处于什么样的机制简化我们程序启动的?接 ...

  3. Linux 管理软件

    公司的openfire先前运行在windows上的,但由于在windows上openfire内存机制问题,最多只能占用2GB内存,且时间稍微长久一些就会自动挂掉,用户无法登陆和连接,因此迁移到了Cen ...

  4. C# ref与out

    ref参数是引用,out参数为输出参数.我写一个控制台的程序来说明一下两者的特点和区别: class Program { 3 public static void RefMethod( ref int ...

  5. Helm 架构 - 每天5分钟玩转 Docker 容器技术（161）

    在实践之前,我们先来看看 Helm 的架构. Helm 有两个重要的概念:chart 和 release. chart 是创建一个应用的信息集合,包括各种 Kubernetes 对象的配置模板.参数定 ...

  6. UIkit复习：UIContorl及子控件的剖析

    1.模块继承关系: 1.UIButton        ->UIControl  -> UIView 2.UILabel          ->UIview 3.UIImageVie ...

  7. ionic安装教程

    首先是安装node.js,通过nodejs官网下载,网址https://nodejs.org/en/.如果下载许要教程推荐这个https://www.cnblogs.com/zhouyu2017/p/ ...

  8. Docker的名字空间

    名字空间是 Linux 内核一个强大的特性.每个容器都有自己单独的名字空间,运行在其中的应用都像是在独立的操作系统中运行一样.名字空间保证了容器之间彼此互不影响. pid 名字空间 不同用户的进程就是 ...

  9. ubuntu16.04下安装opencv

    source url:http://blog.csdn.net/zhuiqiuk/article/details/5308505811 1 依赖包sudo apt-get install build- ...

  10. linux2.6.37内核接两个硬盘导致读写效率变低的问题

    一.问题分析: 通过跟踪定位write系统调用的实现发现,在每次调用a_ops->write_end之后,都会去调用balance_dirty_pages_ratelimited,该函数负责检查 ...