快捷導(dǎo)航

AngularJS ng-app 指令實(shí)例詳解

更新時(shí)間：2016年07月30日 14:46:46 投稿：lqh

本文主要介紹AngularJS ng-app 指令，這里整理了ng-app指令的一些資料，并附實(shí)例代碼，有需要的小伙伴可以參考下

AngularJS ng-app 指令

AngularJS 實(shí)例

讓 body 元素稱(chēng)為 AngularJS 應(yīng)用的根元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<p>我的第一個(gè)表達(dá)式: {{ 5 + 5 }}</p>

</body>
</html>

運(yùn)行結(jié)果：

我的第一個(gè)表達(dá)式：10

定義和用法

ng-app 指令用于告訴 AngularJS 應(yīng)用當(dāng)前這個(gè)元素是根元素。

所有 AngularJS 應(yīng)用都必須要要一個(gè)根元素。

HTML 文檔中只允許有一個(gè) ng-app 指令，如果有多個(gè) ng-app 指令，則只有第一個(gè)會(huì)被使用。

語(yǔ)法

<element ng-app="modulename">
...
 在 ng-app 根元素上的內(nèi)容可以包含 AngularJS 代碼
...
</element>

所有的 HTML 元素都支持該指令。

參數(shù)值

值	描述
modulename	可選。指定載應(yīng)用模塊的名稱(chēng)。

AngularJS 實(shí)例

執(zhí)行應(yīng)用中的模塊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

</body>
</html>

運(yùn)行效果：

John Doe

以上就是對(duì)AngularJS ng-app 指令的資料整理，后續(xù)繼續(xù)補(bǔ)充。

您可能感興趣的文章:

相關(guān)文章

ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證）
能夠驗(yàn)證用戶在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
AngularJS基礎(chǔ) ng-include 指令示例講解
本文主要介紹AngularJS ng-include 指令,這里對(duì)ng-include 指令的知識(shí)做了詳細(xì)整理介紹,有需要的朋友可以參考下
2016-08-08
深入理解Angular4訂閱(Subscribe)與取消
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
深入淺析AngularJs模版與v-bind
v-bind與{{}}都可以對(duì)數(shù)據(jù)進(jìn)行綁定，接下來(lái)通過(guò)本文給大家介紹AngularJs模版與v-bind的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2018-07-07
Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法：使用RxJS操作符和使用Angular自帶的工具,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下
2024-02-02
Angular2 自定義表單驗(yàn)證器的實(shí)現(xiàn)方法
這篇文章主要介紹了Angular2 自定義表單驗(yàn)證器的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入第三篇，感興趣的小伙伴們可以參考一下
2016-08-08
angular使用post、get向后臺(tái)傳參的問(wèn)題實(shí)例
本篇文章主要介紹了angular使用post、get向后臺(tái)傳參的問(wèn)題實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)?lái)一篇淺析angularJS中的ui-router和ng-grid模塊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05