（2）前端AngularJS项目party_bid的第一部分总结

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

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

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所引用的一样。

路由配置像这样子：

<span style="font-size:12px;"><span style="font-size:10px;">'use strict';

angular
    .module('ActivityMasterApp',[
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute'
    ])
    .config(function ($routeProvider){
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainController'
            })
     <span style="white-space:pre">	</span>    //当然还有其他页面
            .otherwise({
                redirectTo: '/'
            });
</span></span>

这里刚刚写的时候最好参照着人家的写，否则会在细节上出问题。注意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};

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

   

<span style="font-size:12px;">$scope.back_to_activities_list = function () {
            $location.path('/activities_list');
        };</span>

页面上即可使用：

<span style="font-size:12px;"><span style="font-size:10px;"><button class="btn  btn-primary  header-left"
                    ng-click="<span style="color:#ff0000;">back_to_activities_list()</span>"
                    ng-show="!is_list_null">
                返回
</button></span></span>

变量的使用同理

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

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

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

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

<span style="font-size:12px;"><input class="well input-size" ng-model="activity_name"/></span>

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

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

   1.路由配置时这样写：

<span style="font-size:12px;">.when('/activities_list/:activityId',{
                templateUrl: 'views/activities_list.html',
                controller: 'ActivitiesListController'
            })</span>

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

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

<span style="font-size:12px;">app.controller('ActivitiesListController',function($scope,$routeParams,$location){</span>

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

<span style="font-size:12px;">  $scope.activityId = $routeParams.activityId;</span>

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

5.双大括号{{}}

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

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

<span style="font-size:12px;"><p class="p-left">{{activity_name}}</p></span>

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

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

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

<span style="font-size:12px;">class="well clearfix btn-primary {{set_yellow(activity)}}"</span>

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

<span style="font-size:12px;">$scope.set_yellow = function(activity){
            if( $scope.active_activity == activity )
            {
                return 'yellow-list';
            }
            else
            {
                return ' ';
            }
        };</span>

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

<span style="font-size:12px;">$location.path('/create_activity/'+$scope.activityId);</span>

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

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