I am working with Angular 1.x and here is the code which was giving errors:-
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Controllers</title>
</head>
<body>
<div ng-app="app">
<h1>Controllers</h1>
<div ng-controller="MainCtrl">
<p>{{message}}</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', [$scope, function($scope){
$scope.message = "Hello";
}]);
</script>
</body>
</html>
It was giving error ReferenceError: $scope is not defined
I thought may be $scope is not getting injected then I addded a dependency of $scope in the array to the 'app' module like this :-
angular.module('app', [$scope])
but to no avail. But what worked was the following code:-
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Controllers</title>
</head>
<body>
<div ng-app="app">
<h1>Controllers</h1>
<div ng-controller="MainCtrl as ctrl">
<p>{{ctrl.message}}</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', [function(){
this.message = "Hello";
}]);
</script>
</body>
</html>
I am referring the message model in HTML using ctrl.messaage, only then its appearing not otherwise.But why!!
Why can't I use $scope here, if I can how!!
/
Basically what is the difference between this and the earlier code?
Try something like this
angular.module('app', [])
.controller('MainCtrl', ['$scope', function($scope){
$scope.message = "Hello";
}]);
it shoulde be like this.
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
$scope.message = "Hello";
}]);
and it's better use controllerAs syntax
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
var vm = this;
vm.message = "Hello";
}]);
and in view use
<div ng-controller="MainCtrl as ctrl">
When using an array as the second argument of the controller-method you have to use strings as values. This allows you to rename dependency modules.
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
$scope.message = "Hello";
}]);
</script>
You need to add quotes around $scope when you're injecting it into your controller. AngularJS will look at these string variables to determine what it needs to safely inject into your application.
angular.module('app', [])
.controller('MainCtrl', ['$scope', function($scope){
$scope.message = "Hello";
}]);
Related
I'm fairly new to Angular and I am trying to use ng-model and ng-controller to change some text using an input box.
This issue is that my initial text(john) doesn't show up on the page. Every tutorial says this is the way to do it. Am I missing some import or declaration somewhere in the component.ts?
Here is my code.
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
You forgot to inject $scope into your controller.
myApp.controller('myCtrl', ['$scope', function($scope) {
$scope.firstName = 'john';
}]);
Any dependency (services, filters..) you want to have in the controller you must inject.
Add the angular.js library as a <script> element:
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
You didn't miss any declaration, but the problem might be because you did not include angular and your code inside html.
Try this:
<html>
<head></head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./component.ts"></script> <!--your component file location-->
</body>
</html>
I don't see where you're including angular though. Add it into your code.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script>
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "johns";
});
</script>
</body>
</html>
I create controller and html page.
'use strict';
angular.module('myApp.view3', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view3', {
templateUrl: 'view3/view3.html',
controller: 'View3Ctrl'
});
}])
.controller('View3Ctrl', [function($scope) {
$scope.my_name = "Pasha";
}]);
and it is my html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My view</title>
</head>
<body>
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>
I want show in browser my html.
Hello Pavel
Pasha
Angular seed app: v0.1
But I see in browser
Hello Pavel
{{my_name}}
Angular seed app: v0.1
I use example from link
EDIT: I add appjs.
It is my app js file my file it is my file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Add ng-app and ng-controller to your body
Add '$scope' in the controller
'use strict';
angular.module('myApp.view3', [])
.controller('View3Ctrl', ['$scope', function($scope) {
$scope.my_name = "Pasha";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My view</title>
</head>
<body ng-app="myApp.view3" ng-controller="View3Ctrl">
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>
HTML
<div ng-controller="View3Ctrl as ctrl">{{ ctrl.my_name}}</div>
You also need to set your documents ng-app attribute. See more in the docs.
I have a really dumb problem but I don't know how to fix it. I have this index.html file with AngularJS loaded. I'm using Plunker to test the code:
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="BodyController">
<h1>{{ message }}</h1>
</body>
</html>
And this script.js file with this information:
var BodyController = function($scope) {
$scope.message = "Hi Angular!"
}
In the inspector it says:
Error: [ng:areq] Argument 'BodyController' is not a function, got undefined
The script is loaded. I have defined the controller in the JS file and attach the ng-controller directive, so I don't know where this can fail.
This is very basic of AngularJS.
You first need to create a module:
var fooApp = angular.module("foo", [])
And then, register your controller there:
var BodyController = function($scope) {
$scope.message = "Hi Angular!"
}
fooApp.controller("BodyController", BodyController);
And, in your HTML tag, change your ng-app like this:
<html ng-app="foo"></html>
You need to add the controller to your Angular module.
angular.module('app', [])
.controller('BodyController', function($scope) {
$scope.message = "Hi Angular!"
})
More info on how to setup a controller
https://docs.angularjs.org/guide/controller
In HTML, add
<html ng-app="myapp">
and the script is
angular.module('myapp', []).controller('BodyController',BodyController)
There were several errors
ng-app was not set
angular module was not defined
the controller was not defined
angular.module('app', [])
.controller('BodyController', function($scope) {
$scope.message = "Hi Angular!"
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="BodyController">
<h1>{{ message }}</h1>
</body>
</html>
Below code is not giving output as expected i:e Hello,World
output: {{ greetings.text }}, world
Can anyone help me why its not displaying 'hello, world' instead where I am wrong
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular JS App 1</title>
<script type="text/javascript" src="angular-v1.4.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'> //controller
<p>{{ greetings.text }}, World</p>
</div>
</body>
</html>
script for controller
function HelloController($scope){
$scope.greetings = {text : 'hello'};
}
Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.greetings = {
text: 'hellow world'
}
});
HTML
add module name
<html ng-app="app">
add module name in ng-app..
like
<div ng-app='app'>
</div>
like this
<script>
angular.module('app', [])
.controller('testCtrl', ['$scope', function($scope){
$scope.test ="hello world";
}])
</script>
plunker code here
You need to provide the value for ng-app directive.
Like
<html ng-app="myapp">
and you should have the angular module myapp defined in script.
I'm new to Angular JS.
I have a few questions. Scope seems to be working with my first controller testController but not with my second controller controlspicy.
Why is not letting me print out $scope.greeting ? Shouldn't the binding work because I assigned a controller.
Here's a plunkr link which directs straight to the code.
http://plnkr.co/edit/NbED8vXNiZCqBjobrISa?p=preview
<!DOCTYPE html>
<html ng-app="newtest">
<head>
<script data-require="angular.js#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="spicy.js"></script>
</head>
<body ng-controller="testController">
<h1>Hello Plunker! {{message}}</h1>
<input type="text" name="firstName" ng-model="thetext">
{{double(thetext)}}
<h1 ng-controller="controlspicy">new test</h1>
<h2>{{greeting}}</h2>
</body>
</html>
script.js
var app = angular.module("newtest", [])
.controller("testController", ["$scope", function($scope) {
$scope.message = "hola";
$scope.double = function(value){
if (value == null){
return 0;
}
return value*2;
};
}]);
spicy.js
var appl = angular.module("thespicy", [])
.controller("controlspicy", ["$scope", function($scope){
$scope.greeting = "hello";
}]);
As previously mentioned by Preston you need to wrap the <h2> inside a tag with ng-controller. There is one more issue however.
controlspicy is defined in another module than the one you specify in ng-app.
Change angular.module("thespicy", []) in spicy.js to angular.module("newtest").
You should almost never use more than one module in one app. You could however divide it into different sub-modules but if your new to Angular I would recommend using just one module to start with.
To clarify; you should only define a module once by typing angular.module("module_name", []). Notice the [] here. In this array you would put dependencies for the module (if you really wanted the 'thespicy' module you could have included it as a dependency with angular.module("newtest", ['thespicy']). If you later wanted to add a controller to the module you would reference the module with angular.module("module_name") (no []). For example:
// Define a module
angular.module('foo', []);
// Reference the previously defined module 'foo'
angular.module('foo')
.controller('barCtrl', function() { ... });
Here is a working fork of your example: http://plnkr.co/edit/rtUJGeD52ZoatoL3JgwY?p=preview btw.
The nested controller only controls inside the scope of the tag. In this case, it only has access to the scope inside of the h1 tag.
Try this:
<!DOCTYPE html>
<html ng-app="newtest">
<head>
<script data-require="angular.js#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="spicy.js"></script>
</head>
<body ng-controller="testController">
<h1>Hello Plunker! {{message}}</h1>
<input type="text" name="firstName" ng-model="thetext">
{{double(thetext)}}
<div ng-controller="controlspicy">
<h1>new test</h1>
<h2>{{greeting}}</h2>
</div>
</body>
</html>
Here's a working plunker of your example: http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview
I should point out that you didn't include your controller in your main app.
script.js should start like this:
var app = angular.module("newtest", ['thespicy'])
You have multiple apps
check this plunkr for working nested controllers
<div>
<div ng-controller="testController">
<h1>Hello Plunker! {{message}}</h1>
<input type="text" name="firstName" ng-model="thetext">
{{double(thetext)}}
</div>
<div ng-controller="thespicy">new test
<h2>{{greeting}}</h2>
</div>
</div>
script.js
var app = angular.module("newtest", [])
.controller("testController", ["$scope", function($scope) {
$scope.message = "hola";
$scope.double = function(value){
if (value == null){
return 0;
}
return value*2;
};
}])
.controller('thespicy', ["$scope", function($scope) {
$scope.greeting = "Hello";
}])