It's important to take note of this directory structure and where the files are located because the application that the Angular CLI generates follows the recommended app structure and style guide.

The majority of our application is under src/app. This is where we will be working and everything that gets compiled and is available to our final application will be built to the public folder.

Learn from this stucture and style guide and incorporate these things into your own development. The Angular CLI will not only create the files and folders, it will also install any npm dependencies required.

All those dependencies are added and included in our src/index.html file. All of the setup that was in the Angular quickstart are now taken care of for us.

Notice that there's packages for testing with Karma and Protractor and it's great that the CLI handles the beginning setup for testing for us. (We all know adding in testing isn't the first thing on our list when starting new projects).

Check out the src/index.html file and you'll see the beginning of our application with <app-root></app-root>. Our entire Angular app will get injected here.

System.js vs webpack

In previous CLI versions, we would also find the script tags for our dependencies here. Since the CLI is now using webpack, all of the following will be injected for us when serving (developing) or building (production) our application.

--prefix (Default: app) The prefix to use for all component selectors. You can later change the value in ".angular-cli.json" (apps[0].prefix)

--routing (Default: false) Generate a routing module.

Initialize a New Application in an Existing Folder

Let's say you already have a folder that you've started working in. The ng init command is here so that you can use the current folder you're already working in.

In the folder you are working in, run:

ng init scotchy-scotch

Serving Our Application

Another really cool thing that our CLI allows us to do is to serve our application in the browser. Previously, we would have to create a server using lite-server or create our own Node (or other) server.

The Angular CLI let's us do this with one simple command:

ng serve

Just like that, the Angular CLI will build a server for us with webpack and we can view it in browser at http://localhost:4200

Building Our App

When we want to prepare our Angular app for deployment, we only need to run one command.

ng build

The build will take all of our files and bundle them into five main files. It will also generate everything into a dist folder. Go ahead and take a look in there and you'll see your deployment ready files. You'll even notice the index.html file that has all those scripts already injected for you.

Open that index.html file in browser and your Angular app works!

Building for Production

We can also build for production to get some more efficiently sized bundles. Tree shaking goodness and more!

ng build --prod

Building with Ahead-of-Time Compilation

We can also build with AOT to make sure our Angular app is compiled during build-time instead of in browser at run-time. This can help reduce the size of our app by more than half!

ng build --prod --aot

Once you do that, notice the difference in bundle sizes from the previous non-aot build.

1.89MB vs 849kb! AOT FTW

More Commands

As the CLI get's more hashed out and more information, we'll be filling out this section with more commands and what they do. Some of these commands were a little buggy when we first tested out the CLI since it's in v1.0.0-beta.1 at the time of this writing.

Common Scenarios

Conclusion

The Angular CLI is an amazing tool and one that comes at a time when more and more people are getting into Angular 2 development. After all the announcments at ng-conf 2016, now is the time to dive in.

The CLI makes diving in that much more accessible since setup, which took up the majority of the time for first-time developers is now handled for us.