Angular 4 fronts
Download as PPSX, PDF1 like114 views
The document provides an introduction to Angular 4, highlighting its announcement on December 13, 2016, and key features such as improved routing, component structure, and TypeScript compatibility. It covers essential topics like setup, file structure, data binding, directives, and integration with Firebase. Additionally, it serves as a tutorial for users to develop advanced applications using Angular 4, including a client panel project overview.
![Basics of Angular 4 Fronts
Setup & File Structure Diving Into Components Template Syntax
Events & Forms Services & HTTP Angular Router
FAQ App ProjectClient Panel Project - Part 1
Client Panel Project [Part 2]](https://image.slidesharecdn.com/angular4fronts-170804050008/85/Angular-4-fronts-4-320.jpg)
![Table Of Content
Setup & File
Structure
Diving Into
Components
Template Syntax
Events & Forms
Services & HTTP
Angular Router
Client Panel
Project - Part 1
FAQ App Project
Client Panel
Project [Part 2]
Environment Setup
Using Angular-CLI
Angular 4 File Structure
Using The Quickstart
What is TypeScript](https://image.slidesharecdn.com/angular4fronts-170804050008/85/Angular-4-fronts-5-320.jpg)
![Table Of Content
Setup & File
Structure
Diving Into
Components
Template Syntax
Events & Forms
Services & HTTP
Angular Router
Client Panel
Project - Part 1
FAQ App Project
Client Panel
Project [Part 2]
Components Explained
Creating A Component
A Look At NgModule
Adding Types To
Properties
Data Binding & String
Interpolation
Objects & Interfaces](https://image.slidesharecdn.com/angular4fronts-170804050008/85/Angular-4-fronts-6-320.jpg)
![Table Of Content
Setup & File
Structure
Diving Into
Components
Template Syntax
Events & Forms
Services & HTTP
Angular Router
Client Panel
Project - Part 1
FAQ App Project
Client Panel
Project [Part 2]
Template Files & Stylesheets
Loop Through Data With ngFor
Conditionals With ngIf &
ngSwitch
Property Binding
Class Binding & ngClass
Style Binding & ngStyle](https://image.slidesharecdn.com/angular4fronts-170804050008/85/Angular-4-fronts-7-320.jpg)
![Table Of Content
Setup & File
Structure
Diving Into
Components
Template Syntax
Events & Forms
Services & HTTP
Angular Router
Client Panel
Project - Part 1
FAQ App Project
Client Panel
Project [Part 2]
Mouse Events
Changing Properties With
Events
Keyboard & Input Events
ngModel & 2 Way Data
Binding
Form Submission
Template Driven Forms &
Validation](https://image.slidesharecdn.com/angular4fronts-170804050008/85/Angular-4-fronts-8-320.jpg)
Angular 4 fronts
- 1. ANGULAR 4 FRONT TO BACK
- 2. INTRODUCTION Angular 4 was announced on 13 December 2016 One framework. Mobile & Desktop Angular 4 is a more advanced version of Angular 2 Skipping Angular 3 to avoid a confusion due to the misalignment of the router package's version which was already distributed as v3.3.0. Component is the mixture of an HTML template, typescript code and a component class that controls a portion of the screen.
- 3. Features Of Angular 4 Router ParamMap Faster and smaller Animations ngIf: Can also be used with “else” Dynamic Components with Ng ComponentOutlet TypeScript 2.1/2.2 StrictNullChecks Angular Universal
- 4. Basics of Angular 4 Fronts Setup & File Structure Diving Into Components Template Syntax Events & Forms Services & HTTP Angular Router FAQ App ProjectClient Panel Project - Part 1 Client Panel Project [Part 2]
- 5. Table Of Content Setup & File Structure Diving Into Components Template Syntax Events & Forms Services & HTTP Angular Router Client Panel Project - Part 1 FAQ App Project Client Panel Project [Part 2] Environment Setup Using Angular-CLI Angular 4 File Structure Using The Quickstart What is TypeScript
- 6. Table Of Content Setup & File Structure Diving Into Components Template Syntax Events & Forms Services & HTTP Angular Router Client Panel Project - Part 1 FAQ App Project Client Panel Project [Part 2] Components Explained Creating A Component A Look At NgModule Adding Types To Properties Data Binding & String Interpolation Objects & Interfaces
- 7. Table Of Content Setup & File Structure Diving Into Components Template Syntax Events & Forms Services & HTTP Angular Router Client Panel Project - Part 1 FAQ App Project Client Panel Project [Part 2] Template Files & Stylesheets Loop Through Data With ngFor Conditionals With ngIf & ngSwitch Property Binding Class Binding & ngClass Style Binding & ngStyle
- 8. Table Of Content Setup & File Structure Diving Into Components Template Syntax Events & Forms Services & HTTP Angular Router Client Panel Project - Part 1 FAQ App Project Client Panel Project [Part 2] Mouse Events Changing Properties With Events Keyboard & Input Events ngModel & 2 Way Data Binding Form Submission Template Driven Forms & Validation
- 9. Topics • What is Angular? Fundamentals such as dev Environment Setup including Node.js, Visual Studio Code & Git Bash • Angular CLI & Quickstart Seed Setup, also adding file Structure & Dependency Examination • TypeScript Intro • Important concepts such as Components, Modules & NgModule, Data Binding & String Interpolation, Types & Interfaces, Template Syntax, ngIf & ngFor Conditional Directives, ngFor & Loops, Property Binding, ngClass & ngStyle, Pipes, Events & Forms, ngModel & 2 Way Binding, etc. • Observables & Http, Angular Router • Databases such as Firebase & AngularFire2 • Flash Messaging
- 10. Reference Link- http://bit.ly/Ang4Front Angular 4 Front To Back Angular 4 tutorial covers basic topics that allows users to develop an advance application using firebase integration Get This Course $15 Code - kedu15
- 11. Thank You!!!