Below is my very simple example where I am trying to implement controller.
{{8/2}} is giving correct output i.e. 4 but {{message}} remains same.
It should be replaced by some value e.g. First Controller
I downloaded the angular js from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>{{8/2}}</h1>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
Script.js
var HomeController = function($scope) {
$scope.message = "First Controller";
};
I downloaded the angular js from
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
Well angularjs version 1.4x does not support raw functions controllers to be used as controllers. change the angularjs version to 1.2.x OR use angular.module('someName').controller() syntax to make it work.
Here's the same plunkr you shared(with angularjs 1.2.8)
Here's the plnkr with angular.module() syntax
Update your html from
<html ng-app>
to
<html ng-app="myApp">
Update your script.js to
angular.module("myApp", []).controller("HomeController", function($scope){
$scope.message = "First Controller";
});
replace your Script.js with this
var ng_app = angular.module('ng_app',[]);
ng_app.controller('HomeController', ['$scope', function($scope) {
$scope.message = "First Controller";
}]);
edit ng-app in your html to ng-app='ng_app'
There was a problem with your angular version If you will use a older version then it works fine
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app>
{{8/7}}
<div ng-controller="HomeController">
{{message}}
</body>
</html>
<script >
// Code goes here
var HomeController = function($scope) {
$scope.message = "First Controller";
};
</script>
You are using old syntax that is no longer supported.Instead of defining controller as var. Add ng-app="app", then create a module
var myApp = angular.module('app',[]);
Now define your controller -
myApp.controller("HomeController",function($scope){
$scope.message = "Hello";
});
Related
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 am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
I'm a beginner, I have a simple Angular JS that's not working, I don't understand why, here is my code (the two files index.html & script.js are in the same folder):
index.html :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
script.js :
var MainController = function($scope) {
$scope.message = "Hello";
};
The ng-model is working, the name that I write in the textbox gets displayed, but I get {{message}} instead of the actual message Hello that I have in the scope of the controller.
Thank you in advance.
Name your app
<body ng-app="myApp">
Create an app.js
var app = angular.module("myApp", []);
Rename script.js to MainController.js , (Don't have to, but for a clean development)
app.controller('MainController', ['$scope', function($scope) {
$scope.message = "Hello";
}]);
I've been following an Angular.js tutorial, however it is a bit old and this is not compatible after version 1.2.5
HTML file
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="angular.js#*" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloController">
<h1>{{message}}</h1>
</body>
</html>
js file
var MainController = function($scope)
{
$scope.message = "Hello, Angular!";
}
how do I do this in 1.4.3 ? thanks
In your html you mentioning HelloController instead of MainController
You can create a controller and add it to an angular module.
Be careful, angular.module() provide getter and setter syntax :
getter : angular.module('myModuleName')
setter : angular.module('myModuleName', [])
Controller
(function(){
function Controller($scope) {
$scope.name = 'john';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller='ctrl'>
Hello {{name}}
</body>
Working Plunker
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>
...