I am new to the Angular world, and currently trying to finalize a clean design for our ASP.NET MVC project whereby each Angular controller is in a separate file. My question is this, is it possible to lazy load the Angular controllers? I am currently struggling with RequireJS. My proof of concept code is as follows:
CSHTML VIEW - Index.cshtml
<script src="~/Scripts/Controllers/mainController.js"></script>
<div class="row" ng-controller="MainController">
<div class="col-md-4">
<span>{{1+1}}</span>
Message Test: {{testmessage}}
<button ng-click="ucase()">Upper</button>
</div>
_Layout.cshtml (first line only to show ng-app)
<html ng-app="mainModule">
app.js
var mainModule = angular.module("mainModule", []);
mainController.js
angular.module('mainModule').controller('MainController', ['$scope', function ($scope) {
$scope.testmessage = "hello world!";
$scope.ucase = function () {
$scope.testmessage = angular.uppercase($scope.testmessage);
}
}]);
How can I get rid of the reference to mainController.js in the Index.cshtml file? Is there a way to lazy load the controller when it is needed? Can RequireJS help with this?
