![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">](https://image.slidesharecdn.com/bockuscifradf2016-pres-161010191954/85/Angular2-Ng-Lightning-Lightning-Design-System-Great-Apps-11-320.jpg)
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
- 1. Angular2 + Ng-Lightning + Lightning Design System = Great Apps Gordon Bockus Principal Engineer [email protected] @gordonk66 Patricia Cifra Senior Engineer [email protected] @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…
- 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