I have a main app.js file which has the defined code as below:
var app = angular.module('Funapp', [
'Funapp.controllers',
'Funapp.services',
])
I'm wondering why for some of my js controller files, I can use app.controller while others I have to write angular.module(){} etc to use .controller instead? app.controller doesn't work for the second case.
For example. app.controller works for my posting controller.
'use strict';
app.controller('PostsCtrl', function ($scope, Post) { ...etc
But doesn't work in other js files like factory, so i have to type it as below
'use strict';
angular.module('Funapp.services', [])
.factory('Post', function ($firebase, FIREBASE_URL) {....etc
Doesn't work in the post view or dummy controller too, postview controller below
'use strict';
//angular.module('Funapp') --> Doesnt work currently, neither does Funapp.controller
app.controller('PostViewCtrl', function ($scope, $routeParams, Post) { ...etc
Can someone enlighten me how to use app.controller and .controller, and if the latter, what should I consider typing in the angular.module("", [])?
I have read angular tutorials and do understand that angular.module("", []) defines the module while angular.module("") uses that defined module. However, been getting many errors that I'm unable to resolve the issues proper and understand how this works.
It all depends on whether the main app definition file is already loaded and is in scope by the time you reach a view requiring PostViewCtrl. If it's already been loaded and is available to the DOM, it means you can use the app.controller syntax, obviously since you've already declared it and it's dependencies. If it's not available to the DOM, then you need to do what you're already doing, which is a pain and terrible from a best practices point of view. For example if you have a main page which has a script containing your app definition, the other views hosted within that shell page could have controllers declared by app.controller, but if you have say, server side views, and the main app definition script is not included in your master page (the ASP.NET concept) then you need to re-declare your app definition whenever you want to create a controller inside each of those server side views.
For example, say you have 2 pages, Home and About. Each have separate controller definitions in separate files:
app.js looks like this:
var app = angular.module("demoApp", ['demoApp.services']);
var appServices = angular.module('demoApp.services', []);
That needs to be loaded upfront and needs to be around whenever you navigate to any other pages, since your other pages are part of the same app, and also need services define on that app.
HomeCtrl.js:
app.controller("homeCtrl", function ($scope) {
$scope.msg = "Home!";
});
amd AboutCtrl.js:
app.controller("aboutCtrl", function ($scope,svc1) {
$scope.msg = "About!";
svc1.sayHi();
});
Now in Home.html:
<divng-controller="homeCtrl">
<h1>{{msg}}</h1>
</div>
and About.html:
<script src="~/app/Svc1.js"></script>
<script src="~/app/AboutCtrl.js"></script>
<div ng-controller="aboutCtrl">{{msg}}</p>
And Svc1.js looks like this:
appServices.service("svc1", function () {
return {
sayHi: function () {
alert("hi");
}
};
});
Long story short, the app and appServicesvariables, referencing your app modules, need to be in scope when you declare services or controllers on your app otherwise you have to redefine your app all the time.
You are on right track in namespacing your various objects, you need to define modules for each of your constructs.
Here's an example
<!doctype html>
<html ng-app="Funapp">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="PostsCtrl">
<div class="well">
<h1>{{message}}</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script>
angular.module('Funapp.services', [])
.service('PostService', [function () {
return {
doSomething: function() {
return "I posted something";
}
}
}]);
angular.module('Funapp.controllers', ['Funapp.services'])
.controller('PostsCtrl', ['$scope', 'PostService', function ($scope, Post) {
$scope.message = Post.doSomething();
console.log("I'm a Post Controller");
}
]);
angular.module('Funapp', [
'Funapp.controllers'
]);
</script>
</body>
</html>