初识AngularJS之应用(ng-app)篇

6 篇文章 0 订阅
5 篇文章 0 订阅

作为一个web前端单页面应用程序构建框架,其构建的基本单位当然是 应用程序(app),而作为本系列教程的第一篇,ng-app理解起来当然也是十分的简单。下面直接贴代码,然后详细进行解释。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
//引入AngularJS的库文件
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
//声明AngularJS应用
<div ng-app>
//AngularJS表达式
<p>我的第一个AngularJS应用: {{ "Hello" + "World!" }}</p>
</div>

</body>
</html>
运行结果



由代码可见:

1、在构建AngularJS之前,首先引入AngularJS的库文件,AngularJS是以javascript文件的形式发布的,所以可以通过script标签添加到我们创建的文件中,在引用时,也可先将其库文件下载到本地后进行本地的引用,AngularJS库文件下载

2、本程序中通过指令ng-app将div元素声明为应用程序的根元素,通过ng-app指令,我们就创建了一个AngularJS应用。在AngularJS中,每个应用程序都必须有一个根元素,一个HTML文档中只允许有一个ng-app指令,如果存在多个ng-app指令,则只有第一个会生效。

3、表达式的使用使得HTML文档更加具有活力,表达式内容包含在双大括号{{ expression }}中,可进行所有基本的运算以及判断。


到此,我们就轻松地利用ng-app指令创建了我们的第一个AngularJS应用程序,是不是很简单呢。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值