初步接觸angular.js---一些基本概念的了解

初步接觸angular.js

        在這裡聲明本文僅作為學習的記錄，從初步接觸認識angular.js到慢慢的從練習項目中逐漸對其熟悉，并逐漸體會到了它的強大和神奇

首先angular的思想是MVC，将模型、視圖和控制層分開，進而讓程式更加條理清晰，更易于閱讀，在如今這個程式更應該追求對人友好而不是對機器友好的時代這顯然是非常有意義的。同時将事務邏輯與資料分離對于軟體的維護和擴充顯然也有着不可思議的益處。

        angular.js是由google推出并維護的一個web開發技術，它的一個重要概念就是資料綁定。

1.資料到表現綁定，在html頁面上的相應位置使用符号 {{variable}} ，通過在控制層改變variable 的值來動态的改變頁面的顯示。

頁面上的代碼如下所示

<p class="message">
{{alert_message}}
</p>
           

我們在controller上寫如下代碼

</pre><pre name="code" class="javascript">$scope.alert_message = 'activity name repeated!';
           

        那麼當輸入活動名稱與已經有的活動名稱重複，滿足顯示條件，則會在頁面的相應位置顯示我們給它的值 activity name repeated!

        隻要在controller上面改變了alert_message的值，同時頁面上相應位置的顯示也就會發生改變。

2.模闆到資料的綁定

頁面代碼如下

<textarea cols="30" rows="1" class="input-full" ng-model="activity_name" placeholder="enter activity name"></textarea>
           

        這是一個文本輸入框，我們不管有關它大小的元素以及沒有輸入的時候顯示内容的placeholder，将注意力集中到ng-model,這裡ng-model就将頁面輸入的資料與背景的資料進行了綁定，當在文本框輸入比如‘活動一’，同時這個值我們就可以在controller中通過

$scope.activity_name 
           

來得到輸入的值，來判斷是否輸入活動名稱重複。

3.路由

        一個網站或者是一個應用，它必然會有多個頁面，必然會涉及到各個頁面的之間的跳轉。比如建立活動界面在輸入活動名稱，點選建立按鈕，程式将會跳轉到活動報名頁面，活動報名頁面點選傳回可以傳回到活動清單頁面等。那麼這樣的事情顯然應該從view層分離出來，于是控制層就有路由器來完成這樣的工作，下面是路由器的代碼

'use strict';

/**
* @ngdoc overview
* @name partyBidApp
* @description
* # partyBidApp
*
* Main module of the application.
*/

/*向angular注冊了一個partyBidApp的子產品，然後對其進行配置，傳入參數是$routeProvider,則是對路由進行配置*/
angular
.module('partyBidApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
/*如下形式是對路由路徑的選擇，當指向為某頁面名字的時候，就将頁面跳轉至相應的模闆，同時定義對應頁面的控制器，控制頁面上的邏輯和顯示相關的變化等，這裡根目錄頁面是活動清單頁面。*/
.when('/', {
templateUrl: 'views/activity_list.html',
controller: 'activityListCtrl'
})
.when('/create_activity', {
templateUrl: 'views/create_activity.html',
controller: 'createActivityCtrl'
})
.when('/activity_sign_up/:activity_name',{
templateUrl:'views/activity_sign_up.html',
controller:'activitySignUpCtrl'
})
.when('/activity_list',{
templateUrl:'views/activity_list.html',
controller:'activityListCtrl'
})
.otherwise({
redirectTo: '/'
});

});
           

4.controller

        我們前面已經提到過controller,每一個頁面都要對應的有一個controller，來控制頁面上的邏輯，處理來自頁面的事件消息。每一個controller在向angular注冊的時候就要為其指定一個名字，在路由中要為每一個模闆指定對應的控制器，在頁面上也要指定對應的控制器。

路由中：

when('/activity_sign_up/:activity_name',{
templateUrl:'views/activity_sign_up.html',
controller:'activitySignUpCtrl'
})
           

頁面中：

<div id="sign_wrapper" ng-controller="activitySignUpCtrl">
...
</div>
           

        ng-controller的作用範圍就是它所在标簽包裹的範圍，在那個範圍内的html元素都由對應的controller控制

5.$scope

        上面也提到過$scope，它表示的是一個範圍，在頁面上的一個可以被控制層知曉的範圍，ng-app 所在标簽包裹的範圍都是 $scope能夠作用的範圍，在這個範圍中可以找到的變量或者方法都能通過$scope.variable或者是$scope.function來找到并做一定的處理。比如：

$scope.number_of_sign = Person.read_person_signed_list(current_activity_name).length;
           

$scope.start_sign_up = function() {
            $scope.button_name = 'end';
            Activity.activity_sign_start();
        }