Angular Basics: A Beginner's Guide to Web Development

Angular
JS Framework to Create a Single Page Application
- K.Yamunadevi
Developer (Level-1)

Getting Started
 Install Node.js
 In terminal or cmd give "npm install -g
@angular/cli". This will install angular cli (ng).
Npm=>Package Manager
 "ng new project-name" will create a new project

@Component
 Component are the main building block for tha
application
 "ng generate component component-name" or "ng g c
componentn-name" command is used to create a
component
 Each component consists of a HTML template,CSS
selector(optional),Typescript class and a testing file
 Also each component should be declared in
app.module.ts.
• @Component({
selector: 'app-component-overview',
templateUrl: './component-
overview.component.html',
styleUrls: ['./component-overview.component.css']
})

@NgModules
 "ng generate module module-name" or "ng g m
module-name" command is used to create a
component
 All the component and other dependent modules are to
be defined in the module class.
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// @NgModule decorator with its metadata
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
})
export class AppModule {}

Directives
 Directives are classes that add additional behavior to elements in
your Angular applications.
 Attribute Directive:
 change the appearance or behavior of an element, component, or
another directive.
NgClass—adds and removes a set of CSS classes.
NgStyle—adds and removes a set of HTML styles.
NgModel—adds two-way data binding to an HTML form element
 Structural directives
 directives that change the DOM layout by adding and removing
DOM elements.
NgIf—conditionally creates or disposes of subviews from the
template.
NgFor—repeat a node for each item in a list.
NgSwitch—a set of directives that switch among alternative views

Forms  Template Driven Forms
Created by Directives
 Reactive Forms
Created in component class
 Form Foundation Class
 FormControl=>tracks the value and validation status of an
individual form control.
 FormGroup=> tracks the same values and status for a collection of
form controls.
 FormArray=>tracks the same values and status for an array of form
controls.

Angular Basics: A Beginner's Guide to Web Development

Routing
 Defining a baic route
Other Routing Concepts includes
 LazyLoading
 Routing Guards
 Some common routing methods includes navigate( ),
routerLink, RouterLinkActive
const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
];

@Injectable
(services)
 Decorator that marks a class as available to be
provided and injected as a dependency.
 Used for Sharing Data between Components
 All the HttpClient api call are given with the service
class

MyReferences
 https://angular.io/
 https://material.angular.io/
 "Angular Complete Guide"-Udemy Course by
Maxmillan
 "Angular HTTP Communication"-Udemy Course by
Brice Wilson
 SomeYoutube Channels as
ARC Tutorials
Code evloution
Code Nanban(in Tamil)
For Angular

Angular Basics: A Beginner's Guide to Web Development

More Related Content

Similar to Angular Basics: A Beginner's Guide to Web Development (20)

Recently uploaded (20)

Angular Basics: A Beginner's Guide to Web Development