Intro to UI-Router/TypeScript
1 like2,935 views
This document summarizes an introduction to UI-Router and TypeScript presentation. The presentation covers UI-Router, a routing framework for AngularJS that allows for multiple views and a state machine-based approach. It also discusses TypeScript, a superset of JavaScript that provides strong typing and other features. The presentation shows code examples and provides resources for learning more about UI-Router and TypeScript.
Intro to UI-Router/TypeScript
- 1. INTRO TO UI-ROUTER + TYPESCRIPT Jamal O’Garro Software Engineer INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 2. TALK I: UI-ROUTER INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 3. WHAT IS UI-ROUTER? • Routing framework for AngularJS • Fully replaces the default Angular router • Created by AngularUI team (UI-Bootstrap, NG-Grid, etc.) INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 4. • Multiple Views • State Machine • Nested Views WHY USE UI-ROUTER? INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 5. • (Old) Angular router only allowed single views • Forced the use of partials to simulate multiple views • UI-Router allows multiple views • Each view can have it’s own controller MULTIPLE VIEWS INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 6. • Uses state machine design pattern • Routes are states and URLs are state properties STATE MACHINE INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 7. • Provides more flexibility when building an app • Allows for more modular code • Helps you build apps quicker NESTED VIEWS INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 8. • Must have a unique name • Must have a template • Controllers are optional • URLs are optional HOW DO WE DEFINE STATE? INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 9. • Directive that tells $state where templates go • Renders the view associated with a given state • Kind of like ng-view but not really . . . UI-VIEW INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 10. • binds anchor tag to a specific state UI-SREF INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 11. • Parent state must exist • No two states can have the same name • When a child state is active so is the parent • Child states load their templates into the paren’t ui-view directive • Inherit resolved dependencies and data properties • Controllers, templates, URLs are not inherited NESTED STATES INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 12. MULTIPLE NAMED VIEWS • Views object - allows us to add several views, templates and controllers to a given state INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 13. LET’S LOOK AT SOME CODE! INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 14. TALK II: TYPESCRIPT INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 15. • Superset of JavaScript • JavaScript w/ Strong Typing + Other features • Made by Microsoft • Will be supported in Angular 2.0 WHAT IS TYPESCRIPT? INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 16. HOW DOES IT LOOK? INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 17. STRONG TYPING INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 18. CLASSES INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 19. INHERITANCE INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 20. MODULES INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 21. INTERFACES INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT v
- 22. • typescriptlang.org • NPM install -g typescript • Visual Studio / Webstorm / Sublime HOW TO GET STARTED INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 23. • Gulp • Official TypeScript Handbook • Official TypeScript Tutorial • TypeScript Playground RESOURCES INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT
- 24. THANK YOU! Jamal O’Garro Software Engineer INTRO TO ANGULAR UI-ROUTER + TYPESCRIPT