手动引导Angular JS应用程序

时间:2020-02-23 14:29:37  来源:igfitidea点击:

之前,我们研究了各种角形特征及其验证。
在本文中,我们将讨论角度初始化过程以及如何在需要时手动引导角度应用程序。

自动引导一个Angular应用程序

让我们看一下到目前为止我们已经使用过的角度应用程序中的自动引导过程。
以下代码显示了我们到目前为止编写的代码结构。

  • 脚本标记位于页面底部,以缩短应用程序加载时间。
    通过将脚本放在末尾,我们可以确保HTML加载不会被" angular.js"脚本加载阻止。

  • ng-app指令可以放置在应用程序中的任何位置。
    这将成为应用程序的入口点,或者当它看到ng-app指令时,它将自动引导应用程序。

<!doctype html>
<html lang="en" ng-app="appName">
	<head>
      	<meta charset="UTF-8">
      	<title>AngularJS Application</title>
	</head>
  	<body>

		<!-- other code goes here -->

  		<script type="text/javascript" src="angular.js"></script>
	</body>
</html>

初始化过程

在每个角度应用程序中都会发生以下过程:

  • 当DOM内容完全加载或者评估" angular.js"脚本时,Angular会自动初始化。

  • Angular寻找ng-app指令,如果找到则加载与ng-app指令关联的模块。

  • 然后创建一个应用程序注入器。

  • 这将检索对象实例,实例化类型,调用方法和加载模块。

  • 编译DOM元素,将包含ng-app指令的元素视为应用程序的根。

手动引导Angular应用程序

自动初始化将不适用于需要在Angular编译页面之前执行操作的异步加载的数据。
如果我们依靠自动初始化过程,角度将不等到数据加载。
因此,在这种情况下,您需要更好地控制初始化过程。

Angular提供了一种以编程方式控制引导过程的方法,或者我们说使用" angular.boostrap()"方法手动进行控制。

如果使用" angular.bootstrap"方法,则不应使用" ng-app"指令。

使用angular.bootstrap()示例

以下示例演示了如何使用" angular.bootstrap"方法来引导角度应用程序。

我们将首先创建一个模块并为我们的应用程序定义一个控制器。

app.js

var app = angular.module('myApp', []);

	app.controller('MessageCtrl', function($scope) {
		$scope.message = 'Angular Bootstrap - Successful';
	});

以下脚本用于引导应用程序。
我们将模块名称作为第二个参数传递给" angular.bootstrap"方法。
第一个参数是文档本身。
准备就绪后,我们将使用此方法引导应用程序。

bootstrapApp.js

angular.element(document).ready(function() {
	angular.bootstrap(document, ['myApp']);
});

现在,我们可以将这两个文件包含在HTML页面中并运行我们的应用程序。

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
      	<title>AngularJS Bootstrap</title>
	</head>
	<body>
		<div ng-controller="MessageCtrl">

 			<p>{{ message }}!</p>

		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
		<script src="app.js"></script>
		<script src="bootstrapApp.js"></script>
	</body>
</html>