I was following a tutorial and i typed the code below
the angular folder in libs directory contains the minified verison of Angular js taken from https://angularjs.org/ the output i am getting is
{{author.name}}
{{author.title + ', ' + author.company }}
what is wrong here ?
can anyone please help thanx...!!!
<html lang="en" ng-app=>
<head>
<title>Angular Demo</title>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.company }}</p>
</div>
<script>
function MyController($scope)
{
$scope.author = {
'name':'aaa',
'title': 'bbb',
'company':'ccc'
}
}
</script>
</body>
</html>
The reason why angularjs isn't working in your case, is because of the VERSION of angular that you are using. I was able to get your app to work with Angular 1.2.1, but not Angular 1.4+. See example below:
Please follow #beri's answer for a working example with current Angular versions.
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.company }}</p>
</div>
<script>
function MyController($scope)
{
$scope.author = {
'name':'aaa',
'title': 'bbb',
'company':'ccc'
}
}
</script>
</body>
</html>
You have to name your app:
.... ng-app="myApp">
and init it:
angular.module('myApp', [])
.controller('MyController', function ($scope) {
...
});
Add your app name:
<html lang="en" ng-app="my-app">
<head>
<title>Angular Demo</title>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.company }}</p>
</div>
<script>
angular.module('my-app', []).controller('MyController' ,function MyController($scope)
{
$scope.author = {
'name':'aaa',
'title': 'bbb',
'company':'ccc'
}
});
</script>
</body>
</html>
With Angular you can define more than one application per one page, ut in most cases there is only one.
You can use it for modularization - creating independent parts of your page.
Code:
angular.module('my-app', []).controller(...,...)
Will register controller to my-app aplication. [] is used for required dependencies, that have to be included in order to my-app module to start.
Related
I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.
Here is my html page.
index.html:
<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Angular Tutorial</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
<h1>{{tutorialObject.title}}</h1>
<h2>{{tutorialObject.subTitle}}</h2>
<hr/>Number: {{2+2}}
<p>{{tutorialObject.bindOutput}}</p>
</body>
</html>
app.js:
var app = angular.module('tutorialApp', ['tutorialCtrlModule']);
tutorialCtrl.js:
angular.module('tutorialCtrlModule', [])
.controller('ToturialCtrl', ['$scope', function($scope){
//Code
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Angular Tutorial";
$scope.tutorialObject.subTitle = "Basic";
$scope.tutorialObject.bindOutput = 2;
}]);
I could not even understand what could be the wrong thing i have done.
I am attaching the screenshot below:
You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule
<script src="js/controllers/tutorialCtrl.js"></script>
<script src="js/app.js"></script>
EDIT:
You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl
Here is the working DEMO
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
Below is my very simple example where I am trying to implement controller.
{{8/2}} is giving correct output i.e. 4 but {{message}} remains same.
It should be replaced by some value e.g. First Controller
I downloaded the angular js from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>{{8/2}}</h1>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
Script.js
var HomeController = function($scope) {
$scope.message = "First Controller";
};
I downloaded the angular js from
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
Well angularjs version 1.4x does not support raw functions controllers to be used as controllers. change the angularjs version to 1.2.x OR use angular.module('someName').controller() syntax to make it work.
Here's the same plunkr you shared(with angularjs 1.2.8)
Here's the plnkr with angular.module() syntax
Update your html from
<html ng-app>
to
<html ng-app="myApp">
Update your script.js to
angular.module("myApp", []).controller("HomeController", function($scope){
$scope.message = "First Controller";
});
replace your Script.js with this
var ng_app = angular.module('ng_app',[]);
ng_app.controller('HomeController', ['$scope', function($scope) {
$scope.message = "First Controller";
}]);
edit ng-app in your html to ng-app='ng_app'
There was a problem with your angular version If you will use a older version then it works fine
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app>
{{8/7}}
<div ng-controller="HomeController">
{{message}}
</body>
</html>
<script >
// Code goes here
var HomeController = function($scope) {
$scope.message = "First Controller";
};
</script>
You are using old syntax that is no longer supported.Instead of defining controller as var. Add ng-app="app", then create a module
var myApp = angular.module('app',[]);
Now define your controller -
myApp.controller("HomeController",function($scope){
$scope.message = "Hello";
});
I am starting with Angular and installed all Angular packages for Sublime Text 3.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.sex}}</p>
</div>
<script>
function myController($scope){
$scope.author = {
'name' : 'Ivan',
'ocupation' : 'student',
'subject' : 'cs'
}
</script>
</body>
</html>
It is not working I get plain text when I open the page.
Its not recognising anything I write after "$" in the function body, I can see that because it is colouring only the $ and it doesn't connect the $scope in the () brackets and the one inside the function body.
Any ideas? Been trying to fix that for a day now.
Here is working plunkr
You should define angular module and controller.
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.ocupation}}, {{author.subject}}</p>
</div>
<script>
angular.module('app', []).controller('myController', function($scope) {
$scope.author = {
'name' : 'Ivan',
'ocupation' : 'student',
'subject' : 'cs'
}
});
</script>
</body>
</html>
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);