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 指令的资料整理,后续继续补充。

相关文章

  • ionic使用angularjs表单验证(模板验证)

    ionic使用angularjs表单验证(模板验证)

    能够验证用户在表单中输入的内容是否合理与正确是十分重要的,这篇文章主要介绍了ionic使用angularjs表单验证(模板验证),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • AngularJS基础 ng-include 指令示例讲解

    AngularJS基础 ng-include 指令示例讲解

    本文主要介绍AngularJS ng-include 指令,这里对ng-include 指令的知识做了详细整理介绍,有需要的朋友可以参考下
    2016-08-08
  • 深入理解Angular4订阅(Subscribe)与取消

    深入理解Angular4订阅(Subscribe)与取消

    这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 深入浅析AngularJs模版与v-bind

    深入浅析AngularJs模版与v-bind

    v-bind与{{}}都可以对数据进行绑定,接下来通过本文给大家介绍AngularJs模版与v-bind的相关知识,感兴趣的朋友一起看看吧
    2018-07-07
  • Angular实现防抖和节流的示例代码

    Angular实现防抖和节流的示例代码

    这篇博客主要是详细介绍两种常用Angular实现防抖和节流的方法:使用RxJS操作符和使用Angular自带的工具,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2024-02-02
  • Angular2 自定义表单验证器的实现方法

    Angular2 自定义表单验证器的实现方法

    这篇文章主要介绍了Angular2 自定义表单验证器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • AngularJS使用拦截器实现的loading功能完整实例

    AngularJS使用拦截器实现的loading功能完整实例

    这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下
    2017-05-05
  • AngularJS应用开发思维之依赖注入3

    AngularJS应用开发思维之依赖注入3

    这篇文章主要为大家详细介绍了AngularJS应用开发思维之依赖注入第三篇,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • angular使用post、get向后台传参的问题实例

    angular使用post、get向后台传参的问题实例

    本篇文章主要介绍了angular使用post、get向后台传参的问题实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅析angularJS中的ui-router和ng-grid模块

    浅析angularJS中的ui-router和ng-grid模块

    下面小编就为大家带来一篇浅析angularJS中的ui-router和ng-grid模块。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论