You need to sign in to do that
Don't have an account?
moritz.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
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
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
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>