angular入門學習之二
阿新 • • 發佈：2019-01-26
本篇示例展示兩個模組之間的依賴注入。每個模組都有自己的控制器和方法。
上Demo
看過第一篇的讀者應該不需要註釋就能看懂上面的程式碼。<!doctype html> <html ng-app="myApp"> <head> <title>Angularjs Dev</title> </head> <body> <div ng-controller="controllerA"> <h2>Application Message</h2> {{message}} </div> <hr> <div ng-controller="controllerB"> <h2>Module Message</h2> {{message}} </div> <script type="text/javascript" src="../angular.js"></script> <script type="text/javascript" src="inject_custom.js"></script> </body> </html>
var myMod = angular.module('myMod',[]);//定義一個myMod的app myMod.value('modMsg','Hellow Frome My Mod'); myMod.controller('controllerB',['$scope','modMsg',function($scope,modMsg){//獲取B控制器並定義事件 $scope.message = modMsg; }]); var myApp = angular.module('myApp',['myMod']);//將myMod加入myApp myApp.value('appMsg','Hellow from My App'); myApp.controller('controllerA',['$scope','appMsg',function($scope,appMsg){//獲取A控制權並定義事件 $scope.message = appMsg; }]);
比較來看，這個demo是幹什麼用的呢。首先我們可以把myApp和myMod當成兩個物件。myApp即上面的html。myMod我們也不需要知道它到底是什麼物件。但是我們myApp需要依賴myMod的一個方法。所以我們在myApp中注入myMod物件。那麼myMod物件中的方法就能賦予我們的控制器B。