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
- npm install -g @angular/cli
- ng new angular-app-name
then you have the below files structure when you open the folder via VS code
- 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
- Pluralsight Angular Path
- Angular Tutorial For Beginners
- Angular Tutorial for Beginners: Learn Angular & TypeScript
- Learn Angular - Full Tutorial Course
- Angular Crash Course
- Angular 11 Hindi tutorial
Conclusion
Thanks for reading! Catch up with more articles and please do leave a comment and a reaction.
Did you find this article valuable?
Support Ashimi.0x by becoming a sponsor. Any amount is appreciated!