[AngularJS]Chapter 2 剖析安哥拉JS应用程序

最新推荐文章于 2023-10-16 21:27:14 发布

weixin_30298497

最新推荐文章于 2023-10-16 21:27:14 发布

阅读量587

点赞数

文章标签： ui javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/tonghounb/p/3475804.html

版权

不同于普通的框架，你可以从中选择你想用的方法。在anjular中是不同组件写作工作的。这章中，你会看到anjular中基本的组成部分并且理解他们是如何协同工作的。很多组件会在以后的章节中详细讲解。
【开始使用Anjular】
无论你构建什么样的应用程序，以下两件事是你必须做的。
1、加载anjular.js文件
2、告诉anjular那部分DOM是被anjular管理的，通过加上ng-app的directive
【加载脚本】
你能从谷歌的CND中加载，如下
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
我们建议使用谷歌CDN，谷歌的服务器非常快，并且脚本可以跨应用程序缓存。这就是说如果你的用户有很多使用anjular的程序，只需要下载一次anjular。如果你的用户访问了别人的
使用了anjular的应用程序，那么当访问你的网站的时候也不用再次下载脚本。
如果你更喜欢使用存储在本地的脚本，也可以。
【使用ng-app声明anjular的边界】
ng-app告诉Anjular你的页面的哪部分是需要被管理的。如果你的页面全都是就加在html标签里
<html ng-app>
…
</html>
这告诉Anjuar管理页面中全部的DOM元素。
你也可以管理页面的一部分仅仅
<html>
…
<div ng-app>
…
</div>
…
</html>

【模型试图控制器】
在第一章中。我们提到了Anjular支持MVC模式。所以你可以很灵活的构建你的应用程序，你有这么几种选择：
一个模型包含现在应用程序状态的数据。
展现数据的试图
管理模型和视图的控制器
可以使用对象属性或基本类型存储你的数据。如果你想展现一些数据给用户看，你可以这么写一个字符串
var someText = 'You have started your journey.';
然后通过HTML页面中从模型中取到的数据拼凑上去得到页面。就像这样
{{someText}}
控制器实际上是类或者类型，通过这个告诉Anjular那个对象构成你的模型通过分配他们到$scope中
function TextController($scope){
$scope.someText = someText;
}
把上边这些组合到一起如下
<html ng-app>
<body ng-controller="TextController">
<p>{{someText}}</p>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<script>
function TextController($scope) {
$scope.someText = 'You have started your journey.';
}
</script>
</body>
</html>
在浏览器中加载这个文件。我们看到
You have started your journey.
通过这个简单的例子，对于大多数应用程序，你会创建好多模型来存储你的数据。我们将要创建一个message模型并使用它存储someText。所以
把var someText = 'You have started your journey.';
改成：
var messages = {};
messages.someText = 'You have started your journey.';
function TextController($scope) {
$scope.messages = messages;
}
在html中使用它
<p>{{messages.someText}}</p>
在后面我们会谈到$scope对象。创建一个这样的模型对象会避免未预料的影响$scope对象的行为。
最好不要把控制器创建为全局对象。而是要创建一个module，类似于C#中的命名空间。代码如下
<html ng-app='myApp'>
<body ng-controller='TextController'>
<p>{{someText.message}}</p>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
</body>
</html>
在这个版本中。我们告诉ng-app元素module的名称，myApp。然后我们创建一个名称为myApp的module从我们的控制器方法里。
模板和数据绑定
在Angular应用程序只存在于从服务器上下载下来的HTML文档。angular存在于script标签中
在web浏览器中，Angular通过组合数据完善你的HTML模板。我们看到第一章的数据在购物车中如下：
<div ng-repeat="item in items">
<span>{{item.title}}</span>
...
</div>
在这，他重复显示外层的<DIV>和里面的所有东西。

【展示文本】

你可以展示更新文本，只要你在UI中使用ng-bind指令。它有两种对等的方式。一种是我们见过的两个花括号

1 <p>{{greeting}}</p>

另一种叫做ng-bind

<p ng-bind="greeting"></p>

分别什么时候用这两种呢？我们使用双花括号语法读起来更自然。但是当页面加载的时候可能会出现用户看到未渲染完的页面模板，在安哥拉替换两个双花括号的内容为实际数据之前。

【表单输入】

例如

<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>

这表示

1、当用户选择了box，SomeController中的$scope会被置为真

2、如果你设置了$scope.youCheckedIt为true在SomeController中。UI中的checkbox会为选中状态。

通过设置ng-change属性来制定控制器中当input的值改变时应该调用的方法。

<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>

我们把初始值设置为0

function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
}

要在UI中更新一个字段，无论他是怎么被更新的。我们要调用一个全局函数$watch()

在本例中。我们要监视的是funding.startingEstimate然后调用的是computeNeeded()函数。我们就可以这样重写StartUpController

1 function StartUpController($scope) {
2 $scope.funding = { startingEstimate: 0 };
3 computeNeeded = function() {
4 $scope.funding.needed = $scope.funding.startingEstimate * 10;
5 };
6 $scope.$watch('funding.startingEstimate', computeNeeded);
7 }

View Code

当startingEstimate改变的时候都会更新funding.needed方法。

<form ng-controller="StartUpController">
Starting: <input ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>

你可以在表单上制定ng-submit指令。告诉这个表单提交到哪个方法上

 1 <form ng-submit="requestFunding()" ng-controller="StartUpController">
 2 Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">
 3 Recommendation: {{needed}}
 4 <button>Fund my startup!</button>
 5 </form>
 6 function StartUpController($scope) {
 7 $scope.computeNeeded = function() {
 8 $scope.needed = $scope.startingEstimate * 10;
 9 };
10 $scope.requestFunding = function() {
11 window.alert("Sorry, please get more customers first.");
12 };
13 }

View Code

这会组织默认的post提交

我们可以通过这种方法做一个重置按钮\

<form ng-submit="requestFunding()" ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">
Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
function StartUpController($scope) {
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("Sorry, please get more customers first.");
};
$scope.reset = function() {
$scope.startingEstimate = 0;
};
}