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"
};
}
);
Related
I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.
Here is my html page.
index.html:
<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Angular Tutorial</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
<h1>{{tutorialObject.title}}</h1>
<h2>{{tutorialObject.subTitle}}</h2>
<hr/>Number: {{2+2}}
<p>{{tutorialObject.bindOutput}}</p>
</body>
</html>
app.js:
var app = angular.module('tutorialApp', ['tutorialCtrlModule']);
tutorialCtrl.js:
angular.module('tutorialCtrlModule', [])
.controller('ToturialCtrl', ['$scope', function($scope){
//Code
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Angular Tutorial";
$scope.tutorialObject.subTitle = "Basic";
$scope.tutorialObject.bindOutput = 2;
}]);
I could not even understand what could be the wrong thing i have done.
I am attaching the screenshot below:
You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule
<script src="js/controllers/tutorialCtrl.js"></script>
<script src="js/app.js"></script>
EDIT:
You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl
Here is the working DEMO
Should be a basic solution but for the life of me I don't see what is wrong.
I am attempting to run an Angular JS application and I am getting a runtime error:
JavaScript runtime error: 'angular' is undefined
Here is my code below.
(function() {
var app = angular.module('MyApp', []);
app.controller('MyAppController', function($scope) {
$scope.message = "Hello, World!";
});
}());
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1> Angular JS App </h1>
<div ng-app="MyApp" ng-controller="MyAppController">
<label> {{message}} </label>
</div>
</body>
</html>
Thank you in advance!
You placed your ngApp directive twice in your view template.
https://plnkr.co/edit/cSTHyVqMHFVw8ht9mkIr
<body ng-app="app">
<h1> Angular JS App </h1>
<div ng-controller="ctrl">
<label> {{message}} </label>
</div>
</body>
Declaring once will solve your issue.
angular.module('form', []).controller('formcontroller', ['$scope',
function($scope) {
$scope.input;
$scope.hello = "<h1> Welcome</h1>";
}
]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<form ng-app="form" ng-controller="formcontroller">
<span ng-bind="hello"></span>
<span ng-bind-html="hello"></span>
</form>
</body>
</html>
I tried by using
It results in the output as
<h1> Welcome</h1>
I tried by replacing ng-bind-html is not woking and throws an error.
<script>
angular.module('form', []).controller('formcontroller', ['$scope', function($scope) {
$scope.hello="<h1> Welcome</h1>";
}]);
</script>
Error: $sce:unsafe Require a safe/trusted value Attempting to use an
unsafe value in a safe context.
Please explain.
If you include the angular-sanitize script, inputs are sanitized by parsing the HTML into tokens
var miAp = angular.module('miAp', ['ngSanitize']);
miAp.controller('demoController', function($scope) {
$scope.bar = "<h1> Welcome</h1>";
});
<html>
<head>
<meta charset="utf-8">
<title>ngBind</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script>
<script src="cookies.js"></script>
</head>
<body ng-app="miAp" ng-controller="demoController">
<div ng-bind-html="bar"></div>
</body>
</html>
You can install and include ngSanitize.
This should fix the error.
When you use ng-bind-html to bind html string , that html need to be marked safe to prevent prevent XSS and other security issues . This is checked by Angular's Strict Contextual Escaping (SCE) mode that enabled by default .
You can see more in this link : https://docs.angularjs.org/error/$sce/unsafe .
To resolve this problem, you can view this issue :
With ng-bind-html-unsafe removed, how do I inject HTML?
Hope this help ! Thanks
Try This
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script>
var App = angular.module('sanitize', ['ngSanitize']);
App.controller('demoController', function($scope) {
$scope.bar = "<h1> Welcome</h1>";
});
<h1 data-ng-bind="hello"></h1>
I have what I think is a pretty basic Angular JS question. Can someone please explain to me why the expression.
{{hi}}
Is not evaluating and I am getting the following error:
Uncaught TypeError: angular.module is not a function
Here's the plunker and the code is below.
Html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
js:
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.hi= 'hi';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
You are using Angular 2.0 reference
Once I updated the reference to 1.4.0-rc1
It worked correctly. Here is the updated plunker :
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="main.es6.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
Hi you are using in your code Angular 2.0 plugin
you have written angular 1 syntax, so you have to write angular 1.4.0 plugin in html , then it will may work perfectly
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>
...