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

airpor發表於2017-04-13
客戶端元件化AngularJSUI

1、H5頁面,引入 requireJS和其配置檔案；同時使用 angularJS的模組

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS+RequireJS</title>
<script type="text/javascript" src="require.js" data-main="main.js"></script>
</head>
<body>
<div ng-controller="ctrlLogin">
<label>
<input type="text" ng-model="name"/>
</label>
<span ng-bind="name"></span>
</div>
</body>
</html>

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;
}]);
});

相關文章