Introduction to Angular

Introduction to Angular

Subscribe to my newsletter and never miss my upcoming articles

Angular is a full-featured javascript framework created and maintained by Google and is used for building frontend applications or frontend of full-stack applications. Angular is a very popular enterprise language.

History

AngularJs was originally developed by Misko Hevery, a Google Employee in 2020. He developed it in other to allow Developers to prototype faster. The Framework was adopted by Google after it gained recognition and it was rewritten, Version 2 came out as literally a different framework. due to much confusion, Version, 2 up to the recent version is named Angular with the "js". Angular 11 was recently released in November 2020.

Why Angular

  • Organized frontend structure(components, modules, and services)
  • Extremely powerful & Full-featured
  • All in one solution(routing, HTTP, Rxjs, etc)
  • MVC (models, view, controller) Design Pattern
  • Uses Typescripts
  • Powerful CLI

Benefits of using Angular

  • PWA support
  • Lazy Loading
  • Forms
  • Rxjs
  • Fully featured routing
  • Animation Library
  • Server-side rendering
  • Language Service
  • Mobile App Development

Path to learning Angular

  • Understand Javascript Fundamentals
  • Typescript
  • Classes
  • High Order Array Methods(ForEach, Map, etc)
  • Arrow Functions
  • Promises & Observables
  • MVC Pattern

Tips & Tricks

  • Always use CLI
  • Follow the style guide on angular.io
  • Sorting & filtering should be done in component
  • Learn Typescript, Ngrx, Webpack
  • Use lazyload
  • Don't touch the DOM directory for any reasons
  • Understand what you are sending to the browser
  • Use immutable or observable data.

Angular Folder Structure

You start an Angular App by going to CMD and typing

  1. npm install -g @angular/cli
  2. ng new angular-app-name

then you have the below files structure when you open the folder via VS code

image.png

  • e23 - Contains test cases for testing the complete application along with its specific config files.
  • Node_modules - NPM install data are stored here
  • SRC - Source code of the application
  • app - Components for the application
  • assets - images/resources
  • environment - Contains build config environment of the app. We can create any target env from here
  • index - Main HTML page which is rendered
  • main.ts - Main entry point, it complies APP modules and renders the specified bootstrap component in the browser
  • style.css - Contains all the styles to be used
  • .editorconfig - Used for defining consistent config
  • angular.json - Used for specifying config of CLI. it includes config of build, serve, test, lint, e2e commands which are used by @angular-cli
  • karma.conf.js - Specifies config for karma which is used for testing
  • package.json - Specifies all dependencies
  • tsconfig.json - Defines config of typescript
  • tslint.json - Defines tslint config for pro-test. tslint is an extensible static analysis tool for typescript

Resources to learning Angular

Conclusion

Thanks for reading! Catch up with more articles and please do leave a comment and a reaction.

 
Share this