AngularJS – ng-app 指令
AngularJS 中的 **ng-app 指令** 用於 AngularJS 應用程式的自動引導。此指令提供應用程式的根元素,通常放置在頁面根元素附近,例如在 **<html> ** 或 **<body>** 標記上。此指令宣告應用程式將從中啟動的根上下文。
使用 **ngApp 指令** 時需要注意的幾點:
- 每個 HTML 元素只能引導一個應用程式。如果您宣告多個 **ngApp** 元件,則出現的第一個 **ngApp** 元素將被視為自動引導的根元素。要在 HTML 中執行多個應用程式,應使用 **angular.bootstrap** 方法。
- 不要將 AngularJS 應用程式相互巢狀。
- **Transclusions** 指令不應與 **ngApp** 在同一元素上使用。一些 transclusions 指令是 **ngIf、ngInclude、ngView** 等。
語法
<element ng-app="">..Content..</element>
示例 - ngApp 指令
在您的 Angular 專案目錄中建立一個名為“**ngApp.html**”的檔案,然後複製貼上以下程式碼片段。
<!DOCTYPE html>
<html>
<head>
<title>ngApp Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngApp Directive
</h2>
<div ng-app="" ng-init="course='AngularJS'">
<p>Start Learning the latest <b>{{course}}</b> features now...</p>
</div>
</body>
</html>輸出
要執行以上程式碼,只需轉到您的檔案並將其作為普通 HTML 檔案執行即可。您將在瀏覽器視窗中看到以下輸出。
.png)
示例 2
在您的 Angular 專案目錄中建立一個名為“**ngApp.html**”的檔案,然後複製貼上以下程式碼片段。
<!DOCTYPE html>
<html>
<head>
<title>ngApp Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-App="" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngApp Directive
</h2>
<div>
<p>Enter the Course: <input type="text" ng-model="course" /></p>
<p>Course: <span ng-bind="course"></span></p>
</div>
</body>
</html>輸出
要執行以上程式碼,只需轉到您的檔案並將其作為普通 HTML 檔案執行即可。您將在瀏覽器視窗中看到以下輸出。
.png)
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP