Skip to main content

Accelerating Through Angular
















































































_________________________________________________________________________________
npm WARN saveError ENOENT: no such file or directory, open '/Users/cosmi/Documents/angular_April14/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/cosmi/Documents/angular_April14/package.json'
npm WARN angular_April14 No description
npm WARN angular_April14 No repository field.
npm WARN angular_April14 No README data

npm WARN angular_April14 No license field.
References


  • https://medium.baqend.com/angular-2-by-example-e85a09fa6480

Angularjs vs Angular

  1. SPEED - faster
  2. COMPONENTS instead of controllers and scopes
  3. SIMPLER DIRECTIVES
  4. INTUTIVE DATA BINDING 
  5. SIMPLER SERVICES


WAYS TO WRITE

  1. TYPESCRIPT > JS
  2. BABEL >JS
http://typesrcriptlang.org
http://go.codeschool.com/angularstart























COMPONENT IS THE BASIC BUILDING BLOCK OF ANGULAR APPLICATIONS

@import {Component} from '@angular/core';


class {Component} from '@angular/core'



In order to run application we need root module

import{NgModule, Component} from '@angular/core';

@Component({
selector: 'my-app',
template:'Ultra Racing'

})
class Component {
}


The over all flow




Each component can consist of :
  1. class file
  2. html file
  3. css file

NOTE: IN TYPESCRIPT

class Component {
title ='Ultra Racing' 
}

Inside a typescript class , we dont use the var or let keywords to declare class properties

