I'm using angular declarations without using or injecting $scope var, but with this. declarations
var app = angular.module('myApp', []);
app.controller('myCtrl', myCtrlFunction);
function myCtrlFunction() {
this.myUrl = "This is myUrl content";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<p>Here I put my var myUrl:</p>
<h3>{{vm.myUrl}}</h3>
</div>
It works ok but I can't figure out how to access '$location' so this works after minification
var app = angular.module('myApp', []);
app.controller('myCtrl', myCtrlFunction);
function myCtrlFunction() {
this.myUrl = $location.absUrl();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<p>Here I put my var myUrl:</p>
<h3>{{vm.myUrl}}</h3>
</div>
Do I need to change the way I declare the contents of myCtrlFunction() ?
Yes, because it has dependency injection. In your current setup, your controller requires $location to be a global variable. Also, you need to supply a an array with string values for the parameter names, so angular still knows what to inject after the parameters are changed by minification algorithms.
So, use either one of those setups:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$location', myCtrlFunction]);
function myCtrlFunction($location) {
this.myUrl = "This is myUrl content";
}
or:
var app = angular.module('myApp', []);
app.controller('myCtrl', myCtrlFunction);
function myCtrlFunction($location) {
this.myUrl = "This is myUrl content";
}
// tell angular what parameters are expected
myCtrlFunction.$inject = ['$location'];
More about dependency injection in Angular.
You need to inject $location.
var app = angular.module('myApp', []);
app.controller('myCtrl', myCtrlFunction);
function myCtrlFunction(**$location**) {
this.myUrl = $location.absUrl();
}
You got away with the previous version because you weren't actually using the $scope keyword. But with $location you are specifically using it, so you need to inject it.
Related
How can i assign multiple controller within a body
Html
<script src="../MyApp.js"></script>
<script src="HomeCaller.js"></script>
<body ng-app="MyApp">
<div ng-controller="AppCtrls">{{secc}}</div>
<div ng-controller="HomeCtrls">{{jan}}</div>
</body>
MyApp.js
(function () {
'use strict'
var app = angular.module('MyApp', [])
app.controller('AppCtrls', function ($scope) {
$scope.secc = "Hello Angular"
})
})();
HomeCaller.js
angular.module('MyApp', [])
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
Remove the [] from the module call so you do not try to re-create it. This will retrieve the existing MyApp module.
HomeCaller.js
angular.module('MyApp')
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
I found in Controller, we use $scope, here is the link (http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller).
I change $scope to this, it cannot work.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
However, I found in Service, we use this, here is the link (http://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_custom).
In hexafy service, I change this to $scope, it cannot work.
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
Does my above summary correct? If not, what should be correct summary considering all kinds of possible.
You can use this instead of $scope in controller as well. They have brought in controller as syntax(from Angular 1.2). You can attach data to this(Here controller holds the data). But internally it will be attached to $scope only, but you don't have to attach it manually. It has to be declared in html like this , controller is declared as main , so we have to refer to data in html using main.
<div ng-controller="MainCtrl as main">
{{ main.title }}
</div>
app.controller('MainCtrl', function ($scope) {
this.title = 'Some title';
console.log("Title" + $scope.main.title); // It will print some title in the console.
});
Given the following code:
http://jsfiddle.net/mL4Lfmox/1/
I want to develop a constant variable storage in angular that all controllers, directives and services in the root scope can access. However when running the following code it tells me the constant I'm referencing is undefined (test_url)
var myapp = angular.module('myapp', []);
myapp.constant("myConfig", {
"test_url": "http://localhost"
})
myapp.controller('testCtrl', ['$scope', function ($scope, myConfig) {
$scope.url = myConfig.test_url;
}]);
HTML
<div ng-app="myapp">
<fieldset ng-controller="testCtrl">
<p>{{ url }}</p>
</fieldset>
</div>
You have an error in your dependency injection params:
myapp.controller('testCtrl', ['$scope', 'myConfig', function ($scope, myConfig) {
$scope.url = myConfig.test_url;
}]);
This should works.
i am new to AngularJS so please forgive me this dump question.
i have error
Cannot set property 'test' of undefined
angularjs
var App = angular.module('StartModule', []);
App.controller('ModalDemoCtrl', [
function($scope) {
$scope.test = function() {
alert("12312");
}
}
]);
html
<body ng-app="StartModule">
<div ng-controller="ModalDemoCtrl">
<div ng-click="test()">11111</div>
</div>
<body>
You just miss $scope to controller's second argument:
var App = angular.module('StartModule', []);
App.controller('ModalDemoCtrl', [ $scope, function($scope) {
$scope.test = function() {
alert("12312");
}
}]);
You're missing the $scope dependency, you need to inject it in your controller :
App.controller('ModalDemoCtrl', ['$scope'
function($scope) {
That's why the $scope variable is undefined, you're not actually injecting any dependency in it.
This uses the Inline Array Annotation: https://docs.angularjs.org/guide/di
I am new to Angularjs and currently practising it .I have a simple example like this .
My View Index.cshtml
<div ng-app="MyApp">
<div class="show-scope-demo">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController1">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController2">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
</div>
and my controller is MyJsScript.js
(function (angular) {
angular.module('MyApp', []).controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
in this case I am getting error
"[ng:areq] Argument 'MainController' is not a function, got undefined"
But if I am changing my controller like this
(function (angular) {
var myApp = angular.module('MyApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
myApp.controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
myApp.controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
It is working perfectly without any error .
Can anyone please tell me what is the exact difference between these two syntax.
Every time you call
angular.module('MyApp', [])
you're defining a new module named "MyApp" (and thus effectively overwrite the module that was previously defined with the same name).
To get a reference to a previously defined module named "MyApp", the correct syntax is
angular.module('MyApp')
without the array of dependencies.