i have this code in my script.js file
var mainController = function($scope){
$scope.message = "Plunker";
};
and this is my HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<h1>Hello {{ message }}</h1>
</body>
</html>
i declared ng-app in the opening html tag
but i get this error on my console that mainController is not registered
To paraphrase http://www.w3schools.com/angular/angular_modules.asp
<div ng-app="myApp" ng-controller="mainController">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("mainController", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
The important line is
app.controller("mainController", function($scope)
which injects your controller into your app
The code is following an obsolete example.
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:
Before:
function MyController() {
// ...
}
After:
angular.module('myApp', []).controller('MyController', [function() {
// ...
}]);
-- AngularJS Developer Guide -- Migrating from 1.2 to 1.3
You need to register your controller with as like this in your script.js file
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.message= "msg";
});
You need to register your controller with the main module of your application.
Try this in your app.js
var myApp = angular.module('app', []);
myApp.controller('mainController', function($scope){
$scope.message = "Plunker";
});
and in your html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<h1>Hello {{ message }}</h1>
</body>
</html>
In case you have your code correct and still getting this error then look in the Console (JS Console) in the browser using inspect window for another JS error shown. Most propably that error will be before this error.
If you solve that JS error then this will get resolved automatically if your code is right. In my case I started getting this error out of the sudden and tried to solve it but nothing work and then I try something else for sometime and saw another error above this error and tried solving it. That was a easy thing to solve and once done this error also got solved by itself.
Related
I can't understand why the text I type in my controller is not linking to the view.
I created two javascript files. app.js and MainController.js
I followed a tutorial from Codecademy to replicate a similar scenario but I'm probably missing something very rudimentary which I can't figure out for some reason.
Below are my files:
index.html
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp" ng-controller="MainController">
<h1>{{title}}</h1>
<scipt src="js/app.js"></scipt>
<script src="js/controller/MainController.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', []);
MainController.js
app.controller('MainController', ['$scope', function ($scope) {
$scope.title = 'Hola!';
}]);
I think it could be to do with having my Main Controller in a separate file to the app.js file.
I think that you're not loading Angular in your main page (index.html), so just add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
you need to declare the app variable before referencing it in MainController.js
// MainController.js
var app = angular.module('myApp');
In mainController
angular.module('myApp').controller(......
You need to add Angular.js to you head.. Before you app.js I think angular is not loaded now.
index.html
<head>
<title>{{title}}</title>
<script data-require="angular.js#1.5.0-rc.0" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0- rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body >
<h1>{{title}}</h1>
{{1+1}}
</body>
</html>
app.js
(function() {
angular.module('myApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.title = 'Hello world!';
}]);
}())
NOTE: Do not declare a variable app as this is on global scope. which can be overwritten by something else always try to use a IFFE
and add your controllers to your module and create other modules if you want to put services inside another file.
I'm new on Angular, I'd like to know what's wrong with my code, because the browser shows me this error: Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
y el codigo es este:
<!doctype html>
<html ng-app>
<head>
<title>Angular Practice</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Angular Practice";
}
</script>
</body>
</html>
Thanks a lot.
Your HelloWorldCtrl isn't defined.
This is because you're not binding it as an angular module with a controller attached.
ng-controller looks for a definition like this:
angular.module('HelloWorldCtrl', [])
.controller('HelloWorldCtrl', function($scope){
$scope.helloMessage = "Angular Practice";
});
That controller also needs to be assigned to the main app, which you need to reference on that ng-app directive, i.e.
<html ng-app="helloWorldApp">
Which should point to a module you create as such:
var helloWorldApp = angular.module('helloWorldApp ', [
'HelloWorldCtrl'
])
Notice, I'm including a 'HelloWorldCtrl' reference as an item for the second parameter on that module definition. This tells angular to load that controller as a resource which you can then reference through that ng-controller directive.
EDIT:
Did a little research on my mention of adding 'HelloWorldCtrl' as an item in the array above and wanted to elaborate a little bit on why my solution is slightly different than the other answer here. The way I've set it up, is such that 'HelloWorldCtrl' is a separate module. In this case you do need to reference it in the way I have. This tells the app module that it depends on the 'HelloWorldCtrl' module. In the answer below mine is binding that controller directly to the app, in which case this isn't necessary.
Steps to make it working,
Add a ng-app directive to your <html> tag
Define your module app in the script below.
Define your controller HelloWorldCtrl as below.
Check this Plunker - http://plnkr.co/edit/w8RWm6nr1WgvhX3BbGUE?p=preview
!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</head>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
angular.module('app', []);
angular.module('app').controller('HelloWorldCtrl', [ '$scope', function($scope) {
$scope.helloMessage = "Angular Practice";
}]);
</script>
</html>
I am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have.
Any solutions I have come across here aren't working for me though.
In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here.
I am given the following error console:
In the long list of errors there, I have picked out the first as as saying:
"FirstCtrl' is not a function, got undefined"
Anyone know of a solution?
Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?
Code:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Here is your exemple working (Run the exemple ...).
Add you app name.
Declare your controller using angular.controller.
angular.module('myApp', []);
angular.module('myApp').controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
An Angular controller is defined like this :
var app = angular.module('myApp',[]); //Your app
//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
//Do whatever you want in this controller
$scope.data.message = 'Hello!';
}]);
Then you bind your controller to the view (your HTML) using the ng-controller attribute.
You're missing the part where you define your controller.
You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.
Example:
angular.module("app").controller("FirstCtrl", FirstCtrl);
And then you have your FirstCtrl function:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
You also need to include that file in your html scripts
<script src="mypath/firstctrl.js"></script>
I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.
This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Closed 7 years ago.
I am new in Angular.js and start learning angular on plunker.co. The problem is when I use ng-controller in any tag of html page , angular stops working. I mean {{ 4+4 }} display as it is just after the using of ng-controller.
this is code from Plunker.co
<html ng-app>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15"
src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Hello Plunker!</h1>
{{8*8}}
{{message}}
</body>
</html>
without ng-controller it displays 64 as output but with ng-controller is displays as it is like {{8*8}}. why it is happening. Please give some advice. thnks in advance. :)
script.js
var MainController = function($scope){
$scope.message = "Hello World!";
}
edited
Now message attirbute value is not displaying on page.
First try to set a name for your app :
<html ng-app="myApp">
then set a name for your controller :
<body ng-controller="MainController">
and finally, all you need to do is to define your app :
myApp = angular.module('myApp', []);
and try this definition for your controller :
myApp.controller('MainController', function($scope) {
$scope.message = "Hello World!";
});
ng-controller expects a parameter that is the name of the controller defined in your angular code. Something like ng-controller=foo. You should read up more on how Controllers work
I'm not sure if you can use in the AngularJS controllers without name. Please set a name for your controller and it should work.
What do you mean it all works? http://jsfiddle.net/4xfq2xLu/2/
<div ng-app>
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
{{8*8}}
{{message}} </div>
</div>
JS
var MainController = function($scope){
$scope.message = "Hello World!";
}
When there is a line of code in an Angular application that causes an error, the entire template is broken.
For example, this code (which results in an error when we try to assign a value to foo.bar):
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div class="container" id="home" ng-controller="MainCtrl">
<h1>Message: {{hello_msg}}</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<script>
var myApp = angular.module('myApp', ['myApp.controllers']);
angular.module('myApp.controllers', []).
controller('MainCtrl', ['$scope', function ($scope) {
var hello_msg = 'Hello!';
$scope.hello_msg = hello_msg;
// malformed JS
foo.bar = 'app breaks';
}]);
</script>
</body>
</html>
Completely breaks the page, and it looks like this:
Is there some configuration option that I can add to my Angular app so that the page erorrs out more gracefully? Specifically, the variables in the templates that are wrapped in {{ and }}, do not display them at all if there is an error in the app.
One way to error out more gracefully would be to use:
<div ng-bind-html="hello_msg">
The ugly {{hello_msg}} would not display when the foo.bar breaks the app.
Please check this plunker that proves the point
IMPORTANT NOTE
To use ng-bind-html instead of the curly brackets, you need to include ng-sanitize in your module.