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
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'm following this video tutorial and messed something up in the haste.. The problem is that I got rid of all the errors I made, but it still doesn't work as expected. The search form box doesn't display.
Full code can be found here: plnkr code
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script scr="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body >
<h1>Gihub Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
main.html
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find"
ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
Any help would be appreciated
The problem is that you are redefinig the module in the controller and factory code:
var app = angular.module("githubViewer",[]);
Instead of gettingthe created module:
var app = angular.module("githubViewer");
A module should be created once, then retrieve and add the controller, config, factory, etc...
Here some help.
Basically you all js file has wrong IIFE pattern.wrong
It should be
})();
instead of
}());
Also there are typos. In index.html:
<script scr="app.js"></script>
Must be:
<script src="app.js"></script>
And in MainController.js. This code:
app.controller("MainControler", MainController);
Must be changed to:
app.controller("MainController", MainController);
You are misunderstanding how to implement a module and a controller. In both MainController.js and app.js, you have the line:
var app = angular.module("githubViewer", ["ngRoute"]);
angular.module actually creates a new module. You are effectively trying to create two modules with the same name, which isn't allowed.
The pattern to follow is
var app = angular.module(...)
app.config(...)
var controller = app.controller("MainController", ["$scope", function() {
]]);
If you really want the MainController code to be in a separate file, create a function:
function createMainController(app) {
app.contoller("MainController", ...)
}
I had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.
HTML:
<div id="bnProblemList">
<div ng-controller="problemListCtrl" data-ng-init="init()">
<div ng-view="">this is my message = {{message}}</div>
</div>
</div>
JS:
html = $j('#bnProblemList').html();
$compile(html)(scope);
Please let me know how to inject or load ng-controller html dynamically.
Your controller declaration is wrong. You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope',
function($scope) {
$scope.message = "This is my message :-)";
}
]);
A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.
Controller.js
Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.
(function(){
function Controller($scope) {
$scope.name = 'toto';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller="ctrl">
<p>My name is {{name}}</p>
</body>
And don't forget to include your script tag :
<script src="controller.js"></script>
You can try Like below Example:-
Html Page:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title> Controller</title>
<script src="../Js/angular.min.js"></script>
<script src="../Js/Controller.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
{{ Msg }}
</div>
</body>
</html>
ControllerJs Page:
var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
$scope.Msg="Hello First Conroller";
})
i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
<div ui-view=''></div>
</div>
<script>
angular.element(document).injector().invoke(function($compile, $state) {
$state.go('myCtrl');
var scope = angular.element($j("#bn")).scope();
$compile($j("#bn"))(scope);
});
</script>
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";
});
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);