angular 1.5 controller not displaying text - angularjs

I am trying to learn angular 1.5 and i am having difficulty getting the controller to display the text on the webpage. It display event.name instead of what is in the controller.
This is EventDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script scr="/lib/jquery.min.js"/>
<script scr="/lib/underscore-1.4.4.min.js"/>
<script scr="/lib/boostrap.min.js"/>
<script scr="/lib/angular/angular.min.js"/>
<script scr="/js/app.js"/>
<script scr="/js/controllers/EventController.js"/>
</body>
</html>
my app.js
var eventsApp = angular.module('eventsApp',[]);
EventController
'use strict';
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);


Your controller should be,
eventsApp.controller('EventController',
function($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);
DEMO
var eventsApp = angular.module('myApp',[])
eventsApp.controller('EventController', function($scope){
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
} ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="EventController">
<div class="container">
<h1> {{event.name}} </h1>
</div>
</div>
</body>


You're missing an ng-app="myApp" declaration on your html which is why your angular app is not running.


Try to reverse the scripts loading order in your EventDetails.html.
app.js should be loaded last.
The right order should be:
<script scr="/js/controllers/EventController.js"/>
<script scr="/js/app.js"/>
and you should adopt the other comments as well, adding ng-app annotation (#geofrey comment) and refactoring your controller (#Sajeetharan comment)


Use "src" attribute instead "scr" (not "script scr=...") in script tags.
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script>
var eventsApp = angular.module('eventsApp',[]);
'use strict';
eventsApp.controller('EventController', function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
});
</script>
</body>
</html>

Related

How do I call $http.get in AngularJS

Attempting to learn angularjs because I need to modify some stuff at work and that is what they are using and I can't upgrade to Angular2+ at the moment. I have the following code where I'm trying to use the $http.get method but getting $http not defined error in the console.
// js code
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
// 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="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>

You need to pass $http as a dependency to your controller,
app.controller('HelloWorldCtrl', function($scope,$http){
});
DEMO
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
<!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="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>

Angular JS $http.get()

For the below given code I'm not getting output
<div ng-app="myApp" ng-controller="mCtr">
<p>{{content}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('mCtr',function($scope,$http)
{
$http.get("welcome.html").then(function(response)
{
$scope.content = response.data;
});
});
</script>
I am getting output like this
<!DOCTYPE html>
<html>
<head>
<title>AJS Services HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p>Welcome to world of AJS</p>
<h1>AJS means Angular JS</h1>
</body>
</html>

Not able to read data from Controller in Angular JS

can anyone point the mistake as to why i am unable to read the data from the controller ?
Link to plunker
Plunker
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
// Code goes here
var MainController = function($scope) {
$scope.message = "Hello";
};

Where is the ng-app name ? Provide module name.
angular.module('myApp',[])
.controller('SomeCtrl',function($scope){ .. your code ...})
Provide it in .html file
<html ng-app="myApp">
Fixed your Plunkr
You are referring to older version of AngularJS for learning and using 1.5 in plunkr. Check the below link
For your app, refer
this link
and this one too

While your code may be correct, but it is prior to the versions 1.3.0
Versions Before 1.3.0:
Prior to 1.3.0, angular was able to automatically discover controllers
that were defined globally.
Check Below I have created without module
<div ng-app>
<div ng-controller="MainController">
{{message}}
</div>
</div>
The code can be:
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker version prior to 1.3.0
Versions After 1.3.0:
You can use $controllerProvider.allowGlobals() to enable that behaviour.
allowGlobals allows $controller to find controller constructors on
window
angular.module("ng").config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
function MyController() {}
</script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker with versions after 1.3.0
Note: I personally recommend to use the latest versions with modules
and ng-app="app" format.
angular.module('myApp',[])
.controller('MainController',function($scope){ .. your code ...})

Here you go!!
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
script.js
angular.module('app',[]).controller('MainController',function MainController($scope) {
$scope.message = "Hello";
})

Run controller in angular js

I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>

try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>

You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>

Angular.js first issue

I am following a tutorial but stuck on one issue. I don't know what I am missing here.
//script.js
var MainController = function($scope)
{
$scope.message = "Hello!!!!";
};
<!-- index.html -->
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/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>
Problem is -
The message is not binding.

Create your module first, then add the controller to the module, specify both the app and controller in your HTML portion.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
var MainController1 = function($scope)
{
$scope.message = "Hello!!!!";
};
app.controller("MainController1", MainController1);
</script>
</head>
<body ng-controller="MainController1">
<h1>{{message}}</h1>
</body>
</html>

Resources