The document discusses integrating Angular 2 with the Lightning Design System to create applications for the Salesforce ecosystem, highlighting key features, tools, and best practices. It introduces ng-lightning, a library of Angular 2 components adhering to design guidelines, and covers debugging tools and IDEs for development. Resources and links for further learning and demo applications are provided.

1. Angular2 + Ng-Lightning + Lightning
Design System = Great Apps
Gordon Bockus
Principal Engineer
gbockus@spanning.com
@gordonk66
Patricia Cifra
Senior Engineer
pcifra@spanning.com
@pncifra

2. Gordon Bockus
Principal Software Engineer

3. Patricia Cifra
Senior Software Engineer

4. Booth: #106

5. Chapter 1
Angular 2 Ng-Lightning Tools and Debugging
Chapter 2 Chapter 3 Chapter 4
Lightning Design
Framework

6. Lighting Design System
Collection of design patterns, components, and guidelines for creating unified UI for the Salesforce
ecosystem.
Not to be confused with Lightning Apps/Components
VisualForce/Lightning/Heroku/iOS and Angular!

7. Angular2
A tip of the Iceberg…

8. Angular 2
Not Angular 1

9. Angular 2 - Typescript
Types
• Native Types: boolean, int, double, etc
• Custom Types, enums, generics
Enabled Advanced Tooling
• Visual Studio Code
• WebStorm
• Classes
• Inheritance
es6

10. Angular 2 - Dependency Injection
Dependency Injection is now handled through imports and configuration.

11. Angular 2 - Templates
Interpolation/Property Binding - {}, []
• Properties of directive or component
• expressions {{ 1 + 1 }}
• {{myVal}} or [myVal] = “expression”
• <img [src]="heroImageUrl">
Event Binding - () template -> js
• (click)=“onSave()”
Two-way Data binding -[()]
• <input [(ngModel)]="heroName">

12. Ng-Lightning
A library that contains native Angular 2 components and
directives written in TypeScript using the Lightning Design
System CSS framework.
• http://ng-lightning.github.io/ng-lightning/

13. Limitations
Constraints with using framework in Salesforce
• Lighting LockerService prevents importing of 3rd party/outside libraries
• Same limitations as other JavaScript frameworks for Lightning Components

14. Where it’s great
Standalone App: Creating an Angular 2 App with Lightning Design UI that interacts with
Salesforce REST services
Visual Force page: Transpile your TypeScript code and upload the JavaScript code.
Canvas App: Create a web app and surface it within a Canvas App

15. Demo
A simple ToDo List

16. Debugging
Augury - Chrome extension for debugging and profiling Angular 2 applications.
• Very similar to Chrome Developer Tools
• View into ng-2 dependency injection
• Visualize Router tree

17. Tools
VS Code - https://code.visualstudio.com/
• Fluent in Typescript
• Free
• Lightweight
• Extensions to enable NG2
WebStorm / IntelliJ - https://www.jetbrains.com/webstorm/
• Our IDE of choice
• Free for OSS
• One stop shop for all development tasks

18. Summary
Review of Topics
• Lightning Design System
• Angular 2 offers powerful new features
• Ng-Lighting built on top of Angular 2 with components following Lightning Design principles
• Use in web apps, VF, or canvas.
• Tools and debugging tips

19. Resources
Links
• Ng-2 Quick start https://angular.io/docs/ts/latest/quickstart.html
• Ng-2 Tutorial: https://angular.io/docs/ts/latest/tutorial/
• Augury: https://augury.angular.io/
• VS Code: https://code.visualstudio.com/
• WebStorm: https://www.jetbrains.com/webstorm/
• demo app: https://github.com/pncifra/ng-lightning-demo

20. Questions?

21. Thank Y u