15 Jul 2016

Angular CLI Preview

The Angular team has announced that Angular2 is in Release Candidate status, so it’s time to get started on learning the new framework and its structure. Angular2 is quite different from Angular1.x, and the familiar JavaScript has been replaced with the newer TypeScript. Transitioning from framework to framework can be difficult enough, but when you throw in a new language, growing pains are sure to set in. However, the good news is that the Angular team has a tool to help you skip some of those growing pains and speed up development for those already in the TypeScript camp. Give a hearty welcome to the Angular CLI!

The Angular CLI is a command line tool that is built not only to help you bootstrap your project, but also to handle the build files, linting configuration, testing setup, and other boilerplate that can consume your precious development time. The CLI can help you with the following tasks:

  • Generation of a base project
  • Generation of components, services, directives and more
  • Generation of unit testing and e2e testing stub files
  • Creation of a build script
  • Serving your project with live reloading of changes
  • Linting
  • Compilation of Less, Sass, Compass and Stylus files
  • Generation of routes using lazy loading
  • Creation of production builds
  • Getting your project on GitHub
  • Plenty more. See the details on the CLI’s GitHub page.

Currently the CLI is in beta, but it is certainly ready for use and pretty well documented. The installation is simple with npm:

npm install -g angular-cli

If you are on Windows, you will likely need to run your command line as Administrator for this to succeed. You may also need to run a separate global install of the typings npm package.

Once you have installed the CLI, all you have to do to generate a project is navigate to the directory you want to create your project in via the command line and enter:


Then change into the directory the CLI just created and serve the project

ng serve

Angular CLI will compile your TypeScript, start up a web server, and possibly even open a browser tab to show your application. (Otherwise it will tell you the URL to launch) Super easy!

This generates a whole host of files for you, including the .ts file for your component, the HTML for the page and the components templates, and the CSS files for those as well. On top of everything needed to actually compile and run your project, it also has created the hooks for you to start creating tests for your application using Karma or Protractor.

If you want to use Less or Sass rather than straight up CSS, all you have to do is change the file extension of the CSS files the CLI generates for you to be .less or .sass and the ng serve command will cause those to be compiled into CSS.

The next step is to start creating some components to go in your application. Of course Angular CLI has you covered there too. Instead of having to spend time memorizing the format for a component file and debugging your typos, you can just use the CLI:

ng g component new-cmp

Or, this, if you’re not into that whole brevity thing:

ng generate component new-cmp

That again will generate all the boilerplate TypeScript, HTML, and CSS necessary to get your Angular2 component bootstrapped. It is up to you, however, to import your component in the right places where it will be used. The CLI isn’t that magic yet.

The CLI also can help you take advantage of the lazy loading by routes in Angular2. By default, when you generate a route in the CLI, it creates a route that will only load its required components when that route is activated. This saves you the upfront cost of loading components up front that a user may never visit. Of course, you may also want to load everything up front so route changes are quicker. You can of course toggle the default lazy loading off:

ng generate route my-route --lazy false

When you’re done with your coding and it’s time to build, not only can the Angular CLI handle your build process, but can even do some deploying. ng build will compile everything and move it into a dist directory. ng github-pages:deploy will create a repo for your project on GitHub and then deploy the build using GitHub pages. Granted you will have to make sure you have the tokens and ssh credentials set up for such a deployment, but the fact that Angular CLI can do all this out of the box is pretty amazing.

If you’re looking at Angular2 and wondering whether to put the effort into switching to the new framework, the Angular CLI will hopefully help you make up your mind by saving effort and keeping you from getting tripped up on typos or stuck scripting methods to serve up and compile your code. The Angular CLI is a powerful tool to help you get up and running on your way to Angular2.

Share this
16 Dec 2015

A First Look at Project Comet

2016 is just around the corner so we decided to do a bit of research to see what kind of exciting new changes in the world of UI/UX we had to look forward to in the new year. We found a lot of the usual New Years talk about upcoming design trends and predictions, but one thing in 2016 stood out from from the rest: Project Comet

read more
Share this
02 Oct 2015

Material with LESS

In this post we are going to create a dynamic style-sheet that can be altered to fit any web application project while keeping inline with Material standards. This project is a great way to familiarize yourself with Material design while creating a style-sheet that can be recycled over and over again to create unique looking designs by just changing a few lines of code.

read more
Share this
24 Sep 2015
16 Sep 2015
10 Sep 2015

Getting Your Feet Wet with Angular Animations

Imagine you get into a car start the engine, touch the acceleration and go from 0 to 60 in the blink of an eye. You then take the wheel to turn right and instead of a smooth turn the car takes an immediate 90 degree turn.

This is how interface design feels without smooth transitions. It works, but it does not feel natural to the user. Animations can give your design the illusion of depth and lifelike motion, creating a more 3D space and giving the user the feeling of being inside the design.

read more
Share this
26 Aug 2015

Using JMeter to Load Test Live HLS Concurrency of Wowza Streaming Engine

When I was tasked with determine the max users that an m4.xlarge AWS instance running WowzaStreamingEngine delivering HLS content could reliably handle; I found out quickly I had a fairly difficult task ahead of me. Luckily I found a few blog posts that pointed me in the right direction and provided the base JMeter test plan to work with.

read more
Share this
19 Aug 2015

Different uses for the HTML5 Canvas tool

One of my co-workers suggested I look into the HTML5 Canvas as a possible solution. After looking into the canvas element I realized it was not only the perfect solution to my current problem, but it could also be a very useful tool for future projects involving graphical elements that need to changed based on user interaction.

read more
Share this
09 Jul 2015
06 Jul 2015

© 2018 RealEyes Media, LLC. All rights reserved.