Angular + Salesforce

Building single page apps

Presented by Scott Covert / @scottbcovert

SPA vs MVC

This ain't your mama's app architecture

SPA Benefits

More fluid & responsive applications
Separates presentation layer from application logic
Plug & Play Backend/Frontend

SPA Disadvantages

Javascript dependency
SEO implications
Security

AngularJS

HTML enhanced for web apps!

AngularJS Components

Concept	Description
Template	HTML with additional markup
Directives	extend HTML via custom attributes and elements
Scope	context where the model is stored
Service	reusable business logic independent of views
Controller	the business logic behind views
Module	a container for the different parts of an AngularJS app

AngularJS Benefits

Two-way data binding

Massive community

Dependency injection

Developer tools

Bidirectional Data Binding

AngularJS Disadvantages

Opinionated

Esoteric Syntax & Terminology

Sample AngularJS App Template


<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  
  Google Phone Gallery
  
  
  
  
</head>
<body ng-controller="PhoneListCtrl">

  
    
      
        

        Search: 
        Sort by:
        

      
      
        

        
          
            {{phone.name}}
            {{phone.snippet}}
          
        

      
    
  

</body>
</html>

Sample AngularJS App Controller


'use strict';

/* Controllers */

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

  $scope.orderProp = 'age';
});

Sample AngularJS App

Live Demo

AngularJS

+

Salesforce

How To Connect AngularJS & Salesforce

Modules --> Served as Static Resource to VF Page
Templates --> Visualforce Page/Component Fragments
Services --> @RemoteAction Apex Methods
ngForce
Visualforce Remoting
jsForce

Your AngularJS app can be zipped into a static resource and included in the header of a main VFpage when accessing your app from within Salesforce

Multiple smaller Visualforce page/component fragments can then be dynamically included into this main VFpage view based on state

Data can easily be fetched from the Salesforce backend through AngularJS services that callout asynchronously to Apex methods with the @RemoteAction annotation

Kevin Poorman's ngForce is a great starting point as it includes many needed Salesforce CRUD services

In addition to the standard services included in ngForce, Visualforce remoting can be used to fetch data and trigger custom business logic through your AngularJS services

jsForce is another good resource for accessing the Salesforce API when building cloud-hosted AngularJS apps

Benefits To Connecting AngularJS & Salesforce

Live refresh
Simpler Apex Classes & Unit Testing
More powerful debugging tools
Salesforce1 Ready

Daniel Nakov gave a talk last Dreamforce about his Chrome extension proxly, which allows you to tell Chrome to redirect callouts to certain URLs to local resources. This means you can override all callouts to files contained within your AngularJS static resource to the local copy on your machine so when you make a save locally your browser refreshes instantly without waiting for Salesforce'server to recompile the code. Once you're ready to push you can easily redeploy the static resource using MavensMate

In many cases you'll find your AngularJS controller handles the view logic while your Apex classes handle only business logic, namely CRUD-based functions. This greatly simplifies your Apex methods, and thus the testing of those methods. Separation of Concerns for the win!

Having so much of your app's logic stored in Javascript rather than Apex and Visualforce allows you to leverage numerous web developer debugging tools that previously were unavailable to Salesforce developers

Many UI frameworks play nicely with AngularJS--such as Bootstrap or Ionic, that latter of which was built specifically for AngularJS. This means you can easily build a Salesforce1, mobile-ready application right out of the gates

AngularJS vs Angular

Key Changes

TypeScript
Component-based
Improved Performance & Tooling

How To Connect Angular & Salesforce

Angular + Salesforce Boilerplate by Chris Watzon
Application & Node Modules --> Served as Static Resources to VF Page
Services --> @RemoteAction & WebService Apex Methods
Visualforce Remoting when on Salesforce, SOAP API for local development

There is a very cool tool that was built originally by Chris Watzon for connection Angular 2 and Salesforce

I've made some minor changes to it work with the latest version of Angular (5.2.3 at the time of this presentation)

Essentially, Chris's tool allows you to develop your Angular app locally and interact with your Salesforce data by calling your Apex class controller through the SOAP API

When you're ready to deploy the tool zips up the Angular application as well as its dependencies and sends them to Salesforce as static resources

It also deploys the Visualforce page and Apex controller used for hosting the application

When the application is run through the Visualforce page, your application will automagically detect that it should start using Visualforce remoting as opposed to the SOAP API to reduce unnecessary API calls