Angular Tutorial PPT PDF Angular version 1.0 (AngularJS)

Angular 7 i

Before proceeding with this tutorial you should have a basic understanding of HTML

Lecture Presentation

2015 Pearson Education Inc. Slide 7-4. Reading Question 7.1. If an object is rotating clockwise

angular-from-theory-to-practice.pdf

24-Nov-2017 7. What is plunker and how to use it? ... We use a web editor called plunker and create a basic Angular application from scratch.

Build Better Apps with Angular 2 - Day One Slides.key

Distilled all the best practices of Angular 1.x into. Angular 2. • By focusing on standards we get twice the power with half the framework.

Getting Started with DSpace 7: Advanced Training

DSpace 7 UI deep dive (Angular). ? Customizing UI (beyond branding). ? DSpace 7 REST API deep dive. ? Contributing back to DSpace

Angular Tutorial PPT

Angular version 1.0 (AngularJS) was released in 2012 by Google. • Angular version 2.0 was released in September Angular 7.0 was released in Oct 2018.

Chapter 19 Angular Momentum

19-May-2017 19.2 Angular Momentum about a Point for a Particle . ... the two vectors that appear in Eq. (19.2.7) in polar coordinates.

Chapter 7 Lenses

Angular aperture is illustrated in. Page 2. Chapter 7 Lenses. Pathology 464 Light Microscopy. 2. Figure 7.2. Charles Spencer figure 7.1. The 3 X lens has an

ENGINEERING METROLOGY AND MEASUREMENTS

BASIC PRINCIPLES OF ENGINEERING METROLOGY 7. 1.4 ACCURACY AND PRECISION. We know that accuracy of measurement is very important for manufacturing a quality

angularjs.pdf

Chapter 3: Angular $scopes. 23. Remarks. 23. Examples. 23. Basic Example of $scope inheritance. 23. Avoid inheriting primitive values.

For Angular Online Training : +91-999 123 502

Introduction to Angular

Shailendra Chauhan

Microsoft MVP, Technical Consultant and Corporate Trainer

For Angular Online Training : +91-999 123 502

Aframeworkforbuildingapplicationusing

webtechnologieslikehtml,cssandjs

Empowersdeveloperstobuildapplications

forbrowsers,mobiles,ordesktop

Introduction to Angular

For Angular Online Training : +91-999 123 502

MiskoHeverystartedtoworkforGooglein2009

Angular4.0wasreleasedinMarch2017

Angular5.0wasreleasedinNov2017

Angular6.0wasreleasedinMay2018

Angular7.0wasreleasedinOct2018

Angular8.0wasreleasedinMay2019

Angular9.0wasreleasedinFeb2020

Angular History

For Angular Online Training : +91-999 123 502

A powerful to create, build, compile and serve Angular2 App Used to generate new components, routes, services and pipes

Installing Angular CLI

npminstall -g @angular/cli

Generating and serving Angular app

ng new proj_name--skip-install cd proj_name npminstall ng serve

Angular CLI

For Angular Online Training : +91-999 123 502

Angular CLI Options

OptionsUsage

Helpng --help

Buildng build --env

Build and Runng serve

Testingng test

End-End Testingng e2e

For Angular Online Training : +91-999 123 502

Angular CLI Commands

ScaffoldUsageIn Short

Moduleng generate module my-moduleng g m my-module Componentng generate component my-componentng g c my-component Directiveng generate directive my-directiveng g d my-directive

Pipeng generate pipe my-pipeng g p my-pipe

Serviceng generate service my-serviceng g s my-service

Guardng generateguard my-guardng g gmy-guard

Classng generate class my-classng g cl my-class

Interfaceng generate interface my-interfaceng g imy-interface

Enumng generate enummy-enumng g e my-enum

For Angular Online Training : +91-999 123 502

Angular Initialization Process

For Angular Online Training : +91-999 123 502

Modules

Components

Templates

Metadata

Data binding

Directives

Pipes

Angular Building Blocks

Routing

Forms

Services

Dependency injection

For Angular Online Training : +91-999 123 502

functionality

An Angular module is a class with an @NgModule

decorator

Accepts a single metadata object whose properties

describe the module Each Angular app must have at least one module, known as root module

Modules

For Angular Online Training : +91-999 123 502

Modules

For Angular Online Training : +91-999 123 502

belongtothemodule

NgModuleMetadata Main Properties

For Angular Online Training : +91-999 123 502

Angular has built-In library modules starting with the @angular as prefix Built-In library & third part modules can be installed using npm manager Built-In modules, components, services, directives etc. can be imported by using built-In library modules

Built-In Modules

For Angular Online Training : +91-999 123 502

A type of directives with template, styles and logic for user interaction

ExportedasacustomHTMLtaglikeas:

Component

For Angular Online Training : +91-999 123 502

Angular Components Page View

ROOT COMPONENT

HEADER COMPONENT

FOOTER COMPONENT

ARTICLE

COMPONENT

COMMENTS

COMPONENT

NEWS FEEDS

COMPONENT

For Angular Online Training : +91-999 123 502

Component Example

For Angular Online Training : +91-999 123 502

Define the view of a component

Contains Html markup and angular directives, attributes etc.

Describe how a component is rendered on the page

Template

For Angular Online Training : +91-999 123 502

Theseareprefixwith@symbol

@NgModule,@Directive,@Pipeetc.

Decorators

For Angular Online Training : +91-999 123 502

Classdecorators

@NgModuleʹUsedfordefiningamodule @ComponentʹUsedfordefiningacomponent @DirectiveʹUsedfordefiningadirective @Injectable ʹUsed for injecting dependencies @PipeʹUsedfordefiningapipe

Classfielddecorators

component component

Types of Decorators

For Angular Online Training : +91-999 123 502

Tells Angular how to process a class

Decorators are used to attach metadata to a class

Metadata

For Angular Online Training : +91-999 123 502

HTML forms are an essential part of a web application Angular provides two ways to create form ʹTemplate

Driven and Model Driven

Angular Forms

Forms

Template

DrivenModel Driven

For Angular Online Training : +91-999 123 502

Angular Form Building Blocks

Building

Blocks

FormGroupFormControlFormArrayValidations

For Angular Online Training : +91-999 123 502

Angular Form and Form Controls States

quotesdbs_dbs20.pdfusesText_26

[PDF] Angular Tutorial PPT Angular version 1.0 (AngularJS)

For Angular Online Training : +91-999 123 502

Introduction to Angular

Shailendra Chauhan

For Angular Online Training : +91-999 123 502

Aframeworkforbuildingapplicationusing

Empowersdeveloperstobuildapplications

Introduction to Angular

For Angular Online Training : +91-999 123 502

MiskoHeverystartedtoworkforGooglein2009

Angular4.0wasreleasedinMarch2017

Angular5.0wasreleasedinNov2017

Angular6.0wasreleasedinMay2018

Angular7.0wasreleasedinOct2018

Angular8.0wasreleasedinMay2019

Angular9.0wasreleasedinFeb2020

Angular History

For Angular Online Training : +91-999 123 502

Installing Angular CLI

Generating and serving Angular app

Angular CLI

For Angular Online Training : +91-999 123 502

Angular CLI Options

OptionsUsage

Helpng --help

Buildng build --env

Build and Runng serve

Testingng test

End-End Testingng e2e

For Angular Online Training : +91-999 123 502

Angular CLI Commands

ScaffoldUsageIn Short

Pipeng generate pipe my-pipeng g p my-pipe

Guardng generateguard my-guardng g gmy-guard

Classng generate class my-classng g cl my-class

Enumng generate enummy-enumng g e my-enum

For Angular Online Training : +91-999 123 502

Angular Initialization Process

For Angular Online Training : +91-999 123 502

Modules

Components

Templates

Metadata

Data binding

Directives

Angular Building Blocks

Routing

Services

Dependency injection

For Angular Online Training : +91-999 123 502

An Angular module is a class with an @NgModule

Accepts a single metadata object whose properties

Modules

For Angular Online Training : +91-999 123 502

Modules

For Angular Online Training : +91-999 123 502

NgModuleMetadata Main Properties

For Angular Online Training : +91-999 123 502

Built-In Modules

For Angular Online Training : +91-999 123 502

ExportedasacustomHTMLtaglikeas:

Component

For Angular Online Training : +91-999 123 502

Angular Components Page View

ROOT COMPONENT

HEADER COMPONENT

FOOTER COMPONENT

ARTICLE

COMPONENT

COMMENTS

COMPONENT

CATEGORIES

COMPONENT

NEWS FEEDS

COMPONENT

For Angular Online Training : +91-999 123 502

Component Example

For Angular Online Training : +91-999 123 502

Define the view of a component

Describe how a component is rendered on the page