0

Can anyone tell me how to write angular js in visualforce page? The below example is displaying angular expression in visualfore:

The Html page:

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

</body>
</html>

The html page gives output: The third result is 19

My VFP:

<apex:page >

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">

</head>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

</body>


  </apex:page>

My visualforce page displays :The third result is

Problem is angular js binding expression is not working in my visualforce page? Please help!

Thanks in advance
Karthick

1 Answer 1

3

This Visualforce does display the value 19:

<apex:page>

<div ng-app="myApp" ng-init="points=[1,15,19,2,40]">
    <p>The third result is <span ng-bind="points[2]"></span></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"/>
<script>
angular.module('myApp', []);
</script>

</apex:page>

Your code was trying to load the Angular JavaScript using HTTP when the page itself is using HTTPS and that results in a failure to load the file at all with this sort of error reported in your browser's JavaScript console:

... was loaded over HTTPS, but ran insecure content from '...' this content should also be loaded over HTTPS

I do not understand why the module is required in this case but without it the value did not appear.

If you use your browser's "View Source" on the page emitted by Visualforce you will see a very large amount of output provided by Visualforce itself. So the Angular code you write is operating in a cluttered environment.

If you are going to use big JavaScript libraries like Angular, you will need to learn about the JavaScript debugging capabilities of your browser. The console is the basic tool, but modern browsers include full-blown JavaScript debuggers. Loading the non-minified version of Angular while developing will also help a bit.

3
  • I want to know about angular.modul() Commented Oct 30, 2014 at 9:26
  • @user3332076 See e.g. docs.angularjs.org/guide/module. I strongly recommend egghead.io (including paying) to learn about Angular quickly (I am not affiliated in any way to them).
    – Keith C
    Commented Oct 30, 2014 at 9:37
  • Thanks @KeithC. I was struggling to get my code working and was banging my head against the wall. Your one line "Module is required for this to work" saved me. Commented Mar 18, 2015 at 21:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .