Angularjs的工程化

  • Angularjs的工程化已关闭评论
  • 115 次浏览
  • A+
所属分类：Web前端
摘要

在编写项目时可能需要加载很多js文件，若b.js依赖a.js，且a.js比b.js大很多，那么浏览器会让b.js等待a.js加载完毕后再去执行b.js里的内容；而即使d.js并不依赖a.js，b.js，c.js，也会等待这三个文件均加载完毕才执行，为了让浏览器能够按需加载，提出了模块化管理工具。
便宜好用的国外VPS推荐

Angularjs的工程化

AMD规范和CMD规范

为什么需要模块化管理工具

在编写项目时可能需要加载很多js文件，若b.js依赖a.js，且a.js比b.js大很多，那么浏览器会让b.js等待a.js加载完毕后再去执行b.js里的内容；而即使d.js并不依赖a.js，b.js，c.js，也会等待这三个文件均加载完毕才执行，为了让浏览器能够按需加载，提出了模块化管理工具。

<script type="text/javascript" src="js/a.js"></script> <script type="text/javascript" src="js/b.js"></script> <script type="text/javascript" src="js/c.js"></script> <script type="text/javascript" src="js/d.js"></script>

AMD规范

全称为Asynchronous Module Defined，即异步模块管理，它通过使用依赖注入等方法完整描述了模块的定义、依赖关系、引用关系以及加载机制，AngularJS、RequireJS均是符合AMD规范的。

define函数

函数中有三个参数，前两个参数可以省略，第三个参数是模块的具体实现本身。 当define函数执行时，它首先会异步调用第二个参数中列出的依赖模块，当所有的模块被载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也通知了依赖于自己的模块自己已经可用。

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);  其中： module-name: 模块标识，可以省略。 array-of-dependencies: 所依赖的模块，可以省略。 module-factory-or-object: 模块的实现，或者一个JavaScript对象。

下面代码定义了一个alpha模块，并且依赖于内置的require，exports模块，以及外部的beta模块。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {     exports.verb = function() {     return beta.verb();     }; });

案例

项目结构

案例
│ test.html
│
└─js
│ main.js
│ math.js
│ pi.js
│
└─lib
require.js

