I'm starting with angularjs and I'm having problems to put to work a really basic example with version 1.3.1. I followed a tutorial with the following code:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.company}}</p>
</div>
<script>
function MyController($scope) {
$scope.author = {
'name': 'Some Name',
'company': 'Some Company'
}
}
</script>
</body>
</html>
And I'm getting the following result:
{{author.name}}
{{author.company}}
It seems that angular is not properly initialized.
Give a name to your app:
<html lang="en" ng-app="app">
And then initialize it and your controller properly:
var app = angular.module('app', []);
app.controller('MyController',MyController);
http://plnkr.co/edit/dRWz0ZPQae75PlJmgSTM?p=preview
You can/should move your script to the <head> section as well, so that {author.name} doesn't flash on the screen before the controller is initialized.
Related
I just started with VS2015 ASP.Net5 using Angular. I get an error when using the angular retrieved by Bower:
Error: [ng:areq] Argument 'TextController' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=TextController&p1=not%20a%20function%2C%20got%20undefined
This is my html code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<!--works-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>-->
<script>
function TextController($scope) {
$scope.SomeText = "Go";
}
</script>
</body>
When I use the Angular Google provides it works like a charm.
Below is a what a picture of what was generated using Bower in VS
What am I missing?
UPDATE
This is the working version thanks to Claies:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<script>
angular.module('myApp', []).controller('TextController', function ($scope) {
$scope.SomeText = "Go";
});
</script>
</body>
</html>
Your controller cannot be global in the latest release of Angular, and, even if it should, you should try to modularise your design anyway.
Declare a module:
angular.module('myApp', [])
and register the controller onto the module:
angular.module('myApp')
.controller('TextController', function() { /*...*/ })
Finally, add the module to the ng-app directive:
<html ng-app="myApp">
I am new in angularjs, so i try this script in Index.html like this:
<!DOCTYPE html>
<html lang="en" ng-app="DEMO">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.HelloMessage = "Hello Pejman";
}
</script>
</body>
</html>
but when i run this, it show {{HelloMessage}} instead of Hello Pejman , what is the problem?
EDIT : this is the tutorial:
You did not bootstrap angular module, that is why your code doesnt work. You must call ng-app in any HTML tag to notify Angular start in there. So all of the sub tags under the tag Angular declared will be able to use directives, scope, controller etc.
Please check here to understand how to create controller and use it : https://docs.angularjs.org/guide/controller
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="angular.min.js"></script>
</head>
<body>
<h1 ng-app="demo" ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script type="text/javascript">
var app = angular.module('demo', []);
app.controller('HelloWorldCtrl', function($scope) {
$scope.HelloMessage = "Hello Pejman";
});
</script>
</body>
</html>
I'm trying to make my AngularJS HelloWorld work but I can't. My code is the following:
<!DOCTYPE html>
<html np-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
</body>
The output:
{{mensagem}}
I searched about similar questions here in SO but found only questions with a missing ng-app atribute.
I tried opening my file both in Firefox and Chrome and I get the same error. Logging both angular and app reveal that they are both defined.
I don't know what I'm doing wrong.
In your HTML tag, you've misspelled ng-app, which is probably the main reason it's not working. You should also place the include for Angular down at the end of the body, which ensures the app and controller elements are defined before the script runs:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</body>
</html>
Using Angular v1.3.13. Version1 does not work in Chrome:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Error:
Argument 'HelloWorldCtrl' is not a function, got undefined
Version2 works fine:
<!doctype html>
<html lang="en" ng-app=myApp>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('HelloWorldCtrl',
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
});
</script>
</body>
</html>
Version1 is the original code from a Pluralsight course. In the course the code works fine. Did I make an error or does this no longer work due to changes in AngularJs?
From angularV1.3 to use functions defined on window scope as controllers we need call alloGlobals method defined on $controllerProvider.
module.config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
documentation
changelog
Yes. Using global functions is not supported anymore. But it's been quite a long time: since 1.3.0
Can someone explain why the below code is not working?
I am new to Angular and am trying a very basic example.
The HTML simply prints {{data1}} instead of "hi!".
<!DOCTYPE html ng-app='myApp'>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var module1=angular.module('myApp',[]);
module1.controller('controller',function ($scope){
$scope.data1='hi!';
});
</script>
</head>
<body ng-controller='controller'>
<p>{{data1}}</p>
</body>
</html>
<!DOCTYPE html ng-app='myApp'>
<html>
needs to be
<!DOCTYPE html>
<html ng-app='myApp'>