@Component({
selector: 'my-app',
template:'

{{

title}}
'})
class Component {
title =Ultra Racing 
}

Accessing objects inside component 


  1. Level 2
    Template Traction

*ngIf  & *ngFOR

 class Component{]

 totalCost() { let sum = 0; for (let race of this.races){ if(race.isRacing) { sum += race.entryFee; } } return sum; }
__________________________________________________________________________________






















__________________________________________________________________________________


STEP 1: IMPORT THE CLASSES THAT YOU WISH TO USE:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RacesComponent } from './races.component';

 STEP 2: DEFINE NG-MODULE:
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent,RacesComponent ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

 platformBrowserDynamic().bootstrapModule(AppModule);
------------------------------------------------------------------------------------


import { Component } from '@angular/core';

 @Component({
  selector: 'my-races',//the directive name with which it will be included in html
  template: `
  Cash left to enter races: {{cashLeft() |
currency:'USD':true}}  











  • *ngFor="let race of races">

    •    {{race.name}} {{race.entryFee |
    currency:'USD':true}}
            {{race.date | date:'MMM d, y, h:MM a'}}
            {{race.about}}
           
           

    *ngIf="race.isRacing">Already Racing

    Total cost: {{totalCost() | currency:'USD':true}}`})

    export class RacesComponent {
      heading = "Ultra Racing Schedule"
      cash = 10000;
      races = [{
        "id": 1,
        "name": "Daytona Thunderdome",
        "date": new Date('2512-01-04T14:00:00'),
        "about": "Race through the ruins of an ancient Florida battle arena.",
        "entryFee": 3200,
        "isRacing": false
      }, {
        "id": 2,
        "name": "San Francisco Ruins",
        "date": new Date('2512-07-03T20:00:00'),
        "about": "Drift down the streets of a city almost sunk under the ocean.",
        "entryFee": 4700,
        "isRacing": true
      }, {
        "id": 3,
        "name": "New York City Skyline",
        "date": new Date('2512-07-12T21:00:00'),
        "about": "Fly between buildings in the electronic sky.",
        "entryFee": 4300,
        "isRacing": true
      }];

       totalCost() {
        let sum = 0;
        for (let race of this.races) {
          if (race.isRacing) sum += race.entryFee;
        }
        return sum;
      }

       cashLeft() {
        return this.cash - this.totalCost();
      }

     } 
    ---------------------------------------------------------------------------------------
    import { Component } from '@angular/core';

     @Component({
      selector: 'racing-app',
      template: `
       

    {{heading}}

            my-races
      `
    })
    export class AppComponent {
      heading = "Ultra Racing Schedule"

    }
    ____________________________________________________________________________________


























    app.component.races.ts



    import { Component } from '@angular/core';



    How to  



    @Component({

      selector: 'my-races',

      templateUrl:'app/races.component.html',

      styleUrls['app/races.component.css'];

    })
    export class RacesComponent {
      heading = "Ultra Racing Schedule"
      cash = 10000;
      races = [{
        "id": 1,
        "name": "Daytona Thunderdome",
        "date": new Date('2512-01-04T14:00:00'),
        "about": "Race through the ruins of an ancient Florida battle arena.",
        "entryFee": 3200,
        "isRacing": false
      }, {
        "id": 2,
        "name": "San Francisco Ruins",
        "date": new Date('2512-07-03T20:00:00'),
        "about": "Drift down the streets of a city almost sunk under the ocean.",
        "entryFee": 4700,
        "isRacing": true
      }, {
        "id": 3,
        "name": "New York City Skyline",
        "date": new Date('2512-07-12T21:00:00'),
        "about": "Fly between buildings in the electronic sky.",
        "entryFee": 4300,
        "isRacing": true
      }];

      totalCost() {
        let sum = 0;
        for (let race of this.races) {
          if (race.isRacing) sum += race.entryFee;
        }
        return sum;
      }

      cashLeft() {
        return this.cash - this.totalCost();
      }

    }


    app.component.races.html



    Cash left to enter races: {{cashLeft() | currency:'USD':true}}



       










    •    

      {{race.name}} {{race.entryFee | currency:'USD':true}}


          {{race.date | date:'MMM d, y, h:MM a'}}

          {{race.about}}

         

         

      Already Racing


       

      Total cost: {{totalCost() | currency:'USD':true}}



      app.component.races.css


      h2 {

        color: green;

      }

      p {

        font-size: small;

      }

      ____________________________________________________________________________________















      ______________________________________________________________________________
      Step1  Define  mock defintion: race.ts

      export class Race {
        id: number;
        name: string;
        date:  Date;
        about: string;
        entryFee: number;
        isRacing: boolean;
      }

      ______________________________________________________________________________
      Step2 : Move data to mock.ts

       import { Race } from './race';

       export const RACES: races[]=[{
        "id": 1,
        "name": "Daytona Thunderdome",
        "date": new Date('2512-01-04T14:00:00'),
        "about": "Race through the ruins of an ancient Florida battle arena.",
        "entryFee": 3200,
        "isRacing": false
      }, {
        "id": 2,
        "name": "San Francisco Ruins",
        "date": new Date('2512-07-03T20:00:00'),
        "about": "Drift down the streets of a city almost sunk under the ocean.",
        "entryFee": 4700,
        "isRacing": true
      }, {
        "id": 3,
        "name": "New York City Skyline",
        "date": new Date('2512-07-12T21:00:00'),
        "about": "Fly between buildings in the electronic sky.",
        "entryFee": 4300,
        "isRacing": true

      }];
      ______________________________________________________________________________

       @Component({
        selector: 'my-races',
        templateUrl: 'app/races.component.html',
        styleUrls:['app/races.component.css']
      })
      export class RacesComponent {
        heading = "Ultra Racing Schedule"
        cash = 10000;
        races: Race[];
        ngOnInit(){
          this.races = RACES;
        }

         totalCost() {
          let sum = 0;
          for (let race of this.races) {
            if (race.isRacing) sum += race.entryFee;
          }
          return sum;
        }

         cashLeft() {
          return this.cash - this.totalCost();
        }

      }


      ______________________________________________________________________________

      TEMPLATE

      Cash left to enter races: {{cashLeft() | currency:'USD':true}}


         






      • *ngFor 
        • ="let race of races">   

        {{race.name}} {{race.entryFee | currency:'USD':true}}

            {{race.date | date:'MMM d, y, h:MM a'}}
            {{race.about}}
           
        ="!race.isRacing">Enter Race   

        *ngIf

        ="race.isRacing">Already Racing 


        Total cost: {{totalCost() | currency:'USD':true}}


         ______________________________________________________________________________


        ______________________________________________________________________________
        CSS FILE

         h2 {
          color: green;
        }
        p {
          font-size: small;

        }

        ______________________________________________________________________________

        Step3:Convert mock.ts on to 


        Lastly, we need to set the races in our RacesComponent equal to the RACESmock. You know, inside the ngOnInit().

         _____________________________________________________________________________

        1. Level 4
          Data Binding Boost



        What is property binding ?

        • Property binding allows us to bind component properties to any DOM element properties.
        • Any update to the component property value will update the DOM property ,but not vice versa - that's when it's one-way binding 
        • Class binding allows us to specify  a CSS class to add to DOM element if a component property is true






























        Adding image to template




        How to add featured class?

        export let CARPARTS: CarPart[]=[{
        id:1,
        "featured":false

        },{
        id:1,
        "featured":true

        },{
        id:1,
        "featured":false

        }];

        export class CarPart{
         image :string 
          featured:boolean
        }

        ________________________________________________________________________________

         race.component.html


        Cash left to enter races: {{cashLeft() | currency:'USD':true}}














        When  you run an Angular application ,it creates a dependency injector.An injector is in charge of knowing how to create and send things.

         Service fuel injection

















































        Race






























        1. Level 5
          Service Fuel Injection
        ________________________________________________________________________________

        • app/race.service.ts

          import { RACES } from './mocks';
import { Injectable } from '@angular/core';

@Injectable()
export class RaceService {
  getRaces() {
    return RACES;
  }
}

        • app/main.ts

          import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RacesComponent } from './races.component';
