I'm using plunker and I have a separate angular file app.js. I want to 'use strict' but I get 'angular' is not defined. Is there a way to avoid this error and keep app.js as a separate file? Here is my code app.js code
'use strict';
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
It is highly recommended to put the 'use strict'; statement inside of a function - source.
Just wrap all of your code in an anonymous function (which is the recommended way of doing it).
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
})();
Sample plunker: http://plnkr.co/edit/ShbhkuN3MXTHzmdrL3c5?p=preview
Related
I am having an error on this code. I don't know why I am using angularjs 1.7.x version
$(document).ready(function () {
$('#signupBtn-spinner').hide();
var app = angular.module('myApp', []);
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
I strongly recommend you to avoid to use jquery with Angular/js
If you want to implement signup/login logic, suggest you to use ui-router. Some example.
Also please read this great Josh David Miller's answer “Thinking in AngularJS” if I have a jQuery background
About your problem:
You get this error from ng-app.
Put var app = angular.module('myApp', []); out of $(document).ready
Angularjs is loaded and it does not see any module because it is still not ready.
var app = angular.module('myApp', []);
$(document).ready(function () {
$('#signupBtn-spinner').hide();
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
So I know that I need to use [] to secure my code before minification. For example:
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'HOORAY!';
}]);
But how to do that when I am not using app as global variable, I've got
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', Controller);
function Controller($scope, authService) {
var vm = $scope;
vm.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}
})();
How to prevent it from problems during minification?
The same way:
.controller('loginCtrl', ['$scope', 'authService', Controller]);
I strongly advise you to use ng-annotate, which allows using the simple syntax, and transforms it into minifiable code for you. That will make your code simpler, easier to read, and avoid a whole lot of bugs.
When a controller or a service is a named function like in code above, it looks best when it's annotated with $inject (see John Papa style guide).
angular
.module('app')
.controller('loginCtrl', Controller);
Controller.$inject = ['$scope', 'authService'];
function Controller($scope, authService) {...}
Hoisting allows to place the annotation right above injectable function.
I believe it should be the same way:
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', ['$scope', 'authService', function($scope, authService) {
$scope.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}]);
})();
One way you may try grunt-ngmin before the minification that will searches and replace the minification with minify-friendly code. Go to this link you will see example https://github.com/btford/grunt-ngmin#example
I'm following this example for ui.grid
site: http://ui-grid.info/docs/#/tutorial/203_pinning
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
I'm using app.js file to define my Common dependencies using in all controllers etc. (whole app)
var app = angular.module("sampleApp", ["ngResource", "ui.router", "ngTouch", "ui.grid", "'ui.grid.pinning'"]);
As you can see "ui.grid" and "ui.grid.pinning" is defined in application or module level. all my controllers/services can use it.
Question:
Is there a way to define these 2 dependencies in controller level? like below, because I'm not going to use it in other controllers/pages....
now I get squeeze underlines in my editor with code below, I assume it's because of the dots(.). it says { expected....
app.controller("empController", ['$scope',
'ui.grid', 'ui.grid.pinning',
function ($scope, ui.grid, ui.grid.pinning) {
You can use the explicit $injector in your controller.
app.controller("empController", function empController($scope, ui.grid, ui.grid.pinning){
empController.inject = ['$scope','ui.grid','ui.grid.pinning'];
}
I'm getting the below error while loading my web pages:
Argument 'channelsAppController' is not a function, got undefined
I have 2 different web pages and one Layout page which includes 2 different java-script files:
<script src ="/Scripts/Views2/Channel.js"></script>
<script src ="/Scripts/Views2/Channel_Create.js"></script>
Here is the begging of each scripts:
Channel.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []);
myApp.controller("channelsAppController", function($scope, $http, $compile) {
Channel_create.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []);
myApp.controller("channelCreateController", function($scope, $http, $compile) {
$scope.Channel = {
When I load either of the pages I get the error mentioned earlier.
If I comment out one of the scripts in the layout the page...the page that doesn't uses the script loads and doesn't generate an error.
Each page has their respective controller specified in the root div.
I'm trying to figure out whats causing the errors:
How can I include multiple javascript files in a layout page while using angular ?
Channel.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []); //Module definition
myApp.controller("channelsAppController", function($scope, $http, $compile) {
Channel_create.js
(function() {
var myApp;
myApp = window.angular.module("myApp"); //Module retrieval.
myApp.controller("channelCreateController", function($scope, $http, $compile) {
$scope.Channel = {
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');
}]);