In some AngularJS tutorials, angular app is defined as:
myApp = angular.module("myApp",[]);
But we can also do without it. The only difference I can see is when we define controller, we can't use idiom:
myApp.controller("myCtrl",function(){ })
but has to use
function myCtrl (){}
Is there any other benefits of defining myApp explicitly, given that I will only create a single app for my site? If I don't define myApp, then where my modules are attached to?
If there is, how I can recreate myApp in testing with Jasmin?
You can define controllers in (at least) 3 ways:
Define the controller as a global var (stored on the window object)
function Ctrl() {}
which is the same as doing:
window.Ctrl = function () {}
Create a module and use the returned instance to create new controllers:
var app = angular.module('app', []);
app.controller('Ctrl', function() {});
Create the controllers directly on the module without storing any references (the same as 2 but without using vars):
angular.module('app', []);
angular.module('app').controller('Ctrl', function() {});
From Angular's point of view, they all do the same, you can even mix them together and they will work. The only difference is that option 1 uses global vars while in options 2 and 3 the controllers are stored inside an Angular's private object.
I understand where you're coming from since the explanation for bootstrapping your Angular is all over the place. Having been playing with Angular only for a month (I'll share what I know anyways), I've seen how you have it defined above. I was also in the same scenario where I only have to define myApp once and not have multiple ones.
As an alternative, you can do something like this below. You'll notice that the Angular app and the controller doesn't have to live by the same namespace. I think that is more for readability and organization than anything.
JS:
window.app = {};
/** Bootstrap on document load and define the document along with
optional modules as I have below.
*/
angular.element(document).ready(function () {
app.ang = angular.bootstrap(document, ['ngResource', 'ngSanitize']);
// OR simply, works similarly.
// angular.bootstrap(document, []);
});
/** Define Angular Controller */
app.myController= function ($scope, $resource, $timeout) {
};
HTML:
<div role="main" ng-controller="app.myController"></div>
you have to define the app with angular.module anyway. myApp.controller and function myCtrl are the same..
Related
I had observed that inside AngularSeed, some controllers have the following format:
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function() {
}])
.controller('MyCtrl2', [function() {
}]);
whereas, some controllers have the following syntax:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl1', ['$scope', function($scope) {
} }]);
myApp.controller('MyCtrl2', ['$scope', function($scope) {
} }]);
Which is a good practice for a project in production?
Also, is there any performance difference between these two approaches?
There will be no difference in the performance among these two syntaxes.
But it is recommended that we use the second approach.
Remember that angular.module() returns a module object. This would expose the functions of controllers, filters, services, and directive registrations.
Now each of these functions would return the same module, so we are talking about the same reference. This is similar to a builder pattern.
According to Angular Best Practice for App Structure (Public), it is recommended that angular.module() should not be called more than once, and other files and modules should not modify the same.
For this reason, the latter is always recommended.
The logic is simple:
Expose your module as a global variable, and let other files add on to that variable.
if your project is very big i suggest you this syntax...
var controller = function (scope) {
};
controller.$inject = ["$scope"];
app.controller("appCtrl", controller);
When you include only a single component per file, there is rarely a need to introduce a variable for the module. Instead, use the simple getter syntax. When using a module, using chaining with the getter syntax avoids variables collisions or leaks.
From John Papa's Angular style guide:
/* avoid */
var app = angular.module('app');
app.controller('SomeController' , SomeController);
function SomeController() { }
/* recommended */
angular
.module('app')
.controller('SomeController' , SomeController);
function SomeController() { }
I am new to angularJs. I am confused which one is best way to create a controller for ng-app="mainApp". In programming other programming languages that I had worked on suggest to keep relative data together. But in angularJs it's considered best practice to have new module for controllers when we can define controller over main app module. If we create controller on mainApp it will keep controller and bind which is what we want in other languages.
var myapp = angular.module("mainApp", []);
myapp.controller("testController", function($scope)
{
$scope.value = "test";
})
//OR
angular.module("mainApp", ["moduleController"]);
angular.module("moduleController", []).controller("testController", function($scope){
$scope.value = "test";
})
For production environment which one should be used.??
Option 1:
var myapp = angular.module("mainApp",[]);
myapp.controller("testController",function($scope)
{
$scope.value="test";
})
Option 2:
angular.module("mainApp", ["moduleController"]);
angular.module("moduleController",[]).controller("testController",function($scope){
$scope.value="test";
})
Option 2 is better because this will allow you to write your controllers in separate files. As a result your code will be more readable. It'll also help you if you want to reuse your controllers in other AngularJS projects.
For example, you can write the following code in one file e.g app.js:
angular.module('mainApp',['ngRoute', 'appController']);
And you can write the controller in another file e.g controllers.js:
var appController= angular.module('appController', []);
appController.controller('testController', ['$scope',
function($scope) {
$scope.value="test";
}
]);
Now, you can reuse the controllers in another project by just adding the controllers.js file in the project and adding dependency to appController in the app.js file.
Neither, none of them will run in production environment where all script will be minified. Angular's injector subsystem is able to find and resolve $scope, $location, $etc and provide them to the component as requested.
myapp.controller("testController",function($scope)
{
$scope.value="test";
})
However, upon minification, the code above will end up looking something like:
a.controller("testController",function(b)
{
b.value="test";
})
which would cause the dependency injection to fail and result in a runtime error.
You will have to use it as below:
var myapp=angular.module("mainApp",[]);
myapp.controller("testController", ['$scope',function($scope)
{
$scope.value="test";
}]);
In this case, the controller function is initialized inside of an array after a list of each dependency as string literals. This ensure dependency injection is properly maintained, even through minification or uglification.
I have this global set up for my angular App module:
var App = angular.module('App', [], function ($interpolateProvider) {
//$interpolateProvider.startSymbol('<%');
//$interpolateProvider.endSymbol('%>');
});
I include it in all pages with angular stuff.
I then have a controller loaded on a page that requires a service called 'angularFileUpload':
App.controller('FileUploadController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
If i place that service inside the module array, it works fine. Is there a way of just attaching it to this controller instead... this means i do not have to load the script files for every page using this module regardless of if the controllers require the angularfileUpload service or not.
Edit: regarding the last comment
If i declare:
var App = angular.module('App');
How do i then add that service to the module?
What is correct way of passing variables from web page when initializing $scope?
I currently know 2 possibilities:
ng-init, which looks awful and not recommended (?)
using AJAX request for resource, which requires additional request to server which I do not want.
Is there any other way?
If those variables are able to be injected through ng-init, I'm assuming you have them declared in Javascript.
So you should create a service (constant) to share these variables:
var variablesFromWebPage = ...;
app.constant('initValues', variablesFromWebPage);
With this service, you don't need to add them to the scope in the app start, you can use it from any controller you have, just by injecting it (function MyCtrl(initValues) {}).
Althouhg, if you do require it to be in the scope, then this is one of the main reasons what controllers are meant for, as per the docs:
Use controllers to:
Set up the initial state of a scope object.
Add behavior to the scope object.
Just add this cotroller to your root node:
app.controller('InitCtrl', function($rootScope, initValues) {
$rootScope.variable1 = initValue.someVariable;
$rootScope.variable2 = initValue.anotherVariable;
});
#Cunha: Tnx.
Here some more details how I did it:
In the Webpage:
<script type="text/javascript">
var variablesFromWebPage = {};
variablesFromWebPage.phoneNumber = '#Model.PhoneNumber';
</script>
In the angular application file, registering the service:
var module= angular.module('mymodule', ['ngRoute', 'ngAnimate']);
module.factory('variablesFromWebPage', function () {
return variablesFromWebPage
});
And then the controller:
module.controller('IndexController',
function ($scope, $location, $http, $interval, variablesFromWebPage) {
$scope.phoneNumber = variablesFromWebPage.phoneNumber;
}
);
EDIT: I have managed to get my unit tests running - I moved the code containing the services to a different file and a different module, made this new module a requirement for fooBar module, and then before each "it" block is called, introduced the code beforeEach(module(<new_service_module_name)). However, my application still won't run. No errors in console either. This is the only issue that remains - that when I use global scope for controllers definition, the application works, but when I use angular.module.controller - it does not.
I have a file app.js that contains the following:
'use strict';
var app = angular.module('fooBar', []);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/form-view.html',
controller: FormViewCtrl
}).
when('/resultDisplay', {
templateUrl: 'partials/table-view.html',
controller: TableViewCtrl
}).
otherwise({redirectTo: '/'});
}]);
app.service('searchResults', function() {
var results = {};
return {
getResults: function() {
return results;
},
setResults: function(resultData) {
results = resultData;
}
};
});
I have another file controllers.js that contains the following:
'use strict';
var app = angular.module('fooBar', []);
app.controller('FormViewCtrl', ['$scope', '$location', '$http', 'searchResults',
function ($scope, $location, $http, searchResults) {
//Controller code
}]);
searchResults is a service that I created that simply has getter and setter methods. The controller above uses the setter method, hence the service is injected into it.
As a result, my application just does not run! If I change the controller code to be global like this:
function ($scope, $location, $http, searchResults) {
//Controller code
}
then the application works!
Also, if I use the global scope, then the following unit test case works:
'use strict';
/*jasmine specs for controllers go here*/
describe('Foo Bar', function() {
describe('FormViewCtrl', function() {
var scope, ctrl;
beforeEach(module('fooBar'));
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('FormViewCtrl', {$scope: scope});
}));
}
//"it" blocks
}
If I revert to the module scope, I get the error -
Error: Unknown provider: searchResultsProvider <- searchResults
Thus, by using global scope my application and unit tests run but by using app.controller, they seem to break.
Another point that I have noted is that if I include the controller code in app.js instead of controllers.js, then the application and unit tests start working again. But I cannot include them in the same file - how do I get this to run in the angular scope without breaking the application and unit tests?
You don't need to go that route. You can use the modular approach, but the issue is with your second parameter.
In your app.js you have this:
var app = angular.module('fooBar', []);
Then in your controller, you have this:
var app = angular.module('fooBar', []);
What you're doing there is defining the module twice. If you're simply trying to attach to the app module, you cannot pass in the second parameter (the empty array: []), as this creates a brand new module, overwriting the first.
Here is how I do it (based on this article for architecting large AngularJS apps.
app.js:
angular.module('fooBar',['fooBar.controllers', 'fooBar.services']);
angular.module('fooBar.controllers',[]);
angular.module('fooBar.services', []);
...etc
controllers.js
angular.module('foobar.controllers') // notice the lack of second parameter
.controller('FormViewCtrl', function($scope) {
//controller stuffs
});
Or, for very large projects, the recommendation is NOT to group your top-level modules by type (directives, filters, services, controllers), but instead by features (including all of your partials... the reason for this is total modularity - you can create a new module, with the same name, new partials & code, drop it in to your project as a replacement, and it will simiply work), e.g.
app.js
angular.module('fooBar',['fooBar.formView', 'fooBar.otherView']);
angular.module('fooBar.formView',[]);
angular.module('fooBar.otherView', []);
...etc
and then in a formView folder hanging off web root, you THEN separate out your files based on type, such as:
formView.directives
formView.controllers
formView.services
formView.filters
And then, in each of those files, you open with:
angular.module('formView')
.controller('formViewCtrl', function($scope) {
angular.module('formView')
.factory('Service', function() {
etc etc
HTH
Ok - I finally figured it out. Basically, if you wish to use the module scope and not the global scope, then we need to do the following (if you have a setup like app.js and controllers.js):
In app.js, define the module scope:
var myApp = angular.module(<module_name>, [<dependencies>]);
In controllers.js, do not define myApp again - instead, use it directly like:
myApp.controller(..);
That did the trick - my application and unit tests are now working correctly!
It is best practice to have only one global variable, your app and attach all the needed module functionality to that so your app is initiated with
var app = angular.module('app',[ /* Dependencies */ ]);
in your controller.js you have initiated it again into a new variable, losing all the services and config you had attached to it before, only initiate your app variable once, doing it again is making you lose the service you attached to it
and then to add a service (Factory version)
app.factory('NewLogic',[ /* Dependencies */ , function( /* Dependencies */ ) {
return {
function1: function(){
/* function1 code */
}
}
}]);
for a controller
app.controller('NewController',[ '$scope' /* Dependencies */ , function( $scope /* Dependencies */ ) {
$scope.function1 = function(){
/* function1 code */
};
}
}]);
and for directives and config is similar too where you create your one app module and attach all the needed controllers, directives and services to it but all contained within the parent app module variable.
I have read time and time again that for javascript it is best practice to only ever have one global variable so angularjs architecture really fills that requirement nicely,
Oh and the array wrapper for dependencies is not actually needed but will create a mess of global variables and break app completely if you want to minify your JS so good idea to always stick to the best practice and not do work arounds to get thing to work
In my case, I've defined a new provider, say, xyz
angular.module('test')
.provider('xyz', function () {
....
});
When you were to config the above provider, you've inject it with 'Provider' string appended.
Ex:
angular.module('App', ['test'])
.config(function (xyzProvider) {
// do something with xyzProvider....
});
If you inject the above provider without the 'Provider' string, you'll get the similar error in OP.