Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Taking My First Steps Into the World of Angular 2

5/5/2016

0 Comments

 
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:
Picture

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!         
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Want FREE access to
    my daily stock tips 
    ​newsletters??
    Sign up here:

    - Triple Gainers
    - Rippers N' Dippers
    - Growingest Growers
    ​

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2021