angular 手动注入_手动引导Angular JS应用程序

最新推荐文章于 2020-11-03 14:16:30 发布

cunchi4221

最新推荐文章于 2020-11-03 14:16:30 发布

阅读量281

点赞数

文章标签： java python javascript vue js ViewUI

原文链接：https://www.journaldev.com/8060/manually-bootstrapping-an-angular-application

版权

angular 手动注入

Earlier we looked at various angular form features and its validation. In this post, We will discuss about angular initialization process and how to manually bootstrap an angular application if needed.

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

自动引导一个Angular应用程序 (Automatically Bootstrapping an Angular Application)

Let us have a look at the auto-bootstrap process in angular application that we have used so far. The following code shows the structure of the code, which we have written so far.

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

The script tag is placed at the bottom of the page to improve application load time. By placing script at the end, we can ensure that HTML loading is not blocked by angular.js script loading.
脚本标签位于页面底部，以缩短应用程序加载时间。通过将脚本放在最后，我们可以确保angular.js脚本加载不会阻止HTML加载。
The ng-app directive can be placed anywhere in the application. That’s going to be the entry point of the application or angular will automatically bootstrap the application when it sees the ng-app directive.
ng-app指令可以放在应用程序中的任何位置。那将是应用程序的入口点，或者当看到ng-app指令时，angular将自动引导应用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>

初始化过程 (Initialization Process)

The following processes takes place in every angular application:

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

Angular initializes automatically when DOM content is completely loaded or when the angular.js script is evaluated.
当DOM内容完全加载或评估angular.js脚本时，Angular会自动初始化。
Angular looks for the ng-app directive, if found then it loads the module associated with the ng-app directive.
Angular会查找ng-app指令，如果找到，它将加载与ng-app指令关联的模块。
Then an application injector is created.
然后创建一个应用程序注入器。
This will retrieve object instances, instantiate types, invoke methods, and load modules.
这将检索对象实例，实例化类型，调用方法和加载模块。
Compile the DOM elements treating the element containing ng-app directive as the root of the application.
编译DOM元素，将包含ng-app指令的元素视为应用程序的根。

手动引导Angular应用程序 (Manually Bootstrapping an Angular Application)

The automatic initialization will not work with asynchronously loaded data that need to perform an operation before Angular compiles a page. The angular will not wait until the loading of data if we rely on auto-initialization process. Therefore, in this scenario you need to have a better control over the initialization process.

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

Angular provides a method to control the bootstrap process programmatically or we say manually using angular.boostrap() method.

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

You should not use the ng-app directive if you use angular.bootstrap method.

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

使用`angular.bootstrap()`示例 (Using `angular.bootstrap()` Example)

The following example demonstrates how to use angular.bootstrap method to bootstrap an angular application.

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

We will first create a module and define a controller for our application.

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

app.js

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

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

The following script is used to bootstrap the application. We will pass our module name as the second parameter to the angular.bootstrap method. the first parameter is the document itself. When it is ready, we will bootstrap our application using this method.

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

bootstrapApp.js

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

Now we can include these two files in the HTML page and run our application.

现在，我们可以将这两个文件包含在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>

You will see the following output on your browser.