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.
Webpack handles the importing of 3rd party libraries. For instance, if you are using NPM to install libraries to your project, Webpack will handle the import process to your Angular project and turn them into modules for the developer automatically. Webpack also supports BrowserLink, which recognizes file changes when you change your Angular code, and automatically refreshes the browser that is listening to the app. Additionally, Webpack will handle a process called, “Code Spitting,” which bundles files together for Lazy Loading and better data caching while the project is running. Finally, it also minifies your JavaScript files, which speeds up your program and readies your code for a production environment. Essentially, Webpack works like task runner on windows, and provides developers with a large amount of functionality pre-built in a fresh project.
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.
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:
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.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.