The web world has become increasingly more complex over the past few years. The demand for fast, fluid single page applications (or SPAs) has gone up, along with the seemingly endless number of frameworks used to build them. The most popular among them, Angular 1, took the SPA world by storm seven years ago. Since then, it’s been adopted by many developers and firms looking to build rich, feature-fill applications for the web, mobile, and beyond.
Angular 2 looks to continue that trend with a library that is more performant, lighter, and easier to use. In this session, we’ll learn about components, directives, services, and dependency injection, as well as the new Angular 2 syntax. We’ll also learn about TypeScript, Microsoft’s open source superset of JavaScript that enables fast, fluid, fun, and safe development. Learn about some of the features of TypeScript that enable us to rapidly develop and easily maintain Angular 2 applications with ease, including classes, decorators, and compile-time type checking.
17. import/export
• Like using statements in C#/VB.NET
• import statements allow us to reference code from other TypeScript
files
• export simply means public
33. Property binding
• Property binding means that all sorts of previous built-in directives in
Angular 1 go away
Ng1 Directive Functionality Replaced with
ng-disabled Disables the control – used on inputs, selects,
textareas
[disabled]=“expression”
ng-src/ng-href Replacement for src/href properties since
interpolation didn’t play well with them
[src]=“expression”
[href]=“expression”
ng-show/ng-hidden Hides/shows an element based on the
truthiness of an expression
[hidden]=“expression”
35. Event binding, cont’d
• Property binding means that all sorts of previous built-in directives in
Angular 1 go away
Ng1 directive Functionality Replaced with
ng-click Binds an expression to the click event (click)=“doSomething()”
ng-change Binds an expression to the input changed
event
(change)=“prop = $event”
(ngModelChange)=“”
ng-dblclick Binds an expression to the double click event (dblclick)=“onDoubleClick()”
ng-mouseover …mouse over event
ng-mousemove …mouse move event
…you get the idea
39. Step 2: Import it to your containing module
import { ChildComponent } from "./child.component";
@NgModule({
declarations: [AppComponent]
})
export class AppModule {
}
40. Step 3: Register
import { ChildComponent } from "./child.component";
@NgModule({
declarations: [AppComponent, ChildComponent]
})
export class AppModule {
}
51. What are Services?
• Services are best used to create, read, update and delete data
• Enforces separation of concerns
• Think of it like this: you don’t want your database in your view!
52. Services in Angular 1
• In Angular 1, we had 5 different kinds of services:
• Provider
• Service
• Factory
• Value
• Constants
• In Angular 2, we have 1 kind of service:
• Service
• Which do you prefer?
Simpler, faster, easier to understand
Curated by google
Superset of JavaScript
Transpiles into JavaScript
Focuses on:
Application-scale language which adds type safety
Modern features
ES6 – classes, arrow functions
ES7 – async/await
ES?
Superset of JavaScript
Transpiles into JavaScript
Focuses on:
Application-scale language which adds type safety
Modern features
ES6 – classes, arrow functions
ES7 – async/await
ES?
