It's an incredibly exciting time to be a front-end developer right now. I just came back from my Silicon Valley backpacking-across-Cali trip yesterday and my head is still spinning with other interesting things like React, Redux (and particularly redux with angular), Node-Red, and Docker. Not only do I need to catch up on these awesome things, but the world is quickly moving and producing new technologies to keep up on; one of which is Angular 2.
No Longer Just a Dream
Angular 2 is here! Three days ago the Angular project on github moved from Beta to Release Candidate. Many people believe they are done with the breaking changes. The cli is on npm and ready for you to get started. So what are we waiting for? Let's get started!
The Ceremonial Angular CLI Install
As an AngularJS developer, you probably made heavy use of your command line through gulp or grunt scripts. Indeed, these task runners can improve your speed and just overall development experience tremendously. In Angular 2 the command line is still hugely important, but this time the Angular team built out a command line interface to expand what you can do with it. Instead of the usual gulp serve and gulp test commands in Angular 1, the corresponding Angular 2 commands would be ng serve and ng test. Pretty easy to transition! But, I'm getting ahead of myself. We don't even have the angular cli installed! I call this the "ceremonial Angular 2 CLI Install" because it's a command you will really only need to run once when you first begin Angular 2 development. You're using the -g flag to install it globally, and I'm almost certain you'll need to use sudo for this command to execute properly. You'll then have ng available from the command line until you wipe your hard drive or get a different computer. Of course, you'll need node and npm installed in order to use the npm command here. So once you've got that and you're ready to start with Angular 2, here's the magical command to run:
npm install -g angular-cli
A Check for Help
Once the cli install finishes, you can test that it works by running this command:
ng --help
This should display a list of all the ng commands that are now available with the cli as well as the different parameters that each of them can take. Whenever you forget the commands or need some help remembering the cli syntax you can use this nifty command display some help.
Scaffold You're First Angular 2 Project
In Angular 1 we scaffolded projects with Yeoman (normally the Gulp-Angular generator for me). With the new cli we have a different command:
ng init
Unlike yeoman, it doesn't ask you a bunch of questions and customize the output of files for you so I was slightly bummed about that. However, it was super quick and easy so that's a plus. Also, there are some flags you can pass in with the init command
Poke Around!
Once the ng init ​script is done, you can start checking out the files that were created. Push these files up to your github account and call yourself an Angular 2 Dev (Lol). Feel free to run the project with ng serve which will load it up in a nice auto-refreshing browser window that know when code changes have been made. Open it up with your favorite code editor and dig in! If you're curious, here's a screenshot from my project window in WebStorm:
Start Building!
Now it's all up to you! Angular 2 is very structured in terms of components, so the first step to building your own application is getting a wireframe idea of how the app will look and how it can be broken down into components. You can also check out the Angular documentation, online video sights like Lynda.com, egghead.io, or pluralsight.com, or even go down to your local book store and find some Angular 2 books (and be sure to bother the employees about special ordering more Angular 2 books. hehe). What I've gone over here is just dipping your toe in the water of Angular 2 development, and I'll surely have a lot more Angular 2 posts coming out in the future. The main thing is that I now have the Angular cli on my home and work machines. I'm curious to see first hand what I can build with ng2, how many more help the IDE gives you, just how fast the server side rendering is, etc. I'm super excited to start seriously using Angular 2, and you should be too!
RSS Feed