AngularJS ng-app 指令实例详解

更新时间：2016年07月30日 14:46:46 投稿：lqh

本文主要介绍AngularJS ng-app 指令，这里整理了ng-app指令的一些资料，并附实例代码，有需要的小伙伴可以参考下

AngularJS ng-app 指令

AngularJS 实例

让 body 元素称为 AngularJS 应用的根元素:

<!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>我的第一个表达式: {{ 5 + 5 }}</p>

</body>
</html>

运行结果：

我的第一个表达式：10

定义和用法

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。

所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

语法

<element ng-app="modulename">
...
 在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>

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

参数值

值	描述
modulename	可选。指定载应用模块的名称。

AngularJS 实例

执行应用中的模块

<!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>

运行效果：

John Doe

以上就是对AngularJS ng-app 指令的资料整理，后续继续补充。

您可能感兴趣的文章:

JavaScript框架Angular和React深度对比
这篇文章主要介绍了JS框架中Angular和React不同和差异，以及两个框架的深度对比介绍。
2017-11-11
angular.js + require.js构建模块化单页面应用的方法步骤
这篇文章主要给大家介绍了关于利用angular.js + require.js构建模块化单页面应用的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
AngularJS 模型详细介绍及实例代码
本文主要介绍 AngularJS模型，这里详细介绍了AngularJS 模型中的知识点,并提供实例代码,有需要的小伙伴可以参考下
2016-07-07
AngularJS Phonecat实例讲解
这篇文章主要为大家详细介绍了AngularJS Phonecat实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
angular双向绑定模拟探索
这篇文章主要和大家一起探索模拟angular的双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
SpringMVC简单整合Angular2的示例
这篇文章主要介绍了SpringMVC简单整合Angular2的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
浅谈angularjs $http提交数据探索
这篇文章主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-01-01
Angular.js中处理页面闪烁的方法详解
我们在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。本文将介绍Angular.js中处理页面闪烁的方法。
2017-03-03
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
这篇文章主要介绍了AngularJS验证信息框架的封装插件用法,分析了AngularJS表单验证规则并实例说明了w5cValidator扩展插件的相关使用技巧,需要的朋友可以参考下
2016-11-11
AngularJS中controller控制器继承的使用方法
这篇文章主要介绍了AngularJS中controller控制器继承的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11