Newbie to AngularJS. Trying to display a message from controller onto the html page but it does not show. I'm using AngularJS version 1.6.0 and I binded the controller to the body tag. What am I missing?
/// HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
// script.js file contents
var app = angular.module('app', []);
app.MainController('MainController', function($scope) {
$scope.message = "Hello, Angular!";
});
Thank you.
Since you are using the version 1.6 , declaration of global controller is not supported, you need to have a module as well.
DEMO
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
$scope.message = "Hello, Angular!";
});
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
do you need to pass the name of your app on the ng-app tag.
Like this:
<html ng-app="your-app">
So Angular understand where it comes.
So, an advice to you is using the controllerAs syntax over the classic controller with $scope syntax.
Like this:
JS file:
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
var vm = this; // view model
vm.message = "Hello, Angular!";
});
HTML file:
<body ng-controller="MainController as mainCtrl">
<!-- or any other name, your choice -->
<h1>{{mainCtrl.message}}</h1>
</body>
Why?: Controllers are constructed, "newed" up, and provide a single
new instance, and the controllerAs syntax is closer to that of a
JavaScript constructor than the classic $scope syntax.
Why?: It promotes the use of binding to a "dotted" object in the View
(e.g. customer.name instead of name), which is more contextual, easier
to read, and avoids any reference issues that may occur without
"dotting".
Why?: Helps avoid using $parent calls in Views with nested controllers
https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-view-syntax
I hope this helps you
Related
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I am new to web development, trying to learn angularjs, and got stuck at very first step, this code works fine when I remove ng-controller but in this condition the browser shows Hello, {{name}}.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
<head >
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta character="uft-8">
<title></title>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
controller.js
function AppCtrl($scope)
{
$scope.name: "world";
}
You are calling module named app which you didn't declared.
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
If you provide module name then controller have to bind with that module.
To assign a value you have to use = not :
$scope.name: "world";
Try Like this
$scope.name= "world";
Moreover Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope) {
$scope.name= "world";
});
JSFIDDLE
I am following along a tutorial for angualr js that is in angular 1.3 ,but I am using the lastest stable version 1.4.7. The following code doesnt work in 1.4.7 although it does in 1.3.2. Could you please tell me the changes I need to do for the code to work ?
HTML :
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
JavaScript :
var MainController = function($scope){
$scope.message = "Hello World";
};
I am using the online tool plunker to code.
Can you please tell me the changes I need to make ?
Global controller constructors are disabled by default since version 1.3.0-beta.15.
In later versions use this instead:
angular.module('myApp', []).controller('MainController', function($scope) {
$scope.message = "Hello World";
});
And:
<html ng-app="myApp">
Demo: http://plnkr.co/edit/XWv50NKr5ojiplbMHI59?p=preview
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>