AngularJS newbie error - javascript

Okay so I'm following an AngularJS online beginner course, and wrote my first app :
HTML :
<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{ name }}!</h1>
</div>
</body>
</html>
app.js :
var myApp = angular.module("myApp",[]);
myApp.controller('mainController',['$scope',function($scope){
$scope.name = 'Elliot';
}]);
I don't get the desired outcome from this small app, I only get "Hello {{ name }}!".
What am I doing wrong here?

Change your html tag too:
<html ng-app="myApp">

Related

How to fix an Angular app giving out an empty page in Plunker?

Just defined an app 'Demo' in AngularJS
'use strict';
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.obj={language_selected : {'name':'Choose a language'}};
$scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];
});
Now defined an HTML page correspondingly
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="select.css">
</head>
<body ng-controller="DemoCtrl">
<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
<span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
<ul class="options">
<li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
</ul>
</div>
</body>
</html>
EDIT: Checked the appName -> 'demo' & ng-app is demo & controller is DemoCtrl & ng-controller is DemoCtrl. It is defined appropriately.
The plunker now gives out an empty page.
Am I missing anything here ? Plunker link here: http://next.plnkr.co/edit/nXsUgM7nEsfg7jXh
You forgot to load you js code, please add
<script src="demo.js"></script>
Here is plunker http://next.plnkr.co/edit/g4yKhngP1TyJ8jLr
You are missing to add the reference to demo.js in the index.html. Add the references as follows.
<script src="demo.js"></script>
PLUNKER DEMO
Seems like you forgot to load your js code
<script src="demo.js"></script>
demo

AngularJS error loading Controller

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>

Controller not working in angularjs

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.

Angular JS not working in plunker

I couldn't get my angular code to run in plunker. I have attached the details. Could any of you help me out? Basically it's a problem with ngcontroller I guess but I am not sure.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
{{ 5 / 2 }}<br>
{{message}}
</body>
</html>
Contents of javascript script.js file
var MainController = function($scope){
$scope.message = "Welcome!";
};
Plunk
http://plnkr.co/edit/mzgdELALCP7DN2ikJHsC?p=preview
In version 1.3.*, you cannot longer declare a global controller function.
Instead define a module, and use your controller function:
var SidController = function($scope){
$scope.message = "WElcome.";
};
SidController.$inject = ['$scope'];
angular.module('app', []).controller('SidController', SidController);
In your html
<html ng-app="app">
See this plunker.
I had the same issue.. Well done on starting a tutorial! Simply replace the script in your index.html with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
I suppose the library Plunker currently has is outdated or something.
Working Plunkr (with a different AngularJS version. #user3906922 has a better answer, where your version stays the same).
Use this for HTML for instance:
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="SidController">
<h1>Hello Plunker!</h1>
{{ 5 / 2 }}<br>
{{message}}
</div>
</body>
</html>
Check this plunkr
You need to define your module and then register the controller
http://plnkr.co/edit/9zAV5nSWH05FYscEWYZ5?p=preview
angular.module( 'demoApp', []);
angular.module( 'demoApp' )
.controller( 'SidController', function($scope){
$scope.message = "WElcome.";
});
You should create your module.
angular.module('app', []).controller("SidController", function($scope) {
$scope.message = "WElcome.";
});
Then in your html element, set your attribute like this:
ng-app="app"

Why doesn't my variable render in my view after populating it in my controller?

What am I doing wrong? angular.min.js is in the folder js. I am using the book from O'Reilly. There is an example like this. But on my PC it doesn't work.
//controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-app="">
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
I think you are referring to old book. Please update your controller as below
//controller.js
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
and in HTML
ng-app="myApp"
Please try and let us know whether it is working or not

Categories