AngularJS in Visualforce Pages Setup

About AngularJS: As we know AngularJS is one of the powerful javascript framework among various javascript frameworks, which simplifies our front end javascript, It uses MVC architecture to break down front end code .
Front end code refers to all our HTML,javascript,CSS code . There are lot of good things about this framework, so i thought to learn this and use in my visualforce pages .

                                                                             AngulasJS teaches HTML new tricks .

Why this Post? Now a days our end users using salesforce asks us for Jazzy UI , moreover they want to say that they are not happy with traditional visualforce pages .Either they are not happy with page load times, transition between multiple pages ,UI/UX,Responsive nature of page,or their reps spending lot of time on pages to do operations. so there is a need for heavy front end pages which solves all the above problems.We will create SPA(single page application) HTML 5 tags to create views, Javascript to manipulate DOM and Javascript remoting or AJAX calls to do database operations.

We will use AngularJS for javascript DOM manipulation here ,I will demonstrate major AngularJS components with in visualforce pages starting from basic setup to a Jazzy single page application using all angular components.

Here is our first step to use AngularJS in visualforce pages to ensure setup.

1. Go to https://angularjs.org/ and Download AngularJS angular.min.js library .
2. Create a static resource and upload angular.min.js  file to it and name it to AngularJS.
3. Create a visualforce page 'AngularJSSetUP'.

4. Paste below code to 'AngularJSSetUP' visualforce page to just check the setup.

<apex:page >
    <script>

        <!-- Include AngularJS static resource into page -->
        <apex:includeScript value="{!$Resource.AngularJS}"/>

        <!-- Register the HTML area for which angularJS will work -->
        var app = angular.module('myApp',[]);  
    </script>
    <!--Apply ng-app tag to div-->
    <div ng-app="myApp">
         <!--This expression will evaluate to 4 then our setup is done.-->
        {{2+2}}
    </div>
</apex:page>


Here is another visualforce page with little angularJS functionality.

<apex:page >
    <script>
        <apex:includeScript value="{!$Resource.AngularJS}"/>
            var app = angular.module('myApp',[]);  
        </script>
        <div ng-app="myApp">
            <input type="text" ng-model="name" />
            <b>{{"Hello :"+name}} </b>
        </div>
</apex:page>




Comments

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration

Salesforce Shopify Integration