完整的客戶端組件化案例 angularJS + requireJS

1、H5頁面,引入 requireJS和其配置文件;同時使用 angularJS的模塊

2、requireJS 定義加載路徑(可以加載樣式和js文件),在這里加載angularJS 和 自定義的組件

main.js

require.config({

//定義基礎路徑,其他的path等路徑是基于基礎路徑進行引入的。如果不配置,默認為引入requireJS頁面所在的位置

//baseUrl:"scripts/",

//requirejs默認對文件進行js擴展名處理,如果加上js或者以http、https開頭,則不處理

paths:{

//定義組件名稱,以及組件js所在的路徑

"angular":"./angular",

"use":"./use"

},

//

shim:{

"angular":{

exports: "angular"

}

}

});

require(["angular","app"],function(angular,app){

//angularjs 啟動

angular.bootstrap(document,['TestAll']);

});

3、實現 angularJS 組件化的 控件或服務

use.js

define(["angular"],function(angular){

var app=angular.module("use",[]);

app.service('myService', ['$rootScope', function($rootScope) {

this.value="use";

}]);

});

4、應用二次開發 angularJS的代碼,引入組件

app.js

define(["angular","use"],function(angular){

var app=angular.module("TestAll",["use"]);

app.controller('ctrlLogin',['$scope','myService',function($scope, myService){

$scope.name="ketty" + myService.value;

}]);

});

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容