项目代码
test.html
<!DOCTYPE html> <html> <head> 	<title>RequireJS学习</title> </head> <body>     <script data-main="js/main.js" src="js/lib/require.js"></script>     <!-- main.js是主入口文件 --> </body> </html>
main.js
requirejs.config({ 	baseUrl: 'js',  //所有js程序的根目录 	paths: { 		//别名 		"math": "math" 	} });  requirejs(["math"], 	function(math){ alert(math.squre(8)); alert(math.area(10)); 	}); alert("hello");
math.js
define(["pi"], function(pi){ 	alert("我是math"); 	return { 		"squre": function(number){ 			return number * number; 		}, 		"area": function(r){ 			return pi.pi * r *r; 		} 	}; });
pi.js
define({ 	"pi": 3.1415926 })
项目说明

  • 在html文件中引包时需要同时指定require.js文件和main.js文件；

  • main.js是主入口文件，只有主入口main.js能用requirejs，其他入口只能用define；

  • math.js用define定义模块，模块暴露的API用return返回；

  • main.js中如果有语句不需要依赖别人的语句，可以不写在回调函数里面，而现在很少有机会不在回调函数中写语句，即AMD和CMD越来越像。

CMD规范

全称为Common Module Defined，即普通模块管理，其执行过程是懒式的。NodeJS、SeaJS、CommonJS、webpack均是符合CMD规范的。

define函数

define(function(require, exports, module) {         // 模块定义在此   });

AngularJS的工程化

angular-async-loader

angular-async-loader可以轻松解决ReuqireJS和AngularJS之间的粘合问题。angular-async-loader官网

安装前端依赖

大体思路就是用RequireJS配置AngularJS项目，配置步骤如下。

  • 进入项目文件夹，在命令行窗口执行下列指令，创建bower前端依赖文件。

    bower init

  • 创建.bowerrc文件并进行配置（先创建一个空文档，再在命令行用rename重命名为.bowerrc），配置内容如下，配置后，用bower下载的模块会生成在assets文件夹下。

    { 	"directory" : "assets" }

  • 安装AngularJS。

    bower install angular --save

  • 安装ui-router。

    bower install angular-ui-router --save

  • 安装RequireJS。

    bower install requirejs --save

  • 安装angular-async-loader。

    bower install angular-async-loader --save

书写三大文件

三大文件为app-routes.js、app.js、bootstrap.js。

在项目根目录下分别创建ngApp文件夹、app-routes.js、app.js、bootstrap.js、index.html文件。

bootstrap.js

bootstrap.js是RequireJS的入口文件。

require.config({     baseUrl: '/',     //别名     paths: {         'angular': 'assets/angular/angular.min',         'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',         'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min'     },     //声明paths中元素暴露的接口和依赖     shim: {         'angular': {exports: 'angular'},  //暴露的是angular         'angular-ui-router': {deps: ['angular']}  //依赖的是angular     } }); //核心入口 require(['angular', './app-routes'], function (angular) {     //当整个文档就绪之后     angular.element(document).ready(function () {         //angular.bootstrap是一个方法，表示启动angular         angular.bootstrap(document, ['myapp']);         //通过类名添加ng-app指令，也可以通过attr来添加         angular.element(document).find('html').addClass('ng-app');     }); });

app.js

app.js中创建了app对象。

define(function (require, exports, module) {     //这是一个CMD规范的模块，模块的作用是向外暴露app整体     //AMD只能向外暴露json形式的API      //引入依赖     var angular = require('angular');     var asyncLoader = require('angular-async-loader');      require('angular-ui-router');      //创建app对象，app对象依赖ui.router     var app = angular.module('app', ['ui.router']);      // initialze app module for angular-async-loader     asyncLoader.configure(app);     //向外暴露     module.exports = app; });

app-routes.js

app-routes.js中定义了路由，这里采用了连续依赖，bootstrap.js依赖app-routes.js，app-routes.js依赖app.js。

define(function (require) {     //引入app对象     var app = require('./app');     //定义路由     app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {         $urlRouterProvider.otherwise('/home');          $stateProvider             .state('home', {                 url: '/home',                 template: '<h1>我是首页！</h1>'             });     }]); });

index.html

index.html是唯一的单页面，但不表示只存在一个html页面，其他页面可作为模板存在，在index.html文件中创建一个ui-view容器，然后用RequireJS语法引用入口文件bootstrap.js。

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" /> 	<title> 		测试系统 	</title> </head> <body>     <ui-view></ui-view>          <script type="text/javascript" src="assets/requirejs/require.js" data-main="bootstrap.js"></script> </body> </html>

ngApp

ngApp里可根据场景创建相应文件夹，存放编写控制器、服务和指令等内容的js文件。此处创建root文件夹和home文件夹。

root
RootCtrl.js
define(function (require) {     var app = require('app');     require('./rootService');     // dynamic load services here or add into dependencies of ui-router state config     // require('../services/usersService');      app.controller('RootCtrl', ['$scope', 'rootService', function ($scope, rootService) {         this.a = rootService.m;     }]);  });
rootService.js
define(function (require) {     var app = require('app');      // dynamic load services here or add into dependencies of ui-router state config     // require('../services/usersService');      app.factory("rootService", function () {         return {             m : 9         }     });  });
template.html
<div>   <header>     <h1>我是root的template文件</h1>     {{rootCtrl.a}}     <nav>       <a ui-sref="root.home" ui-sref-active="cur">首页</a>     </nav>   </header>   <ui-view> </ui-view>   <footer>我是footer</footer> </div>

home

HomeCtrl.js
define(function (require) {     var app = require('app');     require('jquery');  //var $ = require('jquery');为什么不用变量接收，因为jquery的原理就是给window对象添加属性     require('jquery-ui');     app.controller('HomeCtrl', [function () {         this.a = 100;         $('.box').animate({ 'font-size': 100 }, 1000, function () {             $(this).css("color", "red");             $(this).draggable();         });     }]);      });
template.html
<div>   <h1>我是首页。{{homeCtrl.a}}</h1>   <div class="box">你好</div> </div>

jquery的引用

法一：

最简单的方法就是在index.html上引用，这样可以在全局上使用$函数，缺点是不管页面是否使用jquery，总是先会加载完毕。

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>测试系统</title>     <link rel="stylesheet" href="css/root.css" />   </head>   <body>     <ui-view></ui-view>     <script       type="text/javascript"       src="/assets/jquery/dist/jquery.min.js"     ></script>     <script       type="text/javascript"       src="/assets/requirejs/require.js"       data-main="bootstrap.js"     ></script>   </body> </html>

法二：

也可以在bootstrap.js上起一个别名，使用RequireJS加载jquery。

require.config({     baseUrl: '/',     //别名     paths: {         'angular': 'assets/angular/angular.min',         'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',         'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',         'jquery': 'assets/jquery/dist/jquery.min'     },     //声明paths中元素暴露的接口和依赖     shim: {         'angular': {exports: 'angular'},  //暴露的是angular         'angular-ui-router': { deps: ['angular'] },  //依赖的是angular         'jquery': {exports: 'jquery'}  //暴露的是jquery     } });

然后在需要使用jquery的控制器中写入如下代码。

define(function (require) {     var app = require('app');     var jquery = require('jquery');     app.controller('HomeCtrl', [function () {         jquery('.box').animate({ 'font-size': 100 }, 1000);     }]);      });

若要引入jquery的插件，需要bower下载jquery-ui，然后改变bootstrap.js

require.config({     baseUrl: '/',     //别名     paths: {         'angular': 'assets/angular/angular.min',         'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',         'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',         'jquery': 'assets/jquery/dist/jquery.min',         'jquery-ui': 'assets/jquery-ui/jquery-ui.min'     },     //声明paths中元素暴露的接口和依赖     shim: {         'angular': {exports: 'angular'},  //暴露的是angular         'angular-ui-router': { deps: ['angular'] },  //依赖的是angular         'jquery': {exports: 'jquery'},  //暴露的是jquery         'jquery-ui': { deps: ['jquery'] },  //依赖的是jquery     } });

在控制器中写入如下代码。

define(function (require) {     var app = require('app');     var $ = require('jquery');     require('jquery-ui');     app.controller('HomeCtrl', [function () {         this.a = 100;         $('.box').animate({ 'font-size': 100 }, 1000, function () {             $(this).css("color", "red");             $(this).draggable();         });     }]);      });

项目结构

项目
│ app-routes.js
│ app.js
│ bootstrap.js
│ index.html
│
├─assets
│ ├─angular
│ ├─angular-async-loader
│ ├─angular-ui-router
│ ├─jquery
│ ├─jquery-ui
│
├─css
│ root.css
│
└─ngApp
├─home
│ HomeCtrl.js
│ template.html
│
└─root
RootCtrl.js
rootService.js
template.html

注：在项目中使用ctrl+p，可以定位到目标文件。

便宜好用的国外VPS推荐