Since I'm minifying and uglifying my JS, I can't simply do the following:
var app = angular.module('app', []);
app.controller('MyController', function($scope, $http) {
// ...
});
It will throw an inject-related error since minifying it jumbles up the $scope var.
Instead, I have to do this:
app.controller('MyController', ['$scope', function($scope) {
$scope.angularIs = "awesome";
}]);
Question: Using the second approach, how do I add the http service? Something like this?
app.controller('MyController', ['$scope&$http', function($scope, $http) {
// ...
}]);
And can my angular.module('app', []); declaration stay the same, or do I have to add some type of http dependency to the []'s? Thanks!
You can just use:
app.controller('MyController', ['$scope', '$http', function($scope, $http) {
// ...
}]);
It will match then against the arguments inside function(). Your app's dependencies will always be strings, so those will be fine when minified.
use this:
app.controller('MyController', ['$scope','$http', function($scope, $http) {
// ...
}]);
Related
Which one is correct way for initializing module,controller in angularJS
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
myapp.controller('Ctrl2', Ctrl2);
Ctrl1.$inject = ['$scope', '$http'];
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
function Ctrl2($scope, $http) {
}
or this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
Ctrl1.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
myapp.controller('Ctrl2', Ctrl2);
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl2($scope, $http) {
}
or doing this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', ['$scope', '$http', function ($scope, $http) {} ]);
myapp.controller('Ctrl2', ['$scope', '$http', function ($scope, $http) {} ]);
I am confusing which way is correct and can you give give me the cirrect project structure of AngularJS frmawork
Any sample project for that in github always welcome
Some peoples says John Papa style which one correct way i mean most efficient way
The simpliest way is to write:
myapp.controller('Ctrl1', function($scope, $http) {
});
And you should use ngmin to parse your code before minification. It will automatically wrap the controller callback in ['$scope', '$http', function($scope, $http) {}] to avoid minification problem.
If you use gulp, use gulp-ngmin.
The second way should be the ideal way as because
It is easy to read.
Easy to maintain
Protected from minification by the injector.
Anyways all of them are correct.
But second way should be the best.
Also make sure that you wrap the code in the way to protect from variable name clashes:
(function(){
'use strict'; //another best practice
//then your code
})()
Angular's $inject method, we can explicitly declare our dependencies. This one may give problem for every controller injection. Other than you can use.
https://docs.angularjs.org/api/auto/service/$injector
I have an app which uses a lot of different js files. When I compile the app normaly with gulp everything works well, but when I compile everything in one file to minify it, I get an error (Uncaught Error: [$injector:modulerr]).
app-55bb2aca73.js:4 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…http%3A%2F%2Flocalhost%3A8080%2Fbuild%2Fjs%2Fapp-55bb2aca73.js%3A4%3A30075)
at app-55bb2aca73.js:4
...
Here is my gulpfile.js (use Laravels elexir plugin):
mix.scripts([
/*libs*/
'../../../node_modules/jquery/dist/jquery.slim.min.js',
'../../../node_modules/bootstrap/dist/js/bootstrap.min.js',
'../../../node_modules/angular/angular.min.js',
'../../../node_modules/angular-cookies/angular-cookies.min.js',
'../../../node_modules/pickadate/lib/compressed/picker.js',
'../../../node_modules/pickadate/lib/compressed/picker.date.js',
'../../../node_modules/pickadate/lib/compressed/picker.time.js',
'app.js',
'config/*.js',
'angular/controller/*.js'
], 'public/js/app.js');
Here the app.js:
var app = angular.module("app", ['ngCookies'], function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
For example here the begin of a controller:
app.controller('someCtrl', function ($scope, $window, $http, $cookies) {
Someone got any idea why this is not working in one file?
When you minify, the controller method names get stripped out. Need to include in this way to have a reference:
app.controller('someCtrl', ['$scope', '$window', '$http', '$cookies'
function ($scope, $window, $http, $cookies) {
// ...
}
]
More here: https://docs.angularjs.org/guide/di
This might be because the system angular uses for injecting dependencies according to the names of the variables passed as parameters. If you are minifying your files into a single one and variables are not keeping the same original name, you should inject the dependencies manually as follow:
var myApp = function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
myApp.$inject = ['$interpolateProvider'];
angular.module("app", ['ngCookies'], myApp);
... and in your controller:
app.controller('someCtrl', controlFn);
var controlFn = function ($scope, $window, $http, $cookies) {};
controlFn.$inject = ['$scope', '$window', '$http', '$cookies'];
I have the module of my application:
angular.module('app', ['app.controllers','app.routes','app.services']);
I have my services module:
angular.app('app.services', [])
.factory('usuarioService', ['$rootScope', 'renderService',
function($rootScope, renderService){
// logic of factory
}]);
angular.module('app.services', [])
.factory('renderService', ['$http',
function($http){
// logic of factory
}]);
and I have my controller:
angular.module('app.controllers', ['app.services'])
.controller('meuCtrl',
['$scope','$rootScope','usuarioService','renderservice',
function($scope, $rootScope, usuarioService, renderService){
// logic of controller
}]);
But to run the application, I get dependencies injection error:
Unknown provider: usuarioServiceProvider <- usuarioService <- meuCtrl
I do not understand what might be going on, as do the injection into appropriate location.
unless I'm doing wrong these injections.
PS .: All .JS files are being loaded into index.html, none have been forgotten.
Your usuarioService factory declaration is incorrectly adding itself to a non-existent member of the angular object.
You have:
angular.app('app.services', []) // note the 'app' usage
.factory('usuarioService', ['$rootScope', 'renderService',
You should have
angular.module('app.services', []) // note the 'module' usage
.factory('usuarioService', ['$rootScope', 'renderService',
Try this
angular.module('app.services')
.factory('renderService', ['$http', function($http) {
//logic
return renderService;
}]);
angular.module('app.services')
.factory('usuarioService', ['$rootScope', 'renderService',function($rootScope,renderService) {
//logic
return renderService;
}]);
angular.module('app.controllers', ['app.services'])
.controller('meuCtrl',
['$scope','$rootScope','usuarioService','renderservice',
function($scope, $rootScope, usuarioService, renderService){
// logic of controller
}]);
what's the difference of this two code?
var myApp = angular.module('myApp', []);
myApp.controller('GreetingCtrl', function($scope) {
$scope.greeting = {
message: 'Hola!'
};
});
myApp.controller('HiCtrl', function($scope) {
$scope.double = {
text: 'Hello'
};
});
TO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingCtrl',['$scope', function($scope) {
$scope.greeting = {
message: 'Hola!'
};
}]);
myApp.controller('HiCtrl',['$scope', function($scope) {
$scope.double = {
text: 'Hello'
};
}]);`
THAT having a ['$scope', next to function($scope) is not working if i have 2 controllers in 1 module?
Have a look at the AngularJS doc here. Basically, adding the ['$scope', allows you to use the Dependency Injection and still make it work with the JS minification process.
The minifier will change function($scope) in function(a) and you will lose the $scope dependency. Since minifiers don't compress Strings, ['$scope', will remain the same and AngularJS will be able to parse it.
FYI: if you are using Grunt and you don't want to use this ['$scope', notation, this module can be helpful.
angular.module('myApp', [])
.controller('GreetingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.greeting = {
message: 'Hola!'
};
$http.get('http://www.google.com');
}]);
I'm venturing into injecting different angular modules into my app. One module I created contains a service that I would like to inject into a controller. Does anyone have a good explanation of how to do this?
My app.js:
angular.module('myApp', ['ngRoute', 'myModule']);
myModule which contains a service I want to inject:
angular.module('myModule')
.factory('coolService', ['$rootScope', function ($rootScope) {
return {
// API calls
}]);
An example of how to correctly inject 'coolService' into this controller would answer my question nicely:
angular.module('myApp')
.controller('myController', ['$scope', function ($scope) {
...
}]);
angular.module('myApp')
.controller('myController', ['$scope', 'coolService', function ($scope, coolService) {
coolService.do...
}]);
thats all...