+ Start a Discussion
moritz.dev1.3947933254307776E12moritz.dev1.3947933254307776E12 

VF + Angular.JS problem

Hey,

I am trying to integrate Angular in my VF pages.
For testing reasons, I started with the very first example of the page https://angularjs.org.

<apex:page sidebar="false" showHeader="false" >
    <html ng-app="">
   <head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"/>
   </head>
   <body>
        <div>
          <label>Name:</label>
            <input type="text" ng-model="yourName" placeholder="Enter a name here"/>
            <hr/>
          <h1>Hello {{yourName}}!</h1>
        </div>
   </body>
</html>
   
</apex:page>


But It won't work. I really cannot see where the problem is.
Best regards
VikashVikash (Salesforce Developers) 
Hi,

Please follow these links which explains about the use of angular.js in Visualforce page:
http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
http://salesforce.stackexchange.com/questions/27372/feasibility-of-angularjs-in-visualforce-pages
http://salesforce.stackexchange.com/questions/28498/how-can-i-reference-angularjs-template-files-within-a-visualforce-page

Hope these links will help you.

Thanks
Vikash_SFDC
Richard BlakeRichard Blake
You need to actually create the angularJS app and controller using javascript. See the script tags at the bottom of the code.
Notice i've also added ng-controller="myController" to the div. Everything within this div will be in the scope of the controller. So now you can set the youName variable and this will update the scope, i.e. it will update the h1 text.

<apex:page sidebar="false" showHeader="false" >
  <html ng-app="myApp">
   <head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"/>
   </head>
   <body>
        <div ng-controller="myController">
          <label>Name:</label>
            <input type="text" ng-model="yourName" placeholder="Enter a name here"/>
            <hr/>
          <h1>Hello {{yourName}}!</h1>
        </div>
   </body>
</html>

<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
});
</script>
  
</apex:page>