angularjs與requirejs整合

時間 2019-11-12

標籤 angularjs requirejs 整合欄目 AngularJS 简体版

原文原文鏈接

#目錄 [TOC] #1. 概述html

1.1 爲什麼整合？

因爲angularjs的各類依賴必須按照js的腳本按照循序進行加載，這令開發者很是頭疼
腳本屢次導入屢次執行的衝突，以及性能效率的影響

1.2 腳本加載框架（AMD/CMD）

requirejs 支持AMD和CMD
seajs 支持AMD,京東目前使用筆者瞭解不甚淺，筆者採用requirejs進行測試

1.3 angularjs新特性

angularjs-1.5加入了許多新特性，我最感興趣的是如下兩個：java

組件Components 官方代表在angular1中使用組件很容易的切換到angular2，但目前我收到消息，angular出了一個編譯器說，angular1能夠直接編譯到angular2
組件路由component-router

1.4 angularjs plugins

順便介紹一些angular經常使用的一些插件jquery

ngFileupload基於angular的文件上傳 demo 例子
ui-router 路由
angular ui 其餘ui插件能夠使用這些
angular material 響應式框架
其餘擴展modules包括導出csv，拖拉，滾動條 #整合代碼

目錄路徑

-lib/jquery/jquery-1.8.0.min.js
-lib/angular/angular.min.js
-lib/angular/angular-route.min.js
-lib/requireJS/require.js

-scripts/inject.js
-scripts/test.js
-scripts/app.js
-main.js

-index.html
-pages/app.html
-pages/home.html
-pages/index.html

(requirejs入口)main.js

/**
 * require 主入口，相關配置依賴從這裏配置
 */
require.config({
    baseUrl: "/",
    //每次新加載js，爲了不緩存
    urlArgs: "bust=" +  (new Date()).getTime(),
    paths: {
        'jquery': 'lib/jquery/jquery-1.8.0.min',
        'angular': 'lib/angular/angular.min',
        'angular-route': 'lib/angular/angular-route.min',
        'app': 'scripts/app',
        //入口注入腳本
        'inject' : 'scripts/inject'
    },
    shim: {
        'angular': ['jquery'],
        'angular-route': ['angular']
    }
});
require(["inject"], function() {});

頁面（index.html）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script data-main="main" src="lib/requireJS/require.js"></script>
    <title>angularJs & requireJs</title>
</head>
<body>
<!--程序入口-->
<app/>
</body>
</html>

##注入腳本（inject.js）git

!(function () {
    'use strict';
    //固然了這個scripts的數據徹底能夠從服務器上動態獲取回來加載
    var scripts = ['scripts/test'];
    
    //依賴腳本加載
    require(scripts, function () {
        //渲染
        angular.bootstrap(document, ['app']);
    });
}());

主模塊腳本（scripts/app.js）

這裏是對主模塊的基本定義，最後必須返回模塊的對象，用於進行依賴而後進行下一步的處理程序員

define("app",["angular",'angular-route'], function(a, r) {
    var app = angular.module('app', ['ngRoute'])
        .controller("IndexCtrl",["$scope", function($scope) {
        $scope.name = "王五";
    }])
        .component('app', {
        templateUrl: "pages/app.html"
    })
        .config(["$routeProvider",
            function($routeProvider) {
                $routeProvider.
                when("/home", {
                    templateUrl: "pages/home.html",
                    resolve : {
                        $routeChangeSuccess : function($rootScope) {
                            $rootScope.appName = '這裏是appName';
                        }
                    }
                }).
                when("/index", {
                    templateUrl: "pages/index.html",
                    controller: "IndexCtrl"
                })]);
    return app;
});

app組件模板（pages/app.html）

<h2>頭部</h2>
內容:
<java></java>
<div ng-view></div>
<h2>底部</h2>

組件腳本（scripts/test.js）

//這裏必須依賴app腳本
define(["app"], function (app) {
    //定義java組件
    app.component('java', {
        template: "我是java程序員",
    });
});

view路由home.html

這裏是home.html

#結果angularjs

訪問路由

http://localhost:8080/app.html#/homegithub

結果

html展現： dom結果： bootstrap

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。