AngularJS 为什么如此火

数据绑定和scopes(作用域)

首先第一个浮出大脑的问题是：angular支持数据绑定吗？下面让我们来了解angular.js的数据绑定：


Insert your name:

Echo: {{user.name}}

在这代码片段中，在我们解释细节之前，我还是希望尝试下其效果：

注：此刻暂时不要太心急去了解ng-app。

如你所见，我在input中输入的将会显示在后边echo。这是如何工作的？简单来说，angular的ng-model(更多关于指令的将在文章后续)给我带来了双向绑定机制。

如此是好，但是user.name存储在哪里呢？其存储在我们的$scope上，当我们在input中输入任何字符都会及时的更新scope对象上
的user.name属性。然后我们可以利用angular的表达式{{…}}现实在HTML中。所以当我们在input中输入时，其会及时更新
scope上的user,name属性，在由修改HTML显示。

好吧，这并不难，但是你所说的$scope是个什么东东呢？在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上，来达到双向你绑定。

这就好比：

这意味着我们我们从template上为$scope设置了一个属性对象user.name，所以我们也可以在controller中访问这个对象(user.name).

让我们来看个更复杂的示例：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
$scope.message = 'World';
});

body ng-app="app" ng-controller="MainCtrl">
Hello, {{ message }}


在这里首先我们定义了angular application，只是简单的创建了一个angular module，其接受一个module名字和依赖数组为参数。

紧接着创建了一个controller，通过调用 app module的controller方法，并传入一个controller
名字和function。function函数接受$scope参数（可以接受更多的参数，放在后面部分）。所以我们可以开始双向绑定了。

在$scope中我们附加了message的字符串属性。

在view中你可能注意到了body tag多出了一些东东，这是干什么的？这些是angular的指令(directives)，它给HTML带来了新的语法扩展，在这例子中我们使用了两个angular内置的指令：

ng-app：它会告诉angularbody节点包含了我们的angular应用，换句话说，在body中的一切会被angular所接受管理。其参数为我们的app module的名字，和我们在javascript中命名一致。
ng-controller：在这指令在我们传入的是controller 名字，此例中为MainCtrl。

最后我们将message插入我们的remplate。

所以其可视化表示将是：

聪明的你可以冒出一个疑问：我们能够在$scope上绑定function？当然。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
$scope.greet = function() {
$scope.message = "Hello, " + $scope.user.name;
}
});


What's your name?:

Click here!

{{ message }}

我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello ，”和从input输入的$scope.user.name的字符串连接。

然后在HTML中创建一个附加了angular ng-click 指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。

注意：在input中enter并不会工作，这是展示ng-click如何工作。

指令

我们已经看见了一些指令了，指令是个什么东东？指令为HTML引入了新的语法。HTML已经很强大了，但是有时我需要更多…

看下面的例子：





示例代码在做什么？除了看见id外，我真的什么也不能获知。

然后我们只得从多余30个javascript文件中去查找，最后我们看见如下代码：

$('#chart').pieChart({ ... });

Aha！原来是个饼图（pie chart）容器。

在这里如果你不去查找javascript文件将无法获知页面到底是做什么的，实现了什么功能。

下面我们再来看看angular code，





是不是语义很清晰，我们可以一眼看出这是一个pie chart，不仅如此，而且还知道width,height，以及其数据。

如果你对pie chart 示例感兴趣，请猛击这里

angular内置指令

angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始)，接下来让我了解更多的内置指令。

有时在页面中有部分内容我们只希望到达某状态（属性为true）才显示：

Show



ng-show仅当angular其表达式值为true时，才显示该元素或子元素。

注意：在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller)，利用angular表达式作为指令的参数。在首次表达式为undefined，然后我们设置为为true，在false如此交替。

angular同时也提供了ng-hide指令。

让我们看些更有趣的指令，如果有个List或者数组呢？

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
$scope.developers = [
{
name: "Jesus", country: "Spain"
},
{
name: "Dave", country: "Canada"
},
{
name: "Wesley", country: "USA"
},
{
name: "Krzysztof", country: "Poland"
}
];
});

• 
  {{person.name}} from {{person.country}}