I'm trying to get my head around AngularJS and ran into a problem.
var myApp = angular.module('myApp', ['myApp.services']); myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { console.log('Configuring module "myApp"'); $routeProvider.when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController}); $routeProvider.when('/menu', {templateUrl: 'partial/other', controller: OtherController}); $routeProvider.otherwise({redirectTo: '/dashboard'}); $locationProvider.html5Mode(true); }]);
To my understanding the configuration function should be called when the module gets loaded. But it does not!
I have the ng-app="myApp"
directive on the <body>
tag. And scripts loaded just before the body closing tag in the correct order (as far as that matters).
<script src="angular.js"></script> <script src="app.js"></script> <script src="services.js"></script> <script src="controllers.js"></script> </body>
I'm pretty sure I must be overlooking something trivial here. There should be a message printed to the console. But it remains empty with no errors or warnings whatsoever.
The parts of the app not depending on the routes runs just fine.
'use strict'; angular.module('myApp', function ($provide) { $provide.factory('myService', function ($http) { var service = function () { ... service implementation ... }; return new service(); }); });
It seems that the method I used for defining the service was overriding my myApp
module.
This is the overriding line
angular.module('myApp', function ($provide) ...
This code simply redefines the myApp
module and adds a function to configure that one.
I refactored service.js to this simplified version and it started to work.
var myApp = angular.module('myApp'); myApp.factory('securityService', function () { return SomeFancyServiceObject(); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With