This article is basically for the one who is about to get their hands on Angular. Though Angular 4 has come up on the market, I would talk on Angular 2 only. This post guides you about the Angular base, Concepts and files that need to be cleared before starting the codes and how it can make give ease to learn Angular 2 comfortably.
Angular 2 has some very important changes compared to Angular 1 and completely written in TypeScript. A second major Episode of AngularJS, Angular 2 is a famous development framework found to give the coder the toolbox needed for building cross-platform web-based apps optimized for desktop active, mobile. It features a structure-rich templating approach, easy-to-write and readable syntax.
1. Knowledge of Git
If you don’t use Git, do. You can consider instructions for getting the QuickStart project up and running. So have enough idea of Git. If you’re not good with it, learn (basically) knowledge of it.
2. Knowledge of Node and npm
Angular 2 development is tightly coupled Node and npm. To quote the Angular 2 project:
Node.js and npm are must Angular 2 development.
If you are avoiding any of one, you are not doing it right. Get Knowledge of both so that neither becomes a block when getting hands in Angular 2. If you are feeling you can skirt these technologies, you can consider Node processing power used in the development of the npm scripts in the official QuickStart code.
3. Use an editor which is TypeScript-friendly
4. Angular 2 isn’t one has multiple scripts unlike Angular 1
5. Third-party dependencies knowledge is helpful
Once you’ve learned Node, npm, and TypeScript (and probably a new code editor) the next thing you’ll need to know would be Angular 2’s tight dependencies on zones.js, reflect-metadata, and RxJS.
reflect-metadata and zones.js are polyfills for Angular 2, you should glance at it. As you go deep with Angular 2, you’ll eventually have to understand what actually is being poly filled and why and how.
For RxJS, take a closer look at it. It is supported by the Angular 2 project and plays a thick role in application development when handling HTTP responses on the client. So, yes, no actual reason to corner RxJS or ignore. You have to go through it anyhow.
A polyfill will be needed, if you don’t use an environment that runs ES5, ES6, and some future ES* code while creating an Angular 2 application. Angular 2 project is something which depends upon core-js to make sure Angular 2 code can run in an environment that does not support ES5, ES6, and ES* perfectly. There is no harm in understanding what core-js does at runtime.
Remember, an Angular 2 application won’t run in anything less than IE9, and IE9 support for ES5, ES6, and ES* isn’t perfect. Heck IE10 and IE11 support are quite away from perfect.
7. Role of JS loader
If you have got enough knowledge of Git, Node, npm, TypeScript (including typing), and RxJS, and you are now very much comfortable with them, now the next hurdle is to accept the fact that Angular 2 development will, most of the time, require the use of a modern JS loader. The Angular documentation favors SystemJS, but Webpack can work too.
Have a good understanding of whichever you use. Don’t hide this part of the stack. Make sure you learn the loader enough. It makes learning and using Angular 2 easier if you are completely fine with the loader.
And keep in mind that both SystemJS and Webpack do not only load modules, they also assist while bundling.
8. Developing Angular 2 code entails watching, compiling, and serving processes
While, during the phase of developing Angular 2 code, you will be running multiple processes that watch your files, recompiles these files upon changes, and then serves these files to a browser via a local Node server.
At a top priority, just remember this that all TypeScript code has to be compiled to run in a browser. This needs a compiling process and listening process at the time of developing Angular 2 applications.
9. Angular 2 is not just only for web browsers
While getting hands on Angular 2, you’ll start putting codes that will run in a web browser (for example getting started docs). But now, this is an option, not a requirement. Angular 2 code is a tool to write applications that can either run on the web ,either on the mobile web ,or on native mobile devices, and as native desktop applications.
Consider Angular 2 as a way to create and build applications that can potentially run anywhere.
10. Get comfortable with Angular 2 Configuration files
Don’t run away from configuration files. It’s very easy to have a quick glance but I would suggest going deep down with each file and it’s configuration details. Configure or minimally open and understand the following files:
- systemjs.config.js or webpack.config.js
For any further queries, feel free to place your valuable comments in the comments section below!