Angularjs學習筆記之基礎知識

1、Angularjs是什麼？

ng其實是一個基於MVC架構的，模塊化的，基於雙向數據綁定的JavaScript框架。

2、它主要包含什麼功能？

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的雙向數據綁定機制幫咱們完成了這個功能