angularjs的初步使用

今天来学习angularjs，http://www.runoob.com/angularjs/angularjs-model.html，

这个网站可以帮助我们快速掌握一些关于angularjs的基础知识。我会分两篇文章来介绍它的一些比较关键的内容。

首先我们先通过三步来初步了解一下：

先建立

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

模块，然后建立对应控制器

app.controller("myCtrl",function($scope){
$scope.carname = 'yes';
});

然后在对应的html中使用

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>

通过上面这三步曲，我们就能大概的了解一下angularjs的使用方法。

{{}}是什么？

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind（下面有介绍） 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置”输出”数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

ng-app声明angularjs的作用域

ng-controller调用创建的控制器

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。

大部分的代码都是通过这样来实现的，有一点需要声明的是，angularjs是mvc的混合设计模式，m指model ，v是view也就是这里的html，c是控制器，通常我们把模块和controller放在两个不同的js文件中，这样模块js可以避免使用全局函数被其它脚本文件覆盖的问题。要注意的一点是，模块和模型不要弄混淆，模块和控制器的关系是：模块是应用控制器的容器，控制器通常属于一个模块。而模型，在这里就是ng-model指令, 后面我们还会讲到scope（作用域）也是属于模型。

ng打头的指令还有很多，我们还可以自己定义指令如下：

<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
</script>

接下来我们将讲到scope（作用域），先来看看下面的代码：

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加

scope 前缀, 只需要添加属性名即可，如： {{carname}}

在上述文中，我们讲到了mvc，其实这里的scope即是一个model，它是一个js的对象，有属性和方法可以在视图或者控制器中使用。

未完待续。。。