Im trying to follow along a tutorial but this code doesn't work for me. Can someone expain why and how to solve it? I think its to do with ng-controller but not sure why.
<!doctype html>
<html ng-app>
<head>
<title>AngularJS 2</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{ author.title + ', ' + author.company }}</p>
<script>
function MyController($scope) {
$scope.author = {
'name' : 'Ray Villa',
'title' : 'Staff Author',
'company' : 'boss`enter code here`.com'
}
}
</script>
</body>
</html>
Your code would not work with angular 1.3+ because your are defining the controller as a global function.
From AngularJS documentation :
Migrating from 1.2 to 1.3
Controllers
Due to 3f2232b5, $controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
To migrate, register your controllers with modules rather than exposing them as globals
Define the controller as follows instead :
<html ng-app="myApp">
<head>
<title>AngularJS 2</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{ author.title + ', ' + author.company }}</p>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('MyController', function ($scope) {
$scope.author = {
'name': 'Ray Villa',
'title': 'Staff Author',
'company': 'boss`enter code here`.com'
}
});
</script>
</body>
</html>
You're missing a closing brace on your function definition.
You are missing the Angular context.
Your application requires a module, so you need to write ng-app="myApp" and use that module to register your controller function.
function MyController($scope) { /* ... */ }
angular.module('myApp, []).controller('MyController', MyController);
This will tell Angular to bootstrap your (myApp) application and register that specific controller.
Related
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
This whole app should consist of an h1 element that says 'Adrian' and a paragraph that says 'He lives in Orlando'. I can't figure out what's wrong with my code. BTW, I already know that this isn't the best design pattern for Angular, but I just wanted something quick to get my feet wet with the framework.
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
}
</script>
</body>
</html>
You are not making Angular aware of your MyController function:
<!doctype html>
<!-- tell Angular what module to use -->
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
angular
// Define our module
.module('app', [])
// Define our controller
.controller('MyController', function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
</body>
</html>
Get in the habit of assigning app names and controllers to the apps, here:
http://plnkr.co/edit/gfWh6fqWeni8s8M0iG1B?p=preview
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
I am not even trying to be a patronizing ass, but check the tutorial here. It will take you a couple of hours. Then head over to Jenkov's "complete" tutorial.
Your code works fine. I believe your angular source file is the issue try switching it to a CDN src or double check your path
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
http://jsfiddle.net/sfwtfp35/2/
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
I am looking for a way to display something like {{model.tauxInteret|number:3}}, with 3 being provided with another variable ie: {{model.tauxInteret|number:model.precision}}, or using a function {{model.tauxInteret|number:myPrecisionFilter(model)}} ....
Any idea if there is a way to do this in angluarJS (without moving the all thing on the controller part with a scope function like {{displayTaux(model)}} (which is my current workaround) ?
Thanks.
Have you tried your own suggestions?
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//plook.injoin.io/angular/1.3.14/angular.js"></script>
<script>
angular.module( "app", [] ).run(function ($rootScope) {
$rootScope.pi = Math.PI;
$rootScope.getPrecision = function() {
return 3;
};
});
</script>
</head>
<body>
My number is {{ pi | number: getPrecision() }}
</body>
</html>
I have an AngularJS app that currently works with the 1.2.9 angular version, but when I change the library version to 1.3.2, I get the following error:
Argument 'AlumnosController' is not a function, got undefined
view code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Cuaderno Alumnos</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body ng-controller="AlumnosController">
<h1>Cuaderno Alumnos</h1>
<div class="wrapper">
<div class="contact-item" ng-repeat="alumno in alumnos | orderBy:'nombre'">
<div class="nombre"> {{alumno.nombre}} - {{alumno.telefono}}</div>
<span class="curso">{{alumno.curso}} </span>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js" type="text/javascript"></script>
<script src= "AlumnosController.js" type="text/javascript"></script>
</body>
Controller code:
function AlumnosController($scope){
$scope.alumnos=[
{nombre:"Juan Blanco", telefono: "1234567890", curso:"Segundo ESO"},
{nombre:"Rosa Luxemburgo", telefono: "0987654321", curso:"Primero ESO"},
{nombre:"Alberto Herrera", telefono: "1122334455", curso:"Segundo ESO"},
{nombre:"Ana Mariño", telefono: "6677889900", curso:"Tercero ESO"}
];
}
Any ideas?
There was a breaking change introduced in Angular 1.3.0-beta-15:
Breaking Changes
$controller: due to 3f2232b5,
$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
To migrate, register your controllers with modules rather than exposing them as globals:
Before:
function MyController() {
// ...
}
After:
angular.module('myApp', []).controller('MyController', [function() {
// ...
}]);
Although it's not recommended, you can re-enable the old behavior like this:
angular.module('myModule').config(['$controllerProvider', function($controllerProvider) {
// this option might be handy for migrating old apps, but please don't use it
// in new ones!
$controllerProvider.allowGlobals();
}]);
References
AngularJS Changelog
I have a problem with boostrapping an angularjs app - with initialization code in the controller. The simplified test-case is like this (index.js):
var myApp = angular.module( 'myApp', []);
myApp.controller( 'myAppController', [ '$scope', function($scope) {
console.log('never shown');
$scope.test = 'constructor called';
// removed more init code
}]);
$(document).ready(function(){
angular.bootstrap( document, ['myApp']);
console.log('Finished boostrapping.');
});
The HTML file for this test-case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TeST</title>
</head>
<body>
{{test}}
<script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
The result is that console output only says "Finished bootstrapping" - and the controller function is never invoked. .. This baffles me a little, but this is my first angular 1.2 app. I get the same result If I put ng-app="myApp" in the tag and let angular bootstrap the app automatically. ...
you never set ng-controller anywhere in your markup.
also, you should either put your script tags in the head, or after </body>.
edit: when using bootstrap this way, the placement of the <script> tags goes matter.
The first parameter to the angular.bootstrap method is an element. Currently you are passing in document, which is not an element.
Try
angular.bootstrap(document.documentElement, ['myApp']);
or
angular.bootstrap(document.body, ['myApp']);