After years of working with MVC, I recently delved into Angular. Although I am well-versed in JavaScript and HTML, I'm still a beginner in the world of Angular.
I spent hours troubleshooting my app only to realize that the problem was elusive.
The app consists of three files:
index.html
<body ng-app="perica">
<p>main</p>
{{ tagline }}
<a ng-click="logOut();">Logout</a>
<div ng-view><p>inside</p></div>
</body>
<script type="text/javascript" src="../components/angular/angular.js"></script>
<script type="text/javascript" src="../AgularApp.js"></script>
<script type="text/javascript" src="../controllers/AcountController.js">
AngularApp.js
debugger;
angular.module('perica', ['ngRoute']).config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
console.log('in');
debugger;
$routeProvider.when('/test', {
templateUrl: 'views/Account/_Login.html'
})
$locationProvider.html5Mode(true);
}]);
and AccountController.js
var myApp = angular.module('perica', []);
myApp.controller('AcountController', ['$scope', function ($scope) {
$scope.tagline = 'The square root of life is pi!';
}]);
It's a simple application as you can see.
Based on conventional coding principles, I should load the angular core scripts first, followed by my angular app, and then the angular controls.
However, when I ran the app, Chrome ignored what was defined in AngularApp.js and jumped straight into AccountContoller.js after hitting the first debugger breakpoint inside AngularApp.js.
But To my surprise, reversing the paths - loading AccountController.js before AngularApp.js - resolved the issue without any trouble.
I would appreciate it if someone could provide insight into this perplexing issue. Thanks!