Angular has become a very popular web development language over the past few years and continues to remain one of industry leaders. Julia Silge, a data scientist at Stack Overflow, say Angular is the most searched topic in all web languages (shown in her own blog post) and reinforces that fact that Angular is here to stay.
Angular has had some confusing name changes in the past couple years going from AngularJS, Angular2, Angular4, and now Angular5 as recently as November 1st. This post is going to be written for Angular4 and from here on out referred to as Angular. This post also assumes you have some limited knowledge around how Angular projects are structured and have an interest in using Webpack, the backbone of most Angular projects and to Angular CLI itself.
Angular CLI is a command line interface, thus ‘CLI’, which includes the functionality that Webpack provides. It uses Webpack to include all the packaging, importing, BrowserLink etc., but you do not need to know how Webpack works or how it needs to be configured to run in different environments or on different types of machines. All the Webpack configuration is done completely by CLI and leaves it out of the hands of a developer, unless they choose to adjust the settings themselves.
In addition, CLI assists developers by generating code which follows the best practices as defined by https://Angular.io, Angular’s home site. As shown in the next section, creating your Angular project via the command line is done within minutes and you will already have a working app to begin development on.
Using and Installing Angular CLI
CLI has made the process very simple and quick to generate a new project to quickly begin development:
First, if you have never installed CLI before all you need to do is open your command line tool and type ‘npm install -g @angular/cli’ which will install CLI globally on your machine.
Then you can run ‘ng new AngularTestApp’ which creates a new project called “AngularTestApp”
And you will see this appear in the directory you ran ‘ng new’ in:
- Run ‘cd AngularTestApp’ to step into the newly created project
- Run ‘ng serve’ which will run your project locally and you can direct a browser to.
You can see within the ‘ng serve’ result that the “Live Development Server is listening on ocalhost:4200” Direct a browser to that address to see your executed app:
And opened in Visual Studio Code, your project will look like this:
And that is all it takes to get started using Angular with CLI and Webpack. Using CLI and Webpack allows for new and experienced users of Angular to easily get started with very few hiccups. With only 4 commands in the command line, you have a functioning app that is set up with Web Link, the most common 3rd party libraries, and a very basic, but executable Angular Project. Developers can very easily begin to add your own modules and components to this base app that CLI provides. You can use very lightweight code editors, like Visual Studio Code, because CLI will manage a majority of the functionality that a larger tool, like Visual Studio 2017, would normally handle. Additional commands for CLI can be found on Angular’s GitHub Page: https://github.com/angular/angular-cli/wiki CLI’s functionality allows you to create services, Modules, Components, and more all from the command line, which greatly speeds up development time.