I want to learn AngularJS to use in JSF pages. This is purely learning purpose.
I tried simply add AngularJS code inside the jsf. But seems it doesn't identify the AngularJS code. it simply out put the same My first expression: {{ 5 + 5 }} in the browser.
my jsf page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="hi" >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Can anyone help me how to get the output of the AngularJS expression within the jsf page? or show me some direction
UPDATE
My Actual intention is to get some json from Managebean or from another jsf page and populate here. but for that as testing I tried to create a dummy json structure. but still jsf doesn't identify AngularJS component. It's simply print
My first expression: {{ 5 + 5 }}
Browser console prints MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myAPP" ng-controller="customerctrl">
<p>My first expression: {{ 5 + 5 }}</p>
<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
-->
</div>
</body>
<SCRIPT type="text/javascript">
var app = angular.module('myAPP',[]);
app.conntroller('customerctrl', function($scope){
// $scope.myData=[{Name:'jani',Age:'32'}];
});
</SCRIPT>
</html>
Ok, I found the issue. It was a typo in the app.controller. I had type additional "n". it worked. Thanks for all so far guiding me to spot the issue. I thought I am missing to include some AngularJS library or something.
In order for angular to initialize ng-app="hi" there needs to exist a module with that name. Otherwise you should be seeing an exception thrown in browser dev tools console. Please note console errors when developing javascript apps
Either include a module with that name or remove the name from the attribute and just use ng-app
Either paste this
var app = angular.module('hi',[]);
in your script or make the ng-app="" ... Your choice.
If you specify anything in the ng-app then you have to make a module as given above by me. Otherwise just dont specify anything in the ng-app i.e. ng-app="".
At a later stage when you want to make a controller then you can make a module.. For now its best left empty.
Related
I am new to Angular JS, I got stuck up with this code, While I am reading the tutorials, I got stuck up with this code on Angular JS. Please help me on that.
More particularly how 'AfterClicked' is working in controlling the visibility of the DIV elements.
HTML Code:
<!DOCTYPE html>
<html ng-app="myModel">
<head>
<title>Begin with Angular</title>
<meta charset="utf-8" />
<!-- Adding the Bootstrap style sheet-->
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
<!-- Adding the Angular File-->
<script src="Scripts/angular.js"></script>
<script src="Scripts/MainM.js"></script>
</head>
<body>
<div ng-controller="myController as control">
<div ng-hide="AfterClicked">
{{control.title}}
click To Edit
</div>
<div ng-show="AfterClicked">
<input ng-model="control.title">
Done Editing??
</div>
</div>
</body>
</html>
JS Code:
/// <reference path="angular.js" />
var myApp = angular.module("myModel", [])
.controller("myController", function () {
this.title = "Welcome to Angular",
this.AfterClick=0
});
It's working fine, The thing that i got stuck up is "AfterClicked", How it's working in ng-show, ng-hide and ng-click in anchor tags.
Please help me on that..!!
Updated answer:
When you don't define an object in AngularJS controller code but use it in the template, Angular creates that object and it's assigned empty string value. So, in this case, even though you did not assign any value to AfterClicked in JS code, it was created by Angular and set to ``. This evaluates to false and the div is hidden.
You can check the value in this fiddle: http://jsfiddle.net/5DMjt/12053/
Firstly, couple of mistakes in the code.
1.There is a typo with AfterClicked in JS code.
2.Since you are using the myController as control syntax, ng-click on the anchor tag should use control.AfterClicked and not AfterClicked.
Now in JS code, AfterClicked is being set to 0, which evaluates to false in JS.
In the ng-hide="AfterClicked" code, AfterClicked evaluates to false and hence angular hides the div.
In the anchor tag code ng-click="AfterClicked=!AfterClicked",means that on click of anchor tag, the expression "AfterClicked=!AfterClicked" is evaluated ,which negates AfterClicked.
Hello I want to print content from an array of objects using angular js. I know that there are a lot of questions like this but there isn't any case where the same problem occurs. I want to print an attribute of an object as html. I use ng-sanitize as seen in many examples and it works fine though i get an error in console.
Here my test case:
<body ng-controller="myCtrl">
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
<script>
var app = angular.module("MainCtrl", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
</script>
which works fine and print the elements as it should but in the console i get this error:
TypeError: c.push is not a function
at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">
I use angular 1.4.8
Do you have any ideas why this error occurs or how to solve it?
Thx in advance
I forked your plunkr to show the problem you are encountering.
Whenever you use angular modules like ngRoute or ngSantize, it is important that the version of the module match exactly to the version of the angular library. In your case, you were using angular 1.4.8, but angular ngSanitize 1.0.3.
Updating the code to the proper version of ngSanitize from the CDN (and using angular.js instead of angular.min.js for debugging) shows that the error does not occur with ng-bind-html.
Use correct Versions for .js files... here is the code.... This is running perfectly
this is index.html
<html ng-app = "myapp">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller = "myController">
<h1>Welcome to the Angular</h1>
{{4/3}}
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
</html>
and this is test.js
var app1 = angular.module('myapp',['ngSanitize']);
app1.controller("myController" , function($scope){
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
save these two files in one folder and run.. it gives output perfectly
Found the bug, don't use ng-bind-html, that causes the issue.
Use single angular expression inside your html and it'll just work.
However I don't know what causes the issue.
Plunkr: http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1
I have been learning angularjs for 2 days and I can't have it working when dealing with ng-controller / ng-repeat
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Angular test </title>
</head>
<body ng-app>
Angular test
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
function menuCtrl($scope) {
$scope.menus = [
{title:"wiki",img:"../images/profil.png"},
{title:"list",img:"../images/profil.png"},
{title:"find",img:"../images/profil.png"},
{title:"exp",img:"../images/profil.png"},
{title:"stat",img:"../images/profil.png"},
{title:"param",img:"../images/profil.png"}
];
}
</script>
<div ng-controller="menuCtrl">
<div ng-repeat="menu in menus">
<img src={{menu.img}}>
<h3>{{menu.title}}</h3>
</div>
</div>
</body>
This way of coding is not supported by angular 1.4.7 however it is supported by angular <1.3.0.
I recommend you to follow this style of coding https://docs.angularjs.org/api/ng/directive/ngController
ngApp: ng-app description
<body ng-app>
Or
<html ng-app>
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.
This automatically bootstraps your angular application and then all is good to go. But I like to bootstrap it manually on DOM ready event.
It's upto you. If you are building a sample app and trying to learn then ng-app is fine for you, but in case of large application you should need to make Modules.
On my website i'm displaying the same header on each page and I wanted to know if there's an AngularJS / jQuery or simple JS solution to load only the content of the body and not the header on page change.
<html ng-app="headerApp" ng-controller="HeaderCtrl">
<head>
<!-- here I load my JS and css ... -->
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-include="'templates/IndexBody.tpl.html'"></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
So my HTML looks like this I have separate template for each parts. But for now I create a html file for each pages. So I think there's a way to change the ng-include in the body.
Thanks for your help !
This is kind of the idea behind single page applications. Angular provides a built-in router that does this for you, and there is also the popular ui-router plugin.
You would change your view to:
<html ng-app="headerApp">
<head ng-controller="HeaderCtrl">
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-view></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
and configure the router in app.js:
angular.module('headerApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/IndexBody.tpl.html',
controller: 'IndexBodyCtrl'
});
});
Note that you will need to include angular-route.js in your index.html. More reading here: https://docs.angularjs.org/api/ngRoute
If it's an Angular app would you not use ng-view? Everything outside the view is the template and static as such. If you aren't building a spa then Angular probably isn't the best approach.
If it's Jquery then you could just do:
$("article").load('templatefiletoload.html');
beware that loading in your content like this is poor from an SEO point of view. Use server side includes if possible
I'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07