import { RaceService } from './race.service';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  providers: [ RaceService ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

        • app/races.component.ts

          import { Component } from '@angular/core';
import { Race } from './race';
import { RaceService } from './race.service';

@Component({
  selector: 'my-races',
  templateUrl: 'app/races.component.html',
  styleUrls:['app/races.component.css']
})
export class RacesComponent {
  heading = "Ultra Racing Schedule"
  cash = 10000;
  races: Race[];

  constructor(private raceService: RaceService) { }

  ngOnInit() {
    this.races = this.raceService.getRaces();
  }

  totalCost() {
    let sum = 0;
    for (let race of this.races) {
      if (race.isRacing) sum += race.entryFee;
    }
    return sum;
  }

  cashLeft() {
    return this.cash - this.totalCost();
  }

  enterRace(race) {
    if (this.cashLeft() > race.entryFee) {
      race.isRacing = true;
    } else {
      alert("You don't have enough cash");
    }
  }

  cancelRace(race) {
    race.isRacing = false;
  }

}

        ________________________________________________________________________________
        HTTP










        ________________________________________________________________________________


























        References

        ANGULAR



        REST API USNING ANGULAR

        https://dzone.com/articles/angular-js-use-angular



        https://examples.javacodegeeks.com/core-java/real-time-applications-angularjs-java-part-3/



        http://spring.io/guides/gs/consuming-rest-angularjs/



        http://www.baeldung.com/angular-js-rest-api




        https://howtodoinjava.com/angularjs/angularjs-http-restful-api-example/


        https://medium.com/craft-academy/connecting-an-api-to-an-angular-4-front-end-application-e0fc9ea33202

        Labels:

        Comments

        Post a Comment

        Popular posts from this blog

        Microservices Design patterns

        What are microservices? Microservices - also known as the microservice architecture - is an architectural style that structures an application as a collection of services that are Highly maintainable and testable Loosely coupled Independently deployable Organized around business capabilities Owned by a small team The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications. It also enables an organization to evolve its technology stack. You are developing a server-side enterprise application. It must support a variety of different clients including desktop browsers, mobile browsers and native mobile applications. The application might also expose an API for 3rd parties to consume. It might also integrate with other applications via either web services or a message broker. The application handles requests (HTTP requests and messages) by executing business logic; accessing a database; exchanging messages with other systems; and returni...
        Post a Comment
        Read more

        GraphQL

        What is GraphQL  API Standard invented & open-sourced by Facebook Alternative to  REST API  enables declarative data fetching  exposes single endpoint & responds to queries How it works?  Why Graphql? Improvises performance by reducing the data that is to be transferred over the internet Variety of different frontend frameworks and platforms on client-side Fast development speed & expectation for rapid feature development Why Graphql is better than REST? Flexibility & efficient  No more over /under fetching of data Over fetching : Under fetching: Insightful analytics  Schema serves as contract between client and server CORE CONCEPTS : SDL :SCHEMA DEFINITION LANGUAGE Writing Data with mutations 3 kinds of mutations creating new data updating existing data deleting existing data
        Post a Comment
        Read more

        Jackson

        <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-core </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-annotations </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-databind </artifactId> <version>2.9.6</version> </dependency> CBOR encoded data with Jackson <dependency> <groupId>com.fasterxml.jackson.dataformat</groupId> <artifactId>jackson-dataformat-cbor</artifactId> <version>2.9.6</version> </dependency> In order to read and write MessagePack encoded data <dependency> <groupId>org.msgpack</groupId> <artifactId>jackson-dataformat-msgp...
        Post a Comment
        Read more