实现一个 AngularJS简单应用,首先需要搭建开发AngularJS应用环境,搭建开发环境只需AngularJS文件库即可,然后在你的HTML代码中引入文件库。
AngularJS文件库获取方式:
CDN地址直接引用:http://www.bootcdn.cn/angular.js/
代码:
<!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>
运行结果:
源码分析:
<html>元素中增加了一个“ng-app”属性,这个属性的功能是通知引入的AngularJS文件框架,表明此属性元素内容部分开始接受AngularJS的管理。“ng-app”还可以添加至其他标签上,如<div>表明表明仅在添加了“ng-app”属性的标签范围内可以调用AngularJS框架管理其中包含的DOM元素。此外,在页面<body>元素中,使用两个大括号的方式包含了一个字符串,其中两个大括号是AngularJS框架插入动态数据的一种方式,我们称之为“双花括号插值语法”。在通常情况下,通过这种方式插入的数据均为表达式,并且在插入时已获得了表达式的结果值,并直接将该值显示在页面中。本实例中,由于表达式是字符串内容,因此,直接显示在页面中。