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.
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
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
< >
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
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
79. http://digitaldrummerj.me
FormControl 0
FormControl 1
FormControl 2
FormArray
79
Street _____________________________
City ________State ____ Zip __________
Street _____________________________
City ________State ____ Zip __________
Street _____________________________
City ________State ____ Zip __________
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.