How to make learning Angular 2 Easier?

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

Select code Editor for Angular 2 development which understands TypeScript and has facilities for modern JavaScript development (Node/npm development). Atom, WebStorm, or VS Code are some ideal examples. Angular 2 gets easier when using any of these editors.

4. Angular 2 isn’t one has multiple scripts unlike Angular 1

Including one JavaScript file and doing Angular development is a past now. Angular 2 is the one which is a set of npm packages and even doing non-trivial Angular 2 development will require a handful of npm packages. face and accept it. Angular 2 is completely on the npm bandwagon and ”Node”-ified.

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.

6. Angular 2 Prefers modern JavaScript, so poly filling at runtime is needed

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.

For most JavaScript developers, this stuff is commonplace. But, if you are new to Angular 2 and just has started learning Angular 2 along with the tools that make development possible, the several Node processes can come as a surprise. Just keep in mind that your terminal will be running different multiple processes that make Angular 2 development possible. You’ll need to be aware this fact and often the output from these processes will be mission critical to development.

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

Angular 1 launched as a single script file you placed into an HTML page to create JavaScript applications for running in web browsers. Angular 2 is something entirely different. While it can be used to create applications for runing them in a web browser ,but no, Angular 2 is something more about how you write your applications, or you may want write them to run.

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:

  1. package.json
  2. tsconfig.json
  3. typings.json
  4. systemjs.config.js or webpack.config.js
  5. tslint.json
  6. protractor.config.js
  7. karma.conf.js

For any further queries, feel free to place your valuable comments in the comments section below!