使用典型的类库时,你可以选择并使用你所喜欢的功能;而对于angularjs框架来说,必须把它看成一个完整的套件来使用,框架中的所有的东西都包含在里面,接下来将会介绍angular的基础模块,这样你就可以理解它们是如何被装配在一起的。
调用Angular
为了使用angular,所有的引用都必须做两件事情:
1、加载angular库。
2、使用ng-app指令告诉angular应该管理DOM中的那一部分。
加载脚本
加载类库的操作非常简单,与其他javascript类库遵循同样的规则。
使用ng-app声明Angular的边界
你可以使用ng-app指令告诉angular管理页面的那一块。如果你正在构建一个纯angular应用,那么你应该把ng-app写在html标签中,如:、
<html ng-app>
……
</html>
如果只想管理页面中某一个部分,那么可以这样写:
<html>
<div ng-app>
……
</div>
</html>
Model View Controller
angular本身是支持MVC风格的应用设计。尽管angular有很大的灵活性,但是一下的风格会经常涉及:
1、用来容纳数据的模型,模型代表应用当前的状态。
2、用来展示数据的一些试图。
3、用来管理数据和模型之间的一些控制器。
eg. var sometext='you hava started your journey.';
你将会使用对象的属性来创建数据模型,甚至只用数据基本类型来存储数据;你可一编写一个HTML页面来创建试图,然后把它和你数据中的模型融合起来
eg.<p>{{sometext}}</p>
我们把这叫做双括号插值语法
把以上东西整合起来就有了如下内容:
1 <!DOCTYPE html> 2 <html ng-app="textApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello World!</title> 6 <script src="static/js/angular.js" type="text/javascript"></script> 7 <script src="static/app/controller/controller.js" type="text/javascript"></script> 8 </head> 9 <body ng-controller="TextController"> 10 <p>{{sometext}}</p> 11 </body> 12 </html>