party_bid是一个用于创建竞价活动的web app。即众所周知的拍卖，但是规则会有不同。这里所应用的前端框架是Google开发的AngularJS轻量级，因该说是轻轻量级的小巧精致的JS框架。当然所有的框架其实都是为了方便开发，避免重复工作，方便代码重用，减少各个模块之间的耦合度等等。一般的框架都比较烦，AngularJS是一种真正的不束缚开发者且简单易懂的框架。项目由Yoman生成，结合Rubymine IDE，日常代码提交等由Git管理，并且注册一个Trello帐号管理开发需求和进度。当然大前提是你已经搭配了Linux开发环境。如果有什么问题，请移步博客：
     
      点击打开链接
     
    

        接下来会探讨一些开发中常见的小问题，请大家轻柔对待，不要对出现的低能问题暴躁抽打。

AngularJS的一些基本知识：

       1. 路由配置与添加JS文件至index.html

       2. $scope的运用

       3. ng-xx的运用

       4. URL传递参数

       5. 其他

接下来的讨论的问题也会分类到这些知识中。

1. 路由配置与添加JS文件至index.html

AngularJS的域变量（其实是对象）都会有一个$符号。function()里面会有一个参数$routeProvider ，是路由所需服务。ActivityMasterApp是整个AgularJS的应用名称，与index.html里面ng-app所引用的一样。

路由配置像这样子：

    
     
      'use strict';angular    .module('ActivityMasterApp',[        'ngCookies',        'ngResource',        'ngSanitize',        'ngRoute'    ])    .config(function ($routeProvider){        $routeProvider            .when('/', {                templateUrl: 'views/main.html',                controller: 'MainController'            })     
      	    //当然还有其他页面            .otherwise({                redirectTo: '/'            });
      
     
    

这里刚刚写的时候最好参照着人家的写，否则会在细节上出问题。注意when的一个参数，字符串第一个元素不要忘了是分隔符'/'，其实这个代表的是根。路由配置十分简单，几分钟就能搞定。

       主要是在index.html里面，route.js这个文件应该放在其他js之前，也就是说，route.js调用的controller要放在route.js后面，否则按序加载时会找不到其他的js文件。当然每次都应该要记得新建一个js都立即添加到index.html。这里我也出现过很多此问题。否则可能会出现XX is not a function 的错误。

2.$scope绑定的数据能在html和js间传递

   主要使用的有$scope.var = var_value; $scope.fn = function(params1,params2){//specific realizaion};

   这样的话，定义的变量或函数即可在页面上使用，如

   

    
     $scope.back_to_activities_list = function () {            $location.path('/activities_list');        };
    

页面上即可使用：

    
     
      
       
        back_to_activities_list()"                    ng-show="!is_list_null">                返回
       
      
     
    

变量的使用同理

3.ng-xx在controller和其对应的html之间数据是双向绑定的

   也就是说，只要一个地方更新了数据，另一个使用的地方就会即时更新。

   主要使用的有ng-model,ng-click,ng-disabled,ng-switch,ng-show,ng-repeat等。

   ng-model一般将文本输入绑定到一个变量上，这个变量的数据即文本数据，最重要的一点是：如果文本输入有任何变动，可以立刻通过读取这个变量来获得。意思是：文本内容会随时被检测。如下：

其他的同理操作。数据双向绑定是十分方便的。

4.URL传递参数也是十分简单的

   1.路由配置时这样写：

    
     .when('/activities_list/:activityId',{                templateUrl: 'views/activities_list.html',                controller: 'ActivitiesListController'            })
    

注意到/:activityId了吧，这里就是传递的参数，也就是通过一个页面跳转到另一个页面时带过去的一个你需要的值，当然后面可以跟很多参数。

然后在另一个页面对应的js文件里，给function添加一个$routeParams服务，即：

    
     app.controller('ActivitiesListController',function($scope,$routeParams,$location){
    

然后activityId会被绑定到$routeParams上，使用时：

    
       $scope.activityId = $routeParams.activityId;
    

这样你就可以使用前一个页面带过来的参数了。当然，你使用时只需要提取$routeParams.activityId即可。

5.双大括号{

{}}

  双打括号用在html中时，AngularJS会对其中的表达式进行运算，如果里面是函数，同理会执行这个函数。

如上文的input的ng-model绑定了activity_name这个变量，那么在p标签中间这样写：

    
     
      {
    {activity_name}}
      
     
    

就会实时显示您输入的文字；

还有喔，这个我感觉是神器：

当你在某种条件下才调用一个css 时，可以通过ng-switch，但是也可以更简单：

    
     class="well clearfix btn-primary {
    {set_yellow(activity)}}"
    

这里的set_yellow会根据情况返回一个字符串，这样的话，这里的class就可以动态加载了。set_yellow函数很简单：

    
     $scope.set_yellow = function(activity){            if( $scope.active_activity == activity )            {                return 'yellow-list';            }            else            {                return ' ';            }        };
    

说起来其实这是一种构造字符串的方法，还有其他的技巧。比如你在传递参数的时候都是写的'/create_activity'之类的，如果你要传递一个变量呢，这个时候不能直接将你的变量名放在字符串中，否则会被解析会普通的字符，应该是

    
     $location.path('/create_activity/'+$scope.activityId);
    

顺便说一下，ng-model=''XX''这里的引号是必须的，虽然不用引号也能加载正确，但是写法是不符合原则的。

总之，第一章非常简单，相信大家都会有所收获。