调用Angular
为了使用Angular,所有应用都必须首先做两件事:
1.加载Angular.js库。
2.使用ng-app指令告诉Angular应用管理DOM中的哪一部分。
加载脚本
加载类库的操作非常简单,与其他JavaScript类库遵循同样的规则。示例如下:
1: <script src=“xxx/angular.min.js”>
2:
3: </script>
你可以吧script标签里的src换成你自己的。
使用ng-app声明Angular的边界
你可以使用ng-app指令告诉Angular应该管理页面中的那一块。如果你正在构建一款纯
Angular应用,那么你应该把ng-app指令写在<html>标签中,实例如下:
1: <html ng-app>
2:
3: </html>
这样就会告诉Angular去管理页面上所有的DOM元素。
如果你有一款现存的应用,该应用正在用其他一些技术(如Java或Rails)来管理DOM,那么
你可以让Angular只管理页面中的一部分,只要在页面中放入一些<div>之类的元素即可。
1: <html>
2:
3: <div ng-app>
4:
5: </div>
6:
7: </html>
Model View Controller
尽管Angular有很大的灵活性,但是一下这些风格你将会经常涉及:
1.用来容纳数据的模型,模型代表应用当前状态。
2.用来展示数据的一些视图。
3.用来管理视图和模型之间关系的一些控制器。
你将会使用对象的属性来创建数据模型,甚至只用基本数据类型来储存数据。模型属性并没有什么特殊的东西。如果
你想给客户展示一些文本,你可以使用字符串,示例如下:
var someText="You have started your journey.";
你可以编写一个HTML页面来创建视图,然后把它和你的模型中的数据融合起来,正如我们前面看到的,你可以在DOM
中插入占位符,然后像下面这样设置其中的文本:
<p>{{someText}}</p>
我们把这叫做双括号插值语法,因为可以把新的内容插入到现有模型中。
控制器就是编写的类或者类型,它的作用是告诉Angular该模型有那修对象或者基本数据构成,只要把这些对象或者基本数据
设置到$scope对象上即可,$scope对象会被传给控制器:
1: function TextController($scope){
2: $scope.someText=someText;
3: }
把上面所用东西整合起来,我们就获得如下内容:
1: <html ng-app>
2: <body ng-controller="TextController">
3: <p>{{someText}}</p>
4: <script src="xxx/angular.min.js">
5: </script>
6: <script>
7: function TextController($scope){
8: $scope.someText="You have started your journey"
9: }
10: </script>
11: </body>
12: </html>
把内容加载到浏览器上,你将会看到:
You have started your journey
数据模型也可以这样编写:
1: var messages={};
2: messages.someText="You have started your journey";
3: function TextController($scope){
4: $scope.messages=messages;
5: }
然后再模板中:
<p>{{messages.someText}}</p>