Angular Intro

BASICS

  • Most popular frontend framework to create maintainable web application. To create highly responsive, user friendly, scalable and stateful web applications.
  • Angular CLI helps to create things faster
  • Angular js – popular during 2010 to 2016
  • Application state is stored in the component.
    • Any information that we are taking from the user and presenting to the useer is called the application state.
    • Collection of records is called state.
    • This state is stored in the form of arrays,properties as part of the component.
  • Application logic is written in component.
    • Button click for example
  • Design logic is in template
    • UI is in template
  • Business logic is written in the service.

ADVANTAGES OF ANGULAR

  • Separation of DOM manipulation logic from application logic. (DOM – tree structure of HTML elements created in the page)
  • DOM manipulation will be handled by angular itself. Traditional js/jquery – where you used to write manual code to update html elements in the page. DOM manipulation logic is completely eliminated in angular
  • Separation of HTML logic from Application logic.
  • Separation of Business logic from Application logic.
  • Single Page Application – Navigation link never refreshes the entire page. Based on the links clicked by the user, just the main content area needs to be changed in the existing page. So that once the page is loaded into the browser, it quickly changes from one screen to another screen, as per the users request. Angular gives us the beautiful concept of Routing which allows you to do the same
  • Code is unit testable.

CODE COMPILATION PROCESS

Do's and Dont's of Angular

        Do’s

  • Always use Routing and Modules.
  • Prefer Routing guards and JWT for authentication and security.
  • Always write “REST-API Calls (AJAX)” and business logic and services only. Return observables from services.
  • Prefer using bootstrap
  • Use css pre processor, such as SCSS

          Dont’s

  • Dont use Jquery to manipulate the data
  • Dont write js code in angular templates.

Leave a Comment