Angularjs的工程化

重装合成旅 發表於 2023-1-29 10:21:00

<h1 id="angularjs的工程化">Angularjs的工程化</h1>
<h2 id="amd规范和cmd规范">AMD规范和CMD规范</h2>
<h3 id="为什么需要模块化管理工具">为什么需要模块化管理工具</h3>
<p>在编写项目时可能需要加载很多js文件，若b.js依赖a.js，且a.js比b.js大很多，那么浏览器会让b.js等待a.js加载完毕后再去执行b.js里的内容；而即使d.js并不依赖a.js，b.js，c.js，也会等待这三个文件均加载完毕才执行，为了让浏览器能够按需加载，提出了模块化管理工具。</p>
<pre><code><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>
</code></pre>
<h3 id="amd规范">AMD规范</h3>
<p>全称为Asynchronous Module Defined，即异步模块管理，它通过使用依赖注入等方法完整描述了模块的定义、依赖关系、引用关系以及加载机制，AngularJS、RequireJS均是符合AMD规范的。</p>
<h4 id="define函数">define函数</h4>
<p>函数中有三个参数，前两个参数可以省略，第三个参数是模块的具体实现本身。当define函数执行时，它首先会异步调用第二个参数中列出的依赖模块，当所有的模块被载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也通知了依赖于自己的模块自己已经可用。</p>
<pre><code>define(, , );

其中：
module-name: 模块标识，可以省略。
array-of-dependencies: 所依赖的模块，可以省略。
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
</code></pre>
<p>下面代码定义了一个alpha模块，并且依赖于内置的require，exports模块，以及外部的beta模块。</p>
<pre><code>define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
};
});
</code></pre>
<h4 id="案例">案例</h4>
<h5 id="项目结构">项目结构</h5>
<p>案例<br>
│test.html<br>
│<br>
└─js<br>
│main.js<br>
│math.js<br>
│pi.js<br>
│<br>
└─lib<br>
require.js</p>
<h5 id="项目代码">项目代码</h5>
<h6 id="testhtml">test.html</h6>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>RequireJS学习</title>
</head>
<body>
<script data-main="js/main.js" src="js/lib/require.js"></script>

</body>
</html>
</code></pre>
<h6 id="mainjs">main.js</h6>
<pre><code>requirejs.config({
baseUrl: 'js',//所有js程序的根目录
paths: {
//别名
"math": "math"
}
});

requirejs(["math"],
function(math){
alert(math.squre(8));
alert(math.area(10));
});
alert("hello");
</code></pre>
<h6 id="mathjs">math.js</h6>
<pre><code>define(["pi"], function(pi){
alert("我是math");
return {
"squre": function(number){
return number * number;
},
"area": function(r){
return pi.pi * r *r;
}
};
});
</code></pre>
<h6 id="pijs">pi.js</h6>
<pre><code>define({
"pi": 3.1415926
})
</code></pre>
<h5 id="项目说明">项目说明</h5>
<ul>
<li>
<p>在html文件中引包时需要同时指定require.js文件和main.js文件；</p>
</li>
<li>
<p>main.js是主入口文件，只有主入口main.js能用requirejs，其他入口只能用define；</p>
</li>
<li>
<p>math.js用define定义模块，模块暴露的API用return返回；</p>
</li>
<li>
<p>main.js中如果有语句不需要依赖别人的语句，可以不写在回调函数里面，而现在很少有机会不在回调函数中写语句，即AMD和CMD越来越像。</p>
</li>
</ul>
<h3 id="cmd规范">CMD规范</h3>
<p>全称为Common Module Defined，即普通模块管理，其执行过程是懒式的。NodeJS、SeaJS、CommonJS、webpack均是符合CMD规范的。</p>
<h4 id="define函数-1">define函数</h4>
<pre><code>define(function(require, exports, module) {
   // 模块定义在此
});
</code></pre>
<h2 id="angularjs的工程化-1">AngularJS的工程化</h2>
<h3 id="angular-async-loader">angular-async-loader</h3>
<p>angular-async-loader可以轻松解决ReuqireJS和AngularJS之间的粘合问题。angular-async-loader官网</p>
<h3 id="安装前端依赖">安装前端依赖</h3>
<p>大体思路就是用RequireJS配置AngularJS项目，配置步骤如下。</p>
<ul>
<li>
<p>进入项目文件夹，在命令行窗口执行下列指令，创建bower前端依赖文件。</p>
<pre><code>bower init
</code></pre>
</li>
<li>
<p>创建.bowerrc文件并进行配置（先创建一个空文档，再在命令行用rename重命名为.bowerrc），配置内容如下，配置后，用bower下载的模块会生成在assets文件夹下。</p>
<pre><code>{
"directory" : "assets"
}
</code></pre>
</li>
<li>
<p>安装AngularJS。</p>
<pre><code>bower install angular --save
</code></pre>
</li>
<li>
<p>安装ui-router。</p>
<pre><code>bower install angular-ui-router --save
</code></pre>
</li>
<li>
<p>安装RequireJS。</p>
<pre><code>bower install requirejs --save
</code></pre>
</li>
<li>
<p>安装angular-async-loader。</p>
<pre><code>bower install angular-async-loader --save
</code></pre>
</li>
</ul>
<h3 id="书写三大文件">书写三大文件</h3>
<p>三大文件为app-routes.js、app.js、bootstrap.js。</p>
<p>在项目根目录下分别创建ngApp文件夹、app-routes.js、app.js、bootstrap.js、index.html文件。</p>
<h4 id="bootstrapjs">bootstrap.js</h4>
<p>bootstrap.js是RequireJS的入口文件。</p>
<pre><code>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');
});
});
</code></pre>
<h4 id="appjs">app.js</h4>
<p>app.js中创建了app对象。</p>
<pre><code>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;
});
</code></pre>
<h4 id="app-routesjs">app-routes.js</h4>
<p>app-routes.js中定义了路由，这里采用了连续依赖，bootstrap.js依赖app-routes.js，app-routes.js依赖app.js。</p>
<pre><code>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>'
         });
}]);
});
</code></pre>
<h4 id="indexhtml">index.html</h4>
<p>index.html是唯一的单页面，但不表示只存在一个html页面，其他页面可作为模板存在，在index.html文件中创建一个ui-view容器，然后用RequireJS语法引用入口文件bootstrap.js。</p>
<pre><code><!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>
</code></pre>
<h4 id="ngapp">ngApp</h4>
<p>ngApp里可根据场景创建相应文件夹，存放编写控制器、服务和指令等内容的js文件。此处创建root文件夹和home文件夹。</p>
<h5 id="root">root</h5>
<h6 id="rootctrljs">RootCtrl.js</h6>
<pre><code>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;
}]);

});
</code></pre>
<h6 id="rootservicejs">rootService.js</h6>
<pre><code>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
   }
});

});
</code></pre>
<h6 id="templatehtml">template.html</h6>
<pre><code><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>
</code></pre>
<h4 id="home">home</h4>
<h6 id="homectrljs">HomeCtrl.js</h6>
<pre><code>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();
   });
}]);

});
</code></pre>
<h6 id="templatehtml-1">template.html</h6>
<pre><code><div>
<h1>我是首页。{{homeCtrl.a}}</h1>
<div class="box">你好</div>
</div>
</code></pre>
<h3 id="jquery的引用">jquery的引用</h3>
<h4 id="法一">法一：</h4>
<p>最简单的方法就是在index.html上引用，这样可以在全局上使用$函数，缺点是不管页面是否使用jquery，总是先会加载完毕。</p>
<pre><code><!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>
</code></pre>
<h4 id="法二">法二：</h4>
<p>也可以在bootstrap.js上起一个别名，使用RequireJS加载jquery。</p>
<pre><code>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
}
});
</code></pre>
<p>然后在需要使用jquery的控制器中写入如下代码。</p>
<pre><code>define(function (require) {
var app = require('app');
var jquery = require('jquery');
app.controller('HomeCtrl', [function () {
   jquery('.box').animate({ 'font-size': 100 }, 1000);
}]);

});
</code></pre>
<p>若要引入jquery的插件，需要bower下载jquery-ui，然后改变bootstrap.js</p>
<pre><code>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
}
});
</code></pre>
<p>在控制器中写入如下代码。</p>
<pre><code>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();
   });
}]);

});
</code></pre>
<h3 id="项目结构-1">项目结构</h3>
<p>项目<br>
│app-routes.js<br>
│app.js<br>
│bootstrap.js<br>
│index.html<br>
│<br>
├─assets<br>
│├─angular<br>
│├─angular-async-loader<br>
│├─angular-ui-router<br>
│├─jquery<br>
│├─jquery-ui<br>
│<br>
├─css<br>
│    root.css<br>
│<br>
└─ngApp<br>
├─home<br>
│    HomeCtrl.js<br>
│    template.html<br>
│<br>
└─root<br>
RootCtrl.js<br>
rootService.js<br>
template.html</p>
<p>注：在项目中使用ctrl+p，可以定位到目标文件。</p><br><br>
来源：https://www.cnblogs.com/best-doraemon/p/17071932.html

頁: [1]

琼殿技术论坛's Archiver

Angularjs的工程化