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.
Related
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.
I'm new to angular and I'm learnign it using phpStorm tool.
It looks like I've done everything right, but I still can't get the right result when I execute the following html and Javascript codes, I did lots of researches on this and made sure that I followed the solutions provided without getting a step ahead:
index.html
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>
and my app.js file:
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
Same code is working, angular.min.js may not included properly, access your index.html file using http:// instead of file://
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
You have to include ngRoute in your project.
<script src="angular-route.js"> You can get this file here.
And in your app.js
var app = angular.module("myApp", ['ngRoute']);
And it will start working correctly.
Now, the reason this works in jsFiddle but not locally.
That is because if you look at left pane in jsFiddle under Frameworks & Extensions, you will find the selected option to be no wrap - in <body>
Which means that the code you write in javascript block of js fiddle will be placed inside the body tag the the generated html and therefore, you don't need ngRoute.
But while running locally, I see you have your module initialization in different file viz. app.js that is where ngRoute comes into picture.
In older versions of angular ngRoute was included in angular itself. But in latest versions (not sure from which versions) the ngRoute module is provided separately.
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 is a nooob question - as in I started learning Angular today. I was following the tutorial at Angular JS in 30 mins
The idea is to setup basic databinding in Angular. The code displays an input box, and shows(updates) whatever is typed in the box adjacent to it. Coming from a Java world and Spring MVC background, it makes perfect sense as long as the code is as follows:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test Angular</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="maincontroller.js"></script>
</head>
<body>
<div id="content" ng-app="SampleAngular" ng-controller="MainController">
<input type="text" ng-model="inputVal">{{ inputVal }}
</div>
</body>
</html>
app.js
var app = angular.module('SampleAngular', []);
maincontroller.js
app.controller("MainController", function($scope){
$scope.inputVal = "";
}
);
But, the same thing still works if I have a blank body for the controller i.e.:
maincontroller.js
app.controller("MainController", function($scope){
}
);
I understand that I will not be able to get the value of inputVal in the controller but
a) why does it still work in the view?
b) Clearly, I don't have a corresponding model 'inputVal' as defined in ng-model directive, and there are no errors/warnings - which IMHO - is equivalent to failing silently. Is this how Angular is designed? Is this a potential issue in large apps and will make debugging a nightmare?
Thanks in advance.
The following is from the api documentation for ngModel:
Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
Whenever a ng-model is used in the view, corresponding model value is created on the scope of the controller. Angular won't be throwing any error in this case, as this is its default behaviour.
$scope.inputVal = "";
is used more like initialisation of the variable being used.