Skip to content

Module 01 Angular Overwiew

Jump to bottom
Daniel Olano edited this page Feb 16, 2021 · 12 revisions

Module 01 - Angular Overwiew

Full Stack Web Development

  • Overview of full stack web development.

    • Often use the three-tier architure for web development. This is organize into three diferent layers.

      • Presentation: Delivering the information to the user, usually the UI.
      • Business Logic: Concerned about the data, data validation, dynamic content processing and generating content to the user.
      • Data Persistance or Data Access: Concerned about how to store the data, in the form a database or through and API.

    • In a traditional web development is tipically implemented using technologies like Java, PHP, Python, Ruby, etc. So an Front End specalist would be well-versed in HTML, CSS and JS. An Back End specialist would be well-versed in technologies for implementing business logic and database management systems.

    • In these days there is an increasing trend towards using a single language to implement the entire stack with JS. So for implementing the front end, would be using frameworks like Angular and the server side using NodeJS. For storage the data could be use MongoDB which stores data in JSON. The information exchange between the server and the client is done using JSON through API REST.

Introduction to Angular

  • Why use an JS Framework?

    • Use JavaScript frameworks for your prior experience with JavaScript and also perhaps experience with web UI based frameworks like Bootstrap and the use of jQuery. But as the complexity of one app grows, the amount of DOM manipulation that needs to be done becomes significantly complicated. The simple approaches like using the jQuery Library may not sufficiently and this is where the availability of well structured frameworks like Angular.

  • Use of Angular-CLI

    • To install angular-cli globally
      npm install -g @angular/cli

    • To create new Angular app
      ng new conFusion --style=scss

    • To compile and run the project in the default browser at http://localhost:4200
      ng serve --open

  • Configure Angular Project to use Angular Material
    npm install --save @angular/cdk
    npm install --save @angular/animations
    npm install --save hammerjs
    npm install --save @angular/material

  • Include into the head of index.html to use Material Design Icons
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  • Yo use Flex Layout
    npm install --save @angular/flex-layout

  • Update AppModule 

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatListModule } from '@angular/material/list';
import 'hammerjs';

@NgModule({  
  . . .   
  imports: [     
    . . .,    
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatListModule
  ],     
    . . .    
})
  • To add Material Toolbar replace app.component.html 
<mat-toolbar color="primary"> <span>PROJECT_TITLE</span> </mat-toolbar>
  • To add built-in Material Theme, edit styles.scss 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
// some basic resets 
body { 
  padding: 0; 
  margin: 0; 
  font-family: Roboto, sans-serif;   
}
.container {
  margin: 20px;
  display:flex;
}
  • To use Font Awesome Icons

  1. Install via NPM npm install –-save font-awesome

  2. Add a new file named _variables.scss in the src folder and add the following $fa-font-path : '~node_modules/font-awesome/fonts';

  3. Update the styles.scss

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
  • Creating a new Home componente

  1. To create a component
    ng g component home

  2. Adding a Material Toolbar in app.component.html 

<mat-toolbar color="primary"> <span>Ristorante Con Fusion</span> </mat-toolbar>
  1. To add the new component to the template file add selector into app.component.html 
<app-home></app-home>
  1. Example of use mat-list in home.component.html
<div class="container"
     fxLayout="column"
     fxLayoutGap="10px">
  <mat-list fxFlex>
    <mat-list-item *ngFor="let c of clothes">
      <img matListAvatar src={{c.image}} alt={{c.name}}>
      <h1 matLine> {{c.name}} </h1>
      <p matLine>
        <span> {{c.description}} </span>
      </p>
    </mat-list-item>
  </mat-list>
</div>
  1. Example use mat-grid-list in home.component.html
<div fxFlex>
    <mat-grid-list cols="3" rowHeight="200px">
      <mat-grid-tile *ngFor="let c of clothes">
        <img height="200px" src={{c.image}} alt={{c.name}}>
        <mat-grid-tile-footer>
          <h1>{{ c.name | uppercase }}</h1>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

Directives

  • Directives give instructions to Angular on how to render the templates to the DOM.
  • A directive can be defined in Angular as a class with the @Directive decorator.
  • There is three kinds of directives in Angular:

    • Components: directives with a template like components.

    • Structural Directive: alter the layout by adding, removing and replacing elements in DOM.

      • NgIf:
        <div *ngIf=“selectedDish”> . . . </div>

      • NgFor:
        <mat-list-item *ngFor="let dish of dishes">

    • Attribute Directive: changes the appearance or behavior of a DOM element.

      • NgStyle
Clone this wiki locally