function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
VSK98VSK98 

angular js basic page output not getting

Hi,

I am new to Angular js.......i have been building new vf page with angular page ..Facing to not getting output 

Here is my Page

<apex:page applyHtmlTag="false" sidebar="false" showHeader="false">
 <apex:form>
  <apex:includescript value= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/>

 <body>
  <script>
   angular.module('app',[]);
   .controller('Basic Controller', function()){
       this.name ="siva";
   
   }
   this.Hello: = function Hello:(){
   
   return this.name}
  </script>
   
   <div ng-app="app" ng-controller="Basic Controller">
   <p>Type the Your Name: </p>
   <p>Name: <input type="text" ng-model="name" placeholder="Enter your name"/></p>
       Hello: {{name}} 
   </div>
  </body>
   
</apex:form>
</apex:page>

Here am not getting my name as siva in Hello: siva

User-added image
logontokartiklogontokartik
You need to use a secure endpoints when loading external scripts into Visualforce
 
<apex:includescript value= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/>

 
VSK98VSK98
Hi Kartik,

I have used above#1 line in my page........What you were tring to say to me........pls let me know.
Simi Tresa AntonySimi Tresa Antony
Hi,

  You have a syntax error in line 7 after function()..  The name should be defined in the function.Instead u closed it..


----------------------------------------------Working code-------------------------------------------

<apex:page sidebar="false" showHeader="false" applyBodyTag="false" docType="html-5.0">
 <html lang="en">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"/>
 <script>
        var myApp = angular.module('myApp',[]);   
      myApp.controller('HomeController',function($scope){
           $scope.name ='siva';
      });   
  </script>  
 <body ng-app="myApp" ng-controller="HomeController"> 
  <apex:form > 
       <div>
            <p>Type the Your Name: </p>
             <p>Name: <input type="text" ng-model="name" placeholder="Enter your name"/></p>
             Hello {{name}} 
       </div>
   </apex:form>
  </body>
  </html>
</apex:page>
Antonio ManenteAntonio Manente
It works either way, but by the book you should be declaring your angular controllers like this..
 
myApp.controller('HomeController', ['$scope', function($scope){
  $scope.name = 'siva';
}]);