no views

Day 1 – Basic Functioning

bipon68Angular

# what and why ? 

Framework to build client side application

Great for SPAs

# Why

Modular approach

Re-usable code

Development quicker and easier (like validation, routing)

Unit testable and easily maintainable code

Google + Microsoft product (Angular + Typescript)

# Angular’s History

2010 – AngularJS

2016 – Angular version 2. Just called Angular

2016 Dec – Angular version 4

2017 Nov – Angular version 5

2018 Oct – Angular version 7

Day1 – Basic Functioning 

Prerequisites – to learn Angular

  • HTML, CSS, JS
  • Basic of Typescript

Development Environment: 

  • Node – https://nodejs.org/en/
  • Node Version check – node -v
  • NPM (npm install -g. Check = npm -v)
  • Angular CLI (npm install -g @angular/cli)
  • CLI version check (ng -v)
  • Text Editor like VS Editor

 New project creation 

  • Open your Git bash interface and then write bellow command 
  • ng new project_name (ng new hello-world) 

#way 2

VS Editor

  • View >> Integrated Terminal >> ng new hello-world
  • Going to project – cd hello-world
  • Run the project – ng serve
  • After compile successfully 
  • Then going to browser localhost:4200

Module

  • First building block is a Module
  • Angular application is collection individual module
  • Angular must have on module Root Module – AppModule
    • Module have two things
    • Component (Root component – AppComponent)
    • Service – Here have business logic
  • Export and Import (interact and ultimately render the view in the browser)

Component

  • Angular must have on component Root component – AppComponent 
    • Component have two things
    • HTML Template (To represent the view)
    • Class (View logic – control the particular logic)

Service 

  • Module 
    • Service under Module 
    • Service there write business logic of your application 

Architecture Summary 

  • Angular app – one or more modules
  • Module – one or more components and services
  • Components – HTML (contain the html template) + Class (class control the logic for the particular view )
  • Service – Business Logic (contains the business logic)
  • Modules interact and ultimately render the view in the browser 

Package.json

  • This file contains the dependency & the dev dependency that are required for angular application 
  • Project run – ng serve or npm start (npm start means internally call ng serve)

Main.ts 

  • This is the entry point to the application 
  • If run the ng serve command then application come to main.ts file then bootstrap and kickstart appModule → bootstrap appComponent. And appComponent (have two things HTML template + class (contains the data for particular view logic)
  • ) and render the HTML.  Initially class have title property sync/bound with component html by interpolation. Also other html is static 

App.module.ts: 

  • This is the main module for any angular application. Also app.component.ts file is the root component of angular application 

Operation flow: 

  • When we run the command ng serve into git bash then execution comes to main.ts file . then goes to app.module.ts file. then bootstrap: [AppComponent] 
  • Then goes to app.component 
  • Then data property title gets render in the app.component.html 
  •  AppComponent have two things
    • Html file
    • Component – (contain class >  to control the view logic)

Leave a Reply