angular+require前端項目架構搭建

app //應用入口

directive //自定義指令

require-main //require的主配置文件  存放公共調用的js

service //請求後端數據公有類

controllers全部ctrl文件

  |--fun //存放公有ctrl 例如上傳邏輯ctrl

---

 

require-main.js

requirejs.config({
    baseUrl: '/',
    paths: {
        'jquery': '/lib/jquery/1.9.1/jquery.min',
        'angular': '/lib/angular/angular.min',
        'angular-file-upload': '/lib/angular/angular-file-upload',

        'app': '/js/angular-base/app',
        'directive': '/js/angular-base/directive',
        'services': '/js/angular-base/services',
        'uploadCtrl': '/js/angular-base/controllers/fun/uploadCtrl',
        'explainCheckListCtrl': '/js/angular-base/controllers/explainCheckListCtrl',
        'storyCheckListCtrl': '/js/angular-base/controllers/storyCheckListCtrl',
        'explainOrderListCtrl': '/js/angular-base/controllers/explainOrderListCtrl',
        'payOrderListCtrl': '/js/angular-base/controllers/payOrderListCtrl'
    },
    shim: {
        'angular': {
            deps: ["jquery"],
            exports: 'angular',
        },
        'angular-file-upload': {
            deps: ["angular"],
            exports: 'angular-file-upload'
        }
    }
});


requirejs([
    'angular',
    'jquery',
    'angular-file-upload',
    'app',
    'services',
    'directive',
    'uploadCtrl'
], function (angular) {
    console.log('angular.bootstrap(document, ["ljkjApp"]);  ok !');
    angular.bootstrap(document, ["ljkjApp"]);
});

app.js

define(['angular'], function (angular) {
    /*
        author:zzd
        description:angularJs common module
    */
    var app = angular.module("ljkjApp", ['angularFileUpload']);
    app.value("pageIndex", 1);
    app.value("pageSize", 10);
    app.constant("configParam", "constant value");
    /*
        author:zzd
        description:config $location request param
    */
    app.config(function ($locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            rewriteLinks: false
        }).hashPrefix('!');
    });

    return app;
});

service.js

define(['angular', 'app'], function (angular, app) {
    /*
        author:zzd
        description:http request
    */
    app.factory('ljkjHttp', function ($http, $log, $q) {
        return {
            paramData: {
                "cmd": "VisitnetWork",
                "param": "",
                "Name": "",
                "function": "",
                "languageId": "1",
                "downLoadCmd": "{4}",
                "timeout": 60000 * 10
            },
            get: function () {
                // the $http API is based on the deferred/promise APIs exposed by the $q service
                // so it returns a promise for us by default

                //避免引用變量重置
                var sendParams = angular.copy(this.paramData);
                return $http.post("/Handler/YjlyHandler.ashx", sendParams, { timeout: sendParams.timeout, params: sendParams })
                      .then(function (response) {
                          if (typeof response.data === 'object') {
                              switch (response.data.state.toString()) {
                                  case '1'://error info
                                      $log.error(response.data.msg);
                                      $log.error(response.data.ErrorInfo);
                                      break;
                                  case '6'://login invalid
                                      layer.alert(response.data.msg, { icon: 2 }, function (index) {
                                          window.open('/', '_top');
                                      });
                                      break;
                              }
                              // success response
                              return $q.resolve(response.data);
                          } else {
                              // invalid response
                              return $q.reject(response.data);
                          }
                      }, function (response) {
                          // something went wrong
                          $log.error(response);
                          return;
                      });
            }
        };
    });
});

ctrl.js  示例代碼

define(['angular', 'app', 'jquery'], function (angular, app, $) {
    app.controller('homeCtrl', function (ljkjHttp, $scope, $location, $q) {
        //Banner 加載完成後執行代碼
        $scope.$on('ngRepeatFinishedEvent', function (ngRepeatFinishedEvent) {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                // 若是須要分頁器
                pagination: '.swiper-pagination'
            });
        });

        //經過id選擇本地圖標
        var getIcon = function (id, TemplateID) {
            var icon = "";
            TemplateID = TemplateID == 1 ? "" : TemplateID;
            switch (id) {
                case 1:
                    icon = "img/jiangjie" + TemplateID + ".png";
                    break;
                case 2:
                    icon = "img/huodong" + TemplateID + ".png";
                    break;
                case 3:
                    icon = "img/zixun" + TemplateID + ".png";
                    break;
                case 4:
                    icon = "img/pinglun" + TemplateID + ".png";
                    break;
                case 5:
                    icon = "img/ditu" + TemplateID + ".png";
                    break;
                case 6:
                    icon = "img/shipin" + TemplateID + ".png";
                    break;
                case 7:
                    icon = "img/meishi" + TemplateID + ".png";
                    break;
                case 8:
                    icon = "img/zhusu" + TemplateID + ".png";
                    break;
                case 9:
                    icon = "img/WIFI" + TemplateID + ".png";
                    break;
                case 10:
                    icon = "img/daolantu" + TemplateID + ".png";
                    break;
            }
            return icon;
        }

        var initBanner = function () {
            ljkjHttp.paramData.param = {
                Sid: $location.search().id
            };
            ljkjHttp.paramData.Name = "IFrAppBannerList";//version
            ljkjHttp.paramData.function = "FrOfficialWeb";//cmd
            ljkjHttp.get()
                .then(function (resData) {
                    if (resData.state == 0) {
                        $scope.banners = angular.fromJson(resData.value);
                    }
                });
        }

        var initModel = function (TemplateID) {
            ljkjHttp.paramData.param = {
                Sid: $location.search().id
            };
            ljkjHttp.paramData.Name = "IFrAppModularList";//version
            ljkjHttp.paramData.function = "FrOfficialWeb";//cmd
            ljkjHttp.get()
                .then(function (resData) {
                    if (resData.state == 0) {
                        $scope.models = angular.fromJson(resData.value);
                        for (var item in $scope.models) {
                            $scope.models[item]["icoUrl"] = getIcon($scope.models[item].ModularId, TemplateID);
                        }
                    }
                });
        }

        var initTemplate = function () {
            var delay = $q.defer();
            ljkjHttp.paramData.param = {
                Sid: $location.search().id
            };
            ljkjHttp.paramData.Name = "IFrGetTemplateBySid";//version
            ljkjHttp.paramData.function = "FrOfficialWeb";//cmd
            ljkjHttp.get()
                .then(function (resData) {
                    if (resData.state == 0) {
                        var obj = angular.fromJson(resData.value);
                        //微信瀏覽器中修改title
                        document.title = obj[0].Name;
                        var $body = $('body');
                        var $iframe = $('<iframe src="/favicon.ico"></iframe>');
                        $iframe.on('load', function () {
                            setTimeout(function () {
                                $iframe.off('load').remove();
                            }, 0);
                        }).appendTo($body);
                        delay.resolve(obj[0].TemplateID);
                    }
                }, function (error) {
                    delay.reject(error);
                });
            return delay.promise;
        }
        initBanner();
        initTemplate().then(function (res) {
            $scope.TemplateID = res;
            initModel($scope.TemplateID);
        });
    });
});

每個html頁面只須要引入自身 ctrl js文件便可

 <script>
        require([
            'controllers/explainCheckListCtrl'
        ]);
</script>