Angularjs学习笔记之基础知识

一、Angularjs是什么？

ng实际上是一个基于MVC架构的，模块化的，基于双向数据绑定的JavaScript框架。

二、它主要包含什么功能？

1.模型

2.指令

3.控制器

4.过滤器

5.模块

模型的基本概念:(先来个代码实例)

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">

<h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

上面这段代码里分别包含了，ng的入口程序，控制器，绑定模型。

首先，入口程序定义在div标签上，也就是ng-app,这个ng-app是做什么用的呢？它实际上ng程序进入的入口，类似于C语言的Main函数。

然后，我们在div标签上看到了有个定义的ng-controller="myCtrl"指令.这个就是控制器。那么控制器是坐什么用的呢？官方的解答是：控制器是一个javascript函数,ng应用程序被控制器控制。

也就是说，控制器里的代码实际上是我们日常所说的业务逻辑，所有的业务逻辑代码写在控制器函数里。

再往下看，在div标签里有个input输入框标签，标签里有个ng-model="name"指令。这个ng-model实际上就是ng的模型了，有了这个指令，也就相当于给input输入框绑定了一个name模型

下面，我们进入了script标签，在script标签里，我们就可以开始设置模型和控制器的代码逻辑了。

具体实现如下：

1.先定义一个app变量，此变量保存一个ng模型，函数的第一个参数是指定此模型的名称为myApp。注意：这个名称与Div标签上的ng-model名称是一样的。第二个参数是一个数组，此数组的含义之后再讨论。

2.进入第二行代码，此时在app变量上添加了一个方法，也就是controller，控制器函数有两个参数，第一个是控制器的名称，第二个就是控制的业务逻辑了。此时有一个重要的概念出现了，那就是$scope

什么是$scope?

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

上面的这个是官网API里的说法。那么实际上它是什么呢？

我的理解，它类似于JS里的作用域，开发人员可以借助$scope传递参数，也就是可以绑定专著于这个控制器的属性.

在上面的代码实例中，我们定义了一个属性$scope.name = "John Doe"，那么对应的myCtrl这个控制器上就有了一个name属性，它的值为John Doe;

所以在h1标签里，双大括号里的name属性就会显示为John Doe

而且如果我们现在在输入框里输入文字，会发现h1标签里的文字也对应有了变化，但其实我们并没有写一句javascript代码去实现这个功能。所以显而易见，是ng的双向数据绑定机制帮我们完成了这个功能