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，可以定位到目标文件。

Angularjs的工程化的更多相关文章

  1. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  2. 阿里云无线&前端团队是如何基于webpack实现前端工程化的

    背景 前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,ang ...

  3. 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

    内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...

  4. 从AngularJS2谈到前台开发工程化

    才刚刚对AngularJS有些了解,又听闻AngularJS2早就铺天盖地了,AngularJS3刚刚夭折,AngularJS4今年已经发布了,还是学习先下AngularJS2吧,据说更加适合以移动为 ...

  5. 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)

    "手动是不可能手动的了,这辈子都不可能手动的了." 一.目标 上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...

  6. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  7. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  8. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  9. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  10. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

随机推荐

  1. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  2. 对于python中“FileNotFoundError: [Errno 2] No such file or directory”的解决办法

    在我们使用vscode运行Python代码时遇到的情况 一.出现原因:这里是由于Vscode中,python里的路径是相对与工作目录来进行定位的.所以在多级目录情况下,若不设置绝对路径,往往找不到相应 ...

  3. java-代码编写规范

    命名 变量/方法:小驼峰. mBtnHelloWorld 控件 mBtnTest: 按键 mTvTest:文本

  4. java反序列化漏洞cc_link_one

    CC-LINK-one 前言 这里也正式进入的java的反序列化漏洞了,简单介绍一下CC是什么借用一些官方的解释:Apache Commons是Apache软件基金会的项目,曾经隶属于Jakarta项 ...

  5. 嵌入式-C语言基础：字符串strlen和sizeof的区别

    strlen表示的实际的字符串长度,不会把字符串结束符'\0'计算进去,而sizeof则不是实际的字符串长度,它会把字符串的结束标识符'\0'也包含进去. #include<stdio.h> ...

  6. 2022春每日一题：Day 40

    题目:[NOI2010] 超级钢琴 前求出美妙值的前缀和,然后倍增处理一下前缀和的最大值,然后对于一个左端点s,他能取到右端点的只有s+l到s+r,而他的最大贡献就是s+l 到s+r的最大子段和,因此 ...

  7. C++初阶（运算符重载汇总+实例）

    运算重载符 概念: 运算符重载是具有特殊函数名的函数,也具有其返回值类型,函数名字以及参数列表,其返回值类型与参数列表与普通的函数类似. 函数原型: 返回值 operator操作符(参数列表) 注意: ...

  8. 【DL论文精读笔记】ResNet

    Abstract 利用残差学习架构释放深度 152层深度是VGG的8倍,且复杂度更低 ImageNet上的错误率3.57% 在ILSVRC和2015COCO竞赛,在多项任务拿到第一 3.1 Intro ...

  9. [排序算法] 快速排序 (C++) (含三种写法)

    快速排序解释 快速排序 Quick Sort 与归并排序一样,也是典型的分治法的应用. (如果有对 归并排序还不了解的童鞋,可以看看这里哟~ 归并排序) 快速排序的分治模式 1.选取基准值,获取划分位 ...

  10. Easy-Classification-分类框架设计

    1. 框架介绍 Easy-Classification是一个应用于分类任务的深度学习框架,它集成了众多成熟的分类神经网络模型,可帮助使用者简单快速的构建分类训练任务. 框架源代码:https://gi ...