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>
Related
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
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.
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";
});
Hello I had watched an tutorial about AngularJS. In this tutorial was showed how to build an easy hello world app but when I try the exactly same code it dosen't work.
All scripts are loaded well. Has someone an idea?
index.html
<!DOTYPE html>
<html ng-app>
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl">{{test}}</div>
</body>
</html>
Controller
function MyFirstCtrl($scope) {
$scope.test = "Hello World";
}
My output is {{test}}.
You need to give name to your ng-app directive, a different way using Controller as syntax, would be:
<!DOTYPE html>
<html ng-app="myApp">
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
</body>
</html>
and controller js
var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
this.test = 'Some test';
});
A jsFiddle Demo
You must create the app like this:
angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
$scope.test = "Hello World";
}]);
And load in html ngApp the respective app:
<html ng-app="myApp">
You need to pass the angular script and your controller script
<!DOTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="path/to/controller.js"></script>
</head>
...
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"
};
}
);