初步接触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();
        }