Angularjs的工程化

来源:https://www.cnblogs.com/engpj/archive/2023/01/29/17071932.html
-Advertisement-
Play Games

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,也會等待這 ...


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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • xz是什麼 高壓縮率的工具,它使用 LZMA2 壓縮演算法,生成的壓縮文件比傳統使用的 gzip、bzip2 生成的壓縮文件更小, 不過xz也有一個壞處就是壓縮時間比較長,比7z壓縮時間還長一些。不過壓縮主要用於歸檔,不介意的可以忽略。 擅長壓縮文本和日誌文件,針對這塊的壓縮率,是目前我發現效率最高的 ...
  • Docker的常用命令 幫助命令 docker version # docker版本 docker info # 顯示docker的系統信息,包括鏡像和容器的數量 docker [命令] --help # 查看某個具體的命令 鏡像命令 查看下載的所有鏡像 # docker images REPOSI ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • props props簡單使用 class Person extends React.Component { render() { return ( <ul> <li>姓名:{this.props.name}</li> <li>年齡:{this.props.age}</li> <li>性別:{thi ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 需求描述 目前大多數PC端應用都有配套的移動端APP,如微信,淘寶等,通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄,使得用戶登錄操作更方便,安全,快捷。 思路解析 PC 掃碼原理? 掃碼登錄功能涉及到網頁端、伺服器和手機端, ...
  • 一、文件上傳 1、普通文件上傳 JavaScript 可以使用表單提交來實現文件上傳。首先,在 HTML 中創建一個文件輸入框: <input type="file" id="fileInput"> 然後,在 JavaScript 中獲取文件輸入框的引用,併在其上設置事件監聽器,如下所示: var ...
  • 最近在開發幾個網站,為了優化一下前端代碼,就複習一下gulpjs,之前工作gulp用的版本比較老,但是今天看了新的版本,新的語法出了一下,但是為了時間,我決定使用之前gulp3的舊版本,後面發現自己環境的node的版本是最新的,所以不得讓我來瞭解一下gulp的新版本,裡面用到的最多就是commonj ...
  • 一、條件判斷 JavaScript 中有三種方法可以用來進行條件判斷: 1、使用 if-else 語句。這種方法用於在特定條件為 true 時執行一段代碼,否則執行另一段代碼。例如: let a = 5; if (a > 10) { console.log("a is greater than 10 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...