Up and Running with Angular
•Download as PPTX, PDF•
2 likes•220 views
If you have ever wanted to code an application with Angular this is your chance. Join us for a fun filled day of learning Angular in this hands-on workshop. You will go from 0 to 60 with your Angular knowledge and be able to create our own Angular applications by the end of this workshop. We will start with a new project and continue to build up the project until we have a full application at the end.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Up and Running with Angular
Similar to Up and Running with Angular (20)
More from Justin James
More from Justin James (10)
Recently uploaded
Recently uploaded (20)
Up and Running with Angular
- 1. http://digitaldrummerj.me Justin James Web Developer and Professional Speaker http://digitaldrummerj.me/ @digitaldrummerj
- 2. http://digitaldrummerj.me 2 Welcome! Some "rules" Every question is important Help each other Have fun
- 3. http://digitaldrummerj.me 3 Agenda Brief Intro to TypeScript Angular Overview Angular Forms Overview Hands On Labs
- 4. http://digitaldrummerj.me 4 Your Experience? HTML, CSS, JavaScript TypeScript Angular 1 Angular 2
- 5. http://digitaldrummerj.me Framework for building client side applications using HTML, CSS, and TypeScript Angular 5
- 6. http://digitaldrummerj.me Built In Backend IntegrationModular Powerful Data BindingExpressive HTML Why Angular 6
- 7. http://digitaldrummerj.me Enhances ProductivitySimplified API Built For SpeedModern Why Angular 2? 7
- 9. http://digitaldrummerj.me Typed Superset of JavaScript TypeScript 9
- 10. http://digitaldrummerj.me Intellisense and Syntax Checking Lambda (=>) Support EncapsulationStatic typingSupports JavaScript Features 10
- 11. http://digitaldrummerj.me Most JavaScript is already valid TypeScript some-javascript.jssome-javascript.js some-typescript.ts var items = getItems(); var goSportsTeam = true; var super = 'mario'; 11
- 12. http://digitaldrummerj.me Dynamic JavaScript, Python, Ruby, PHP var number = 5; number = "Hello!"; // work great! int number = 10; number = "Hello!"; // Compiler Error Static C, C++, C#, Java, JADE, Fortran, Haskell Typing…. 12
- 13. http://digitaldrummerj.me JavaScript Typing Fun function numberCruncher (numA, numB){ return numA + numB; } var result = numberCruncher(5, 5); console.log(result); >> 10 13
- 14. http://digitaldrummerj.me JavaScript Typing Fun function numberCruncher (numA, numB){ return numA + numB; } var result = numberCruncher(5, true); console.log(result); >> 6 14
- 15. http://digitaldrummerj.me JavaScript Typing Fun function numberCruncher (numA, numB){ return numA + numB; } var result = numberCruncher(5, 'js4lyfe'); console.log(result); >> "5js4lyfe" 15
- 16. http://digitaldrummerj.me JavaScript Typing Fun function numberCruncher (numA, numB){ return numA + numB; } var result = numberCruncher(5, { param: true }); console.log(result); >> "5[object Object]" 16
- 17. http://digitaldrummerj.me Types boolean, number, string array, enum any, void status: string = 'TS Rocks!'; havingFun: boolean = true; daysTillVacation: number = 60; 17
- 18. http://digitaldrummerj.me Arrays List of values var myNumbers : number[] = [170, 2.6, 2245, 3032, 400]; // Or... var myNumbers : Array<number> = [170, 2.6, 2245, 3032, 400]; 18
- 19. http://digitaldrummerj.me Arrays Enforce types for array content var myNumbers : number[] = []; myNumbers.push('700'); Argument of type 'string' is not assignable to parameter of type 'number' 19
- 20. http://digitaldrummerj.me Functions Input Parameter and Return Types function myTypedFunction(paramName : dataType) : returnType { // Regular junk here } 20
- 21. http://digitaldrummerj.me Functions Input Parameter and Return Types function trimLength(inputVal : string) : number { return inputVal.trim().length; } 21
- 22. http://digitaldrummerj.me Void A function that returns nothing function initSomething() : void { // do something } var pointless = initSomething(); // Compiler Error! 22
- 23. http://digitaldrummerj.me Any Restores basic JavaScript dynamic typing behavior var foo: any; 23
- 24. http://digitaldrummerj.me Any Restores basic JavaScript dynamic typing behavior var foo: any; foo = 'Hello'; foo = true; foo = 42; THINK TWICE BEFORE USING! 24
- 25. http://digitaldrummerj.me Classes Encapsulate functionality and data for an object Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world").greet(); 25
- 26. http://digitaldrummerj.me Interfaces Powerful way of defining contracts interface Label { value: string; } class label implements Label { value: string = 'label value'; } 26
- 27. http://digitaldrummerj.me Modules Encapsulates variables, functions, classes, etc export interface StringValidator { isAcceptable(s: string): boolean; } export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } 27
- 32. http://digitaldrummerj.me Organize application into blocks of functionality. Contain routes, components, services, and more. Every app has one module minimum, the root module. Modules 32 < >
- 33. http://digitaldrummerj.me 33 Module Code – app.module.ts< >
- 34. http://digitaldrummerj.me 34 Module Code – app.module.ts< >
- 35. http://digitaldrummerj.me 35 Module Code – app.module.ts< >
- 36. http://digitaldrummerj.me 36 Module Code – app.module.ts< >
- 37. http://digitaldrummerj.me Most basic building block of the UI Contains a template, stylesheet, and data logic Can include other components Provides CSS Isolation Component 37 < >
- 38. http://digitaldrummerj.me 38 Component – app.component.ts< >
- 39. http://digitaldrummerj.me 39 Component – app.component.ts< >
- 40. http://digitaldrummerj.me 40 Component – app.component.ts< >
- 41. http://digitaldrummerj.me HTML to tell Angular how to render a component Include data binding as well as other components and directives Leverages native DOM events and properties Template 41 < >
- 47. http://digitaldrummerj.me 47 Template – more complex example< >
- 48. http://digitaldrummerj.me 48 Template – more complex example< >
- 49. http://digitaldrummerj.me 49 Template – more complex example< >
- 50. http://digitaldrummerj.me 50 Template – more complex example< >
- 51. http://digitaldrummerj.me Renders component based on the URL state Drives navigation Lazy Loading Parent/Child Routes Restricted Routes Routing 51 < >
- 54. http://digitaldrummerj.me Data layer Logic is not component related Invariably asynchronous Services 54 < >
- 58. http://digitaldrummerj.me 58 Service – Getting Data< >
- 59. http://digitaldrummerj.me 59 Service – Getting Data< >
- 60. http://digitaldrummerj.me 60 Service – Getting Data< >
- 61. http://digitaldrummerj.me 61 Component – Receiving Data< >
- 62. http://digitaldrummerj.me 62 Component – Receiving Data< >
- 63. http://digitaldrummerj.me 63 Component – Receiving Data< >
- 64. http://digitaldrummerj.me Use Environment Files Can generate build with different environments Application Settings 64
- 65. http://digitaldrummerj.me export const environment ={ production: false, environmentName: 'Local', apiBaseUrl: 'http://localhost:3000' }; Environment File – environment.ts 65
- 66. http://digitaldrummerj.me 66 Angular Lifecycle Create Render Create & Render Children Process Change Destroy
- 68. http://digitaldrummerj.me • http://nodejs.org Node JS (suggest 6.9+ LTS) • npm install -g @angular/cli NPM Global Packages Global Setup 68
- 69. http://digitaldrummerj.me • ng new AppName --style scss –routing Create New Project • ng generate [TYPE] [NAME] Generate • ng serve -e=ENV_NAME Start Application • ng test Unit Test • ng lint Linting Creating Applications 69
- 70. http://digitaldrummerj.me ng build --target=development --environment=dev Example: ng build --dev--environment=dev ng build --prod --environment=prod Angular Deploy 70
- 71. http://digitaldrummerj.me 71 Angular Release Plan Weekly - Patches Monthly – Minor Versions Every 6 Months – Major Versions Major Version Release Timeframe Angular 4 March 2017 Angular 5 Sept/Oct 2017 Angular 6 March 2018 Angular 7 Sept/Oct 2018
- 73. http://digitaldrummerj.me 73 Migrating from Angular 1 Google has no plans to update Angular 1 to match Angular 2 Suggestion: • Leave existing applications in Angular 1 • Use Angular 2 for new applications
- 78. http://digitaldrummerj.me FormControl name: street FormControl name: city FormControl name: state FormControl name: zip FormGroup 78 Street ___________________________________________________ City __________________ State ____________ Zip _____________
- 79. http://digitaldrummerj.me FormControl 0 FormControl 1 FormControl 2 FormArray 79 Street _____________________________ City ________State ____ Zip __________ Street _____________________________ City ________State ____ Zip __________ Street _____________________________ City ________State ____ Zip __________
- 80. http://digitaldrummerj.me Model Driven (ReactiveFormsModule) Template Driven (FormsModule) 2 Types Of Forms 80
- 81. http://digitaldrummerj.me All About ngModel Implicitly Applies Directives to Form Template Driven Approach 81
- 82. http://digitaldrummerj.me Lightweight ComponentSimplicity Benefits of Template Driven Approach 82
- 83. http://digitaldrummerj.me Not Testable Template HTML Hard to Read Complexity Grows Very Fast Drawbacks of Template Driven Approach 83
- 84. http://digitaldrummerj.me Enable Template Drive Approach app.module.ts 84
- 85. http://digitaldrummerj.me Template Driven Form - Template 85
- 86. http://digitaldrummerj.me Template Driven Form Submit - Component 86
- 89. http://digitaldrummerj.me Template Driven Form Validation - Template 89
- 90. http://digitaldrummerj.me Data Binding Implicitly Created Validation Done In Component Form Setup In Component Model Driven Approach 90
- 91. http://digitaldrummerj.me Can Monitor Form Changes Typings Prevent Errors More Maintainable Extendable Validation Rules Testable Benefits of Model Driven Approach 91
- 92. http://digitaldrummerj.me ???? Only Makes Sense If Logic Is Complex Drawbacks of Model Driven Approach 92
- 93. http://digitaldrummerj.me Enable Model Drive Approach app.module.ts 93
- 94. http://digitaldrummerj.me Model Driven Form - Template 94
- 95. http://digitaldrummerj.me Model Driven Form - Component 95
- 96. http://digitaldrummerj.me Model Driven Form Submit 96
- 97. http://digitaldrummerj.me Model Driven Form Validation - Template 97
- 98. http://digitaldrummerj.me Model Driven Form Validation - Component 98
- 99. http://digitaldrummerj.me Model Driven Form Watch For Changes 99
- 100. http://digitaldrummerj.me Model Driven Form Generic Validation 100
- 101. http://digitaldrummerj.me Template Driven (FormsModule) Implicit creation of FormControl() Source of truth: template Async No Unit Testing Model Driven (ReactiveFormsModule) Explicit creation of FormControl() Source of truth: component class Sync Unit Testable 101
- 102. http://digitaldrummerj.me Labs http://digitaldrummerj.me/angular-tutorial Template and Reactive Forms Services Route Guards Header/Footer Environment Settings 102
- 103. http://digitaldrummerj.me Angular Style Guide Angular API Reference Angular 1 to Angular Comparison Architecture Overview Angular CLI Docs Additional Resources 103
- 104. http://digitaldrummerj.me please submit your evaluations 104
- 106. http://digitaldrummerj.me 106 Introductions Tell us about yourself. • Who are you? • What do you hope to get out of the class? • Which of your web projects are you most proud of?
Editor's Notes
- done
- Background 63 63 63 Var 239 220 188 Mario = 204 147 147 Base color white Comments 127 159 127 Function 227 206 171
- Modules – building blocks that contain routes, components, services, and more. Components – contains a template, data and logic forming part of a DOM tree. Routing – Renders a component based on the URL state, drives navigation. Services – Data layer, logic that is not component related, such as API requests.
- The arrows indicate the direction data is traveling. {{ }} – standard data binding like we had in Angular 1 but now 1 way data binding by default. [property] – ability to bind to any html attribute or property (event) – can hook into any HTML event like click or onchange. No need for ng-click anymore [(ngModel)] – two way data binding
- The arrows indicate the direction data is traveling. {{ }} – standard data binding like we had in Angular 1 but now 1 way data binding by default. [property] – ability to bind to any html attribute or property (event) – can hook into any HTML event like click or onchange. No need for ng-click anymore [(ngModel)] – two way data binding
- The arrows indicate the direction data is traveling. {{ }} – standard data binding like we had in Angular 1 but now 1 way data binding by default. [property] – ability to bind to any html attribute or property (event) – can hook into any HTML event like click or onchange. No need for ng-click anymore [(ngModel)] – two way data binding
- The arrows indicate the direction data is traveling. {{ }} – standard data binding like we had in Angular 1 but now 1 way data binding by default. [property] – ability to bind to any html attribute or property (event) – can hook into any HTML event like click or onchange. No need for ng-click anymore [(ngModel)] – two way data binding
- Events – input, blur, click,
- Events – input, blur, click,
- Events – input, blur, click,
- Events – input, blur, click,
- Done http://sailsjs.com/get-started
- In forms, there are three main building blocks: FormControl, FormGroup, and FormArray In Angular, the form control's model is tracked in something called a FormControl(). It’s one of the three building blocks of Angular forms. FormGroups are collections of FormControl instances, registered by name. A form itself is simply a FormGroup. The last building block is the FormArray. Like FormGroup, it consists of child controls, but registered by index as an array. This is a good model if you have children of unknown or dynamic length.
- In Angular, the form control's model is tracked in something called a FormControl(). It’s one of the three building blocks of Angular forms.
- Sometimes you’ll have form controls that make more sense to conceptualize as a group - for instance, an address. FormGroups are collections of FormControl instances, registered by name.
- The last building block is the FormArray. Like FormGroup, it consists of child controls, but registered by index as an array. This is a good model if you have children of unknown or dynamic length.
- There are two available forms modules: the FormsModule (also known as Template Driven or Angular 1 style forms) and the ReactiveFormsModule (also known as reactive forms). But before we talk about their differences, let’s start by discussing some of the underlying structure that both modules have in common.
- The forms module is Angular 1 style, so everything goes through the template. Your changes are made through directives, so you won’t be instantiating FormControls, FormGroups, or FormArrays directly. This will be done implicitly for you by the directives and their inputs. Tends to be easier at the beginning but harder as you try to tackle more complex concepts. For instance, in order to maintain unidirectional data flow in the template, template-driven forms have to be asynchronous.This can lead to the normal gotchas associated with async in development and testing. In reactive forms, you explicitly instantiate the FormControls and FormGroups as needed. You’re directly manipulating the form control models in the component class yourself. This is an investment up front, and often more boilerplate, but it’s also more explicit. There’s no magic going on under the hood and you’re not constrained by the template. For this reason, reactive forms tend to behave more predictably. Everything can be synchronous and as you might imagine, it’s easier to feed into reactive patterns because you’re working in the class without the template in the middle. That being said, these are both legitimate approaches based on your coding style and your preferences, so it’s really up to you what’s right for your application.
- Done
- Done http://sailsjs.com/documentation/concepts/assets/disabling-grunt http://sailsjs.com/documentation/concepts http://sailsjs.com/documentation/concepts/configuration/the-local-js-file https://www.manning.com/books/sails-js-in-action