使用requirejs來管理angularJS依賴樣本,requirejsangularjs
有關requirejs是什麼在這裡不做解釋,只用純程式碼實戰讓你感受requirejs依賴管理的強大。
一、首先要先下載require.js,然後整一個入口檔案main.js包括了對其他js的引用。
//配置依賴require.config({ paths: { "angular":"angular" }, shim:{ "angular": { "deps":[], "exports": "angular" } } });//定義模組define([ 'angular', 'controller' ], function (angular) { angular.module('HelloModel', ['HelloCtrls']); return { angularModules: [ 'HelloModel' ] }; });
二、定義angular中的控制器模組controller.js
define([ 'angular' ], function(angular) { var componentCtrls = angular.module('HelloCtrls', []); componentCtrls.controller('helloCtrl', [ '$scope', function($scope) { $scope.greet = "hello world"; } ]); return componentCtrls;});
三、建立一個index.html檔案測試
<!DOCTYPE html><html ng-app="HelloModel"><head><meta charset="UTF-8"><title>Insert title here</title><script src="js/require.js" data-main="js/main" defer async="true" ></script></head><body ng-controller="helloCtrl">{{greet}}</body></html>
四、檔案組織圖
最簡單的demo樣本,有用你就點個贊吧!後期可能會修改,也歡迎大家提意見O(∩_∩)O~