CODEWITHSUNDEEP
angularjsjsfjsf-2
ever alian
ever alian

Reputation: 1060

How to use AngularJS in jsf page

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>

Upvotes: 3

Views: 3276

Answers (3)

ever alian
ever alian

Reputation: 1060

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.

Upvotes: 2

zainul
zainul

Reputation: 106

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.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171689

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

Upvotes: 0

Related Questions