3. Agenda
• What is angular 4 ?
• What is difference between Angular1,2&4
• Bootstrapping in angular
• Life cycle hooks
• component, Directive, Decorator ,Template
• Change detection
• Data Binding(one way, Two way)
• Module , Services, Routing
• Demo
• App configuration with Vscode, NPM
• Configuration With .Net core
4. What is Angular ?
Angular is a development platform for building mobile and
desktop web applications.
It's a platform.
It's no longer framework.
10. Cross platform
• General Web Applications
• Mobile Web (responsive)
• Android / iOS:
Native with NativeScript & Ionic 2 Native
• Windows / Mac / Linux:
Desktop using Electron
11. Benefits
Fast Powerful Clean Easy
• Everything from Angular 1
• Cleaner and re-usable code
• Speed (Faster than NG1) (Ahead-of-time compilation)
• Easy 3rd Party widget integration
• Better mobile support
• It’s more about JavaScript - take advantage of ES5 & ES6
• Optional static typing **
• Class-based objected-oriented programming
• RxJS (Redux Pattern) & Observables
• Reactive Extensions for Angular - Speed improvements
13. What Angular 4 Offers
HTTPS Services (Get, Post,
etc.)
Usage of Components *
ES2015 / ES6, TypeScript
Dynamic HTML
Fast rendering
Forms & input handling
Event handling
Form Validation
Routing
14. There are 8 key parts to Angular
• Templates
• Decorators (metadata)
• Directives
• Data Binding
• Components • Services
• Modules
• Dependency Injection
15. Data Binding
DOM Component
Interpolation
One Way Binding
Event Binding
Two Way Binding
Evaluate an expression between double curly braces
{{ expression }}
Bind to element, Component or a directive property
[property]=“expression”
Execute an expression when an event occurs
(event-target)=“statement”
[(ngModel) ]=“property”