如何模块化的组织AngularJS的代码

最新推荐文章于 2018-07-24 15:50:01 发布

遛狗的代码

最新推荐文章于 2018-07-24 15:50:01 发布

阅读量1.2k

点赞数

分类专栏： AngularJS 文章标签：模块化 AngularJS

本文链接：https://blog.csdn.net/Brave_Coder/article/details/51111514

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

刚开始学AngularJS的时候，觉得模块这个东西很拽，但是学了路由之后，会导致一个js文件里面放置了很多JS代码，如果程序的代码量再继续扩大，那么，AngularJS的代码就会变得难以维护了。那么此时，我们就需要对我们的代码进行模块化组织了：

Index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/AngularFiles/app.js"></script>
    <script src="~/AngularFiles/controllers.js"></script>
    <script src="~/AngularFiles/ServiceModule.js"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#/"><i class="fa fa-home"></i> 雅安校区</a></li>
                    <li><a href="#/about"><i class="fa fa-shield"></i> 成都校区</a></li>
                    <li><a href="#/contact"><i class="fa fa-comment"></i> 都江堰校区</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <div id="main">
        <div ng-view></div>
    </div>
</body>
</html>

app.js,程序的入口，就相当于我们C语言的Main函数。

(function () {
    'use strict';
    var myApp = angular.module('myApp', ['ngRoute', "controllersModule"]);//申明对controllers的依赖

    //配置路由
    myApp.config(["$routeProvider", function ($routeProvider) {
        $routeProvider
          //home
          .when('/', {
              templateUrl: '/Template/home.html',
              controller: 'mainController'
          })
          //about
          .when('/about', {
              templateUrl: '/Template/about.html',
              controller: 'aboutController'
          })
          //contact
          .when('/contact', {
              templateUrl: '/Template/contact.html',
              controller: 'contactController'
          });
    }]);
}())

controller.js，这里我们主要将所有的控制器代码放置到一个文件下面，便于日后的管理和维护。

(function () {
    'use strict';
 var app = angular.module("controllersModule", ["common"]);//声明对common模块的依赖
    app.controller('mainController', ["$scope", "MathService", "$http", function ($scope, MathService, $http) {
        // create a message to display in our view
        $scope.message = '四川农业大学（Sichuan Agricultural University）简称“四川农大”，是由四川省人民政府主管的一所以生物科技为特色、农业科技为优势，农、理、工、经、管、医、文、教、法、艺多学科协调发展的重点大学，是国家“211工程”重点建设院校之一，入选“111计划[1]  “、“卓越农林人才教育培养计划”、“援疆学科建设计划”、“国家建设高水平大学公派研究生项目”，是国家“973计划”承担高校，“四川2011计划”高校[2]  ，是全国首批高等学校新农村发展研究院[3]  试点单位，是中华人民共和国教育部与四川省人民政府共建的省部共建大学，[4]  四川省首批人才优先发展试验区2所试点高校之一， [5]  具备自主招生资格[6]  。';
        $scope.img_path = "/IMG/ya.jpg";
        $scope.add = MathService.add;
    }]);
    //about控制器
    app.controller('aboutController', ["$scope", "$location", function ($scope, $location) {
        $scope.img_path = "/IMG/cd.jpg";
        $scope.message = '学校最早起源于1906年（清光绪三十二年）在成都创办的“四川通省农业学堂”，学校前身为原四川大学农学院。1956年，四川大学农学院迁往雅安独立办学，定名“四川农学院”；1985年，学校更名为四川农业大学。';
    }]);
    //contact控制器
    app.controller('contactController', ["$scope", "$location", function ($scope, $location) {
        $scope.img_path = "/IMG/djy.jpg";
        $scope.message = '截止2015年7月，学校拥有三个校区，分别位于雅安市雨城区（校本部校区）、成都市温江区（成都校区）和都江堰市（都江堰校区），校园总面积约4500亩；全日制在校生37000余人，其中：本科生32000余人，硕士和博士研究生近4000人。同时学校在成都市崇州市建有占地2300余亩的现代农业研发基地，在四川农业大学邛崃现代农业专家大院示范基地安置有我国第二台（世界第三台）毫米波扫描昆虫雷达。';
    }]);
}())

Servicer.js，主要包括服务的各种代码.

(function () {
    'use strict';
    var app = angular.module('common', []);
    app.factory("MathService", function () {
        var add = function (x, y) {
            return x + y;
        }
        var minus = function (x, y) {
            return x - y;
        }
        var multiply = function (x, y) {
            return x * y;
        }
        var divide = function (x, y) {
            if (y == 0) {
                throw Error;
            }
            return x / y;
        }
        return {
            add: add,
            minus: minus,
            multiply: multiply,
            divide: divide
        }
    });
})()

如果还有各种filters，也是按照这个道理组织。

经过这样处理之后的代码，就变得井井有条了，以后无论我们的业务逻辑怎样扩展，我们的程序照样可以很好的组织。

TIPS:

1.在AngularJS中建议大家使用立即函数，即:

(function () {
    //angularjs代码
}())

2.希望大家在写AngularJS代码的时候启用JavaScript的严格模式，这样可以避免一些不必要的错误。

3.在编写模块的时候，希望大家采用第二种方式书写，这样可以避免在代码压缩的时候，AngularJS报错：

不推荐的做法:

app.controller('aboutController',  function ($scope, $location) {
        $scope.img_path = "/IMG/cd.jpg";
        $scope.message = '学校最早起源于1906年（清光绪三十二年）在成都创办的“四川通省农业学堂”，学校前身为原四川大学农学院。1956年，四川大学农学院迁往雅安独立办学，定名“四川农学院”；1985年，学校更名为四川农业大学。';
    });

推荐的做法:

app.controller('mainController', ["$scope", "MathService", "$http", function ($scope, MathService, $http) {
        // create a message to display in our view
        $scope.message = '四川农业大学（Sichuan Agricultural University）简称“四川农大”，是由四川省人民政府主管的一所以生物科技为特色、农业科技为优势，农、理、工、经、管、医、文、教、法、艺多学科协调发展的重点大学，是国家“211工程”重点建设院校之一，入选“111计划[1]  “、“卓越农林人才教育培养计划”、“援疆学科建设计划”、“国家建设高水平大学公派研究生项目”，是国家“973计划”承担高校，“四川2011计划”高校[2]  ，是全国首批高等学校新农村发展研究院[3]  试点单位，是中华人民共和国教育部与四川省人民政府共建的省部共建大学，[4]  四川省首批人才优先发展试验区2所试点高校之一， [5]  具备自主招生资格[6]  。';
        $scope.img_path = "/IMG/ya.jpg";
        $scope.add = MathService.add;
    }]);

遛狗的代码

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何模块化的组织AngularJS的代码

刚开始学AngularJS的时候，觉得模块这个东西很拽，但是学了路由之后，会导致一个js文件里面放置了很多JS代码，如果程序的代码量再继续扩大，那么，AngularJS的代码就会变得难以维护了。那么此时，我们就需要对我们的代码进行模块化组织了：Index.html
复制链接

扫一扫