基於angularJs重構一個基於jquery的項目

前言

公司裏面的項目全部都是基於jquery庫的，講真的，jquery真的是腳本中的鴉片，一旦碰上真是難以戒掉，像我在學校讀書的時候也沒有多瞭解外面有哪些比較牛逼比較高大上的js插件，原生腳本學的差不多就立馬用jquery，導致現在很懶用原生寫腳本，總覺得jquery是在是太方便了，滿足了公司項目很多需求。後來接觸到angularJs，突然覺得jquery簡直是拿不上臺面，不過我個人還是很喜歡jquery的，畢竟陪伴了我很多年的時光哇哇，自己寫的插件也幾乎都是基於jquery的。不過最近看網上公司的招聘要求，發現外面個個都要求angularJS的了，我的天哪，外面的技術都這麼與時俱進了都換框架了嗎。。雖然我知道很多公司就是掛羊頭賣狗肉而已，生產環境根本用不到，但是最近angular也接觸的差不多了，就把自己曾經的一個項目用angular差不多重構一下。也體驗一下angular帶來的爽快感覺~~~ok，let’s go.

項目前期搭建

網上教程有各種各樣的項目搭建方式，一開始我也是跟很多人做的用grunt自動化構建工具，但是在window下各種各樣的問題實在是太多了，想想自己的項目又不大，就乾脆自己手動構建好了，不過後臺看到github上有現成的angular seed，就直接clone下來用了，省去自己想着怎麼分割各種模塊，更加省事。
如下圖

圖片目錄很明顯了。js裏面放各種腳本模塊，json文件裏面保存本地json，lib裏面放着引用到的各種庫，partials裏面放着一些獨立的html文件，由後面配置的路由來讓他們引進去的頁面。
index則是項目的入口文件。

數據渲染

首頁-數據初始化

控制器

angular.module('xyy.controllers', [])
    .controller('proListController', function($scope,$http) {
        $scope.s = function(e){
            return e.substring(0,1);
        }
        $http.post('json/proList')
            .success(function(data){
                if(data.result == 1){
                    $scope.proList = data.data;
                }
            })
    })

視圖

<div class="main index-pg pd-b">
    <header class="short-hd clearfix">
        <div class="fl" id="list-menu"><i class="bg list-icon"></i></div>
        <strong>項目列表</strong>
    </header>
    <article class="list-container">
        <a href="#/detail" ng-repeat="x in proList">
            <section class="list-box">
                <section class="name pr">
                    <i class="ads-bg pa">{{x.city | subFirst}}</i>
                    <h2 class="one-line">{{x.name}}</h2>
                    <p>{{x.projectNum}}</p>
                    <i class="arrow-r pa bg"></i>
                </section>
                <section class="progress">
                    <p>當前階段：<strong>{{x.stage}}</strong></p>
                    <div class="progress-bar pr fl">
                        <div class="blue pa" style="width:{{x.progress}}%"></div>
                    </div>
                    <div class="fr"><strong>{{x.progress}}%</strong></div>
                </section>
            </section>
        </a>
    </article>
    <footer-directive></footer-directive>
</div>

其中<footer-directive>是公用的組件，因爲很多頁面都有這個底部條的存在，就把他獨立出來放到directive模塊上

angular.module('xyy.directives', [])
    .directive('footerDirective',function(){
        return{
            restrict:'E',
            template:'<footer class="menu-bar clearfix">'+
                          '<a href="#/index"><div><i class="bg"></i><p>項目</p></div></a>'+
                          '<a href="#/toDeal"><div><i class="bg"></i><p>待辦事項</p></div></a>'+
                          '<a href="#/personal"><div><i class="bg"></i><p>我的</p></div></a>'+
                      '</footer>'
        }
    })//底部菜單欄

其中subFirst 自己定義的一個過濾器

angular.module('xyy.filters', [])
    .filter('subFirst',function(){
        return function(input){
            return input.substring(0,1);
        }
    })

截取城市的第一個字，總感覺這種方法有點小題大做，之前想用過濾器一個內置的方法limitTo 來實現，發現一直無效，但是看了網上很多文章都說能夠實現字符串截取的過濾，但是自己卻不行，後來跑去看了angular的源碼，發現了

function limitToFilter(){
  return function(array, limit) {
    if (!(array instanceof Array)) return array;
    limit = int(limit);
    var out = [],
      i, n;

    // check that array is iterable
    if (!array || !(array instanceof Array))
      return out;

只接受數組不接受字符串，可能我的版本有關係吧，下次找下其他版本看下是否支持字符串截取。
超鏈接<a href="#/detail" ng-repeat="x in proList"> 現在可以理解爲是異步跳轉，整個項目其實是單個頁面的，所有頁面的跳轉都是通過路由配置來實現

angular.module('xyy', ['xyy.filters', 'xyy.services', 'xyy.directives', 'xyy.controllers']).
  config(['$routeProvider', function($routeProvider) {
    //$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginController'});
    $routeProvider.when('/pro-list', {templateUrl: 'partials/pro-list.html', controller: 'proListController'});
    $routeProvider.when('/detail', {templateUrl: 'partials/detail.html', controller: 'detailController'});
    //$routeProvider.when('/addPro', {templateUrl: 'partials/addPro.html', controller: 'addProController'});
    $routeProvider.when('/detailCheck', {templateUrl: 'partials/detailCheck.html', controller: 'detailCheckController'});
    $routeProvider.when('/toDeal', {templateUrl: 'partials/toDeal.html', controller: 'toDealController'});
    $routeProvider.when('/personal', {templateUrl: 'partials/personal.html', controller: 'personalController'});
    $routeProvider.when('/editPerson', {templateUrl: 'partials/editPerson.html'});
    $routeProvider.when('/editPsw', {templateUrl: 'partials/editPsw.html'});
    $routeProvider.when('/peopleMng', {templateUrl: 'partials/peopleMng.html'});
    $routeProvider.otherwise({redirectTo: '/pro-list'});
  }]);

是不是覺得吊炸天，還有更驚人的，關於代碼量看下圖
用jquery時的代碼量

angular

我快愛上他了。。。