Angular Essentials

What is Angular?

  • Client Side / Framework
  • Developed and maintained by Google
  • Used to craft powerful Single Page Applications (SPA's) and CMS application
  • Part of MEAN Stack
  • Provides modularize way to write code

@pankajparkar

www.pankajparkar.com

WhY Use Angular?

  • Rapid Development, Code Generation, and Better tooling
  • Component Architecture
  • Two-way data bindings
  • Cross Platform
  • Unit Testing Ready
  • 5x faster than AngularJS

@pankajparkar

www.pankajparkar.com

Pankaj P. Parkar

Sr. Technology Consultant, Virtusa

  • Ex- Microsoft MVP (2015-22)

  • Angular GDE

  • Stackoverflow Topuser

GitHub @pankajparkar Twitter Follow

About Me!

pankajparkar

Angular CLI

  • It helps to minimize development effort and focus more on productivity
  • It can generate a new project
  • It can generate components, pipe, services, etc.
npm install -g @angular/cli

www.pankajparkar.com

Create new Angular app

ng new posts-view --prefix=pv

Component and Bootstraping

<body>
  <my-app></my-app>
</body>
import { Component } from '@angular/core';
@Component({
  selector: 'pv-root',
  standalone: true,
  template: `<h1>Hello, {{name}}</h1>`,
  imports: [],
  styles: [],
})
export class AppComponent {
  name: string = 'World';
}
// main.ts
import {
  bootstrapApplication
} from "@angular/platform-browser";
import {
  AppComponent
} from "./app/app.component";

bootstrapApplication(AppComponent);

Bindings

Data Bindings

{{myData}}

 

Property Binding 

[ngStyle]="{color: blue}"

 

Event Binding

(eventName)="methodCall($event)"

www.pankajparkar.com

@pankajparkar

In-built Directives

Loop in JS

const posts = ["BMW", "Volvo", "Mini"];
for (let post of posts) {
  console.log('Current Post is '+ post);
}

Using *ngFor directive on template

<ul>
  <li *ngFor="let post of posts">
    {{ post }}
  </li>
</ul>

www.pankajparkar.com

@pankajparkar

Http Calls

JSON Placeholder API (Free opensource)

 

Base Link - https://jsonplaceholder.typicode.com/

Method URL
GET /posts
GET /posts/1
UPDATE /posts/1

www.pankajparkar.com

@pankajparkar

Routing

index.html

<html>
  <head>
    <link href="style.css" />
    <script src="app.bundle.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <placeholder></placeholder>
    </section>
    <footer></footer>
  </body>
</html>

URL: #/user/list

URL: #/about

URL: #/user/details/1

<h2>User List</h2>
<div>
  ...
</div>
<div>
 About Content
<div>
<h2>User Details</h2>
<div>
  ...
</div>

www.pankajparkar.com

What we have learnt so far?

  • Create a brand new angular app
  • Component
  • Bindings and Directives
  • Http 
  • Routing
  • Forms

www.pankajparkar.com

@pankajparkar

@pankajparkar

www.pankajparkar.com

Q & A

@pankajparkar

Blogs

http://thoughtram.io/
https://johnpapa.net
https://toddmotto.com
https://teropa.info
https://angular.io
https://netbasal.com/@NetanelBasal
https://medium.com/@maximus.koretskyi

Docs

https://angular.io/docs
https://angular.io/api (For API import check)

Best Practices

Coding guidelines by John Papa https://angular.io/guide/styleguide

Books
https://angular-2-training-book.rangle.io/
https://codecraft.tv/courses/angular/

References

@pankajparkar

Angular Essentials

By Pankaj Parkar

Made with Slides.com

Angular Essentials

Angular Essentials

  • 310

More from Pankaj Parkar