AngularJS简单示例——Hello Wolrd

May 25, 2017 阅读(177)

标签: AngularJS 前端框架

实现一个 AngularJS简单应用,首先需要搭建开发AngularJS应用环境,搭建开发环境只需AngularJS文件库即可,然后在你的HTML代码中引入文件库。

AngularJS文件库获取方式:


代码:

<!doctype html>
<html ng-app>
 <head>
  <title>AngularJS简单示例——Hello Wolrd</title>
  <script src="http://cdn.bootcss.com/angular.js/1.6.4/angular-animate.js"></script>
 </head>
 <body>
  {{AngularJS , Hello Wolrd !}}
 </body>
</html>

运行结果:

blob.png

源码分析:

<html>元素中增加了一个“ng-app”属性,这个属性的功能是通知引入的AngularJS文件框架,表明此属性元素内容部分开始接受AngularJS的管理。“ng-app”还可以添加至其他标签上,如<div>表明表明仅在添加了“ng-app”属性的标签范围内可以调用AngularJS框架管理其中包含的DOM元素。此外,在页面<body>元素中,使用两个大括号的方式包含了一个字符串,其中两个大括号是AngularJS框架插入动态数据的一种方式,我们称之为“双花括号插值语法”。在通常情况下,通过这种方式插入的数据均为表达式,并且在插入时已获得了表达式的结果值,并直接将该值显示在页面中。本实例中,由于表达式是字符串内容,因此,直接显示在页面中。