浅谈AngularJS启动引导过程
我们都知道AngularJS默认会执行app.js来启动整个angular项目，但你知道angular具体执行过程吗？
一、自动引导启动框架
例如我们有如下代码，我们想要完成一个指令功能：
<html ng-app> <head><script src="angular.min.js">script>head><body><div my-directive>div>body> html>
下面分析一下Angular具体启动引导的过程：
第一步：加载angular.min.js文件，通过全局变量angular提供API接口；
第二步：等待直到DOM树加载完毕；
第三步：找到ng-app，自动进入启动引导阶段；
第四步：找到 my-directive，根据指令的定义展开。
另外，何时使用ng-app=“myapp”，何时直接使用ng-app？
如果使用ng-app，你的controller只能这么写：
function MyController($scope){//do something... }
而你使用ng-app="myapp"你可以这么写：
var myapp = angular.module('myapp',[]); myapp.controller('MyControler',function($scope){//do something... });
二、手动引导启动框架
在大多数情况下，我们都使用ng-app指令来进行自动引导启动，但是如果一个HTML文件中 有多个ng-app，AngularJS只会自动引导启动它找到的第一个ng-app应用，这是需要手工引导 的一个应用场景。
我们可以利用 angular.bootstrap() 方法进行手动引导:
angular.bootstrap(element, [modules], [config]);
bootstrap方法有三个参数：
element ： 一个DOM元素，以这个元素为Angular应用的根，等同自动引导时ng-app所在 的元素。这个参数是必须的。比如：document、document.body等。modules ： 引导时需要载入的模块数组。比如：[]、["myapp"]等。由于我们的HTML中引用 了myapp模块中定义的my-directive指令，所以，我们需要指定载入myapp模块。config ：引导配置项，可选。我们先忽略。 最终，我们使用如下的形式进行手动引导：
angular.bootstrap(document,["myapp"]);
比如如下的例子：
<script src="angular.min.js">script> <script>var myapp1mod = angular.module('Lilei',[]);myapp1mod.controller('Textcontroller',function($scope){var content= {};content.message = "Hello Lilei";$scope.content= content;});var myapp2mod = angular.module('Hanmeimei',[]);myapp2mod.controller('Textcontroller',function($scope){var content= {};content.message = "Hello Hanmeimei";$scope.content= content;});angular.bootstrap(angular.element("#Lilei"),["Lilei"]);angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);script>
转载于:https://www.cnblogs.com/lodingzone/p/4960012.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！