WRITTEN BY GARETH DUNNE @JSDIARIES
What is Angular 2?
Am I ready to learn it?
If you are eager to learn Angular 2 and have no previous experience with Angular 1 you are in luck! These frameworks differ greatly from each other so don’t be afraid to delve straight into it. There are, of course some prerequisite knowledge that I would recommend to have.
In order to create a practical application that would simulate one already in production, it is recommended to use a database instead of simulating data. You could use Node.js and MongoDB to accomplish this. By having a backend set up and ready to interact with you are enabling yourself to work on a application that is “true to life” or so to speak.
This isn’t totally necessary if you want to play around with Angular and create an application quickly. However, you will have to do this at some point as the scope of your application gets more complex so its best to establish what you will use at the beginning.
Similarly, if you were trying to find a more cohesive way to learn the basics of Angular 2 + TypeScript I would highly recommend checking this Angular 2 development book below by Yakov Fain.
You can also find Yakov’s blog here:
You can checkout his training workshop here:
MV* or Modular Architecture
If you have ever used a Modal-View-Controller or MV* system, then you will know the importance of separation of concerns . This basically means dividing your application’s business logic, data and visual markup into separate sections that are easy to navigate . Angular 2 uses a component based architecture that would be comparable but not identical to this.
To create an Angular 2 component in your project directory run the command
ng g component my-new-component
ng g c my-new-component
You will now have folder called my-new-component or whatever name you specified.
This folder containers the relevant typescript and styles files created in this folder. In order for us to link this new component into our app component we have to specify it in app.module.ts directives array in the @Component meta-data. We then need to put the selector of our new components into the first-apps template property in its meta data section.
In order to use npm to download the Angular CLI package and install it globally on our local machine we need to install the latest version of Node.js .
You can install from their download page here.
Once installed we can type the command:
npm install angular-cli
Installing this CLI allows scaffolding for our Angular 2 applications. You can see all the various scaffolding items you can create for the CLI here.
Using the command:
ng new your_project_name
Your project will be created in your specified directory. It takes all configuration and prerequisite steps such as:
- Creating our app files
- Configuring TypeScript and Typings
- Adding script tags for
- Configuring System.js
- Creating our Angular 2 component
Using the command line interface we must also install TypeScript globally on our local machine.
install -g typescript
So something to really try and get your head around are these will new Angular versions. Google has stated that all forthcoming Angular versions will be backwards compatible with Angular 2. Will Angular 2 be irrelevant in 6 months because of forthcoming versions in Angular 3 and 4? Well this depends. Angular 4 is the next major version released, not 3. The difference between Angular 2 and 3 will not be another full core change. These new versions will now be subsequently released twice a year. So with this backwards compatibility in theory, no version will be get left deprecated from Angular 2 but we’ll just have to see how this pans out.
So while these incremented versions do cause some differences in the architecture itself. What are we supposed to call Angular as its base name if it keeps getting incremented every 6 months? This is an ongoing discussion in r/Angular2
The future of /r/Angular2 — With Angular 4 now in beta and the adoption of semver, let’s revisit the unpopular decision to name this project Angular to begin with and where to locate our future reddit home. from Angular2