使用requirejs來管理angularJS依賴示例
阿新 • • 發佈：2017-07-11
path string plain ins clas fun ont async light
有關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文件測試
[html] view plain copy print?
- <!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>
四、文件組織結構
使用requirejs來管理angularJS依賴示例