Throughout the blog series, you’ll learn Angular concepts while building an Expense Tracking application. At the end of it all, you should have a working Angular application that works like what you see below.
We will use the Angular CLI to generate an Angular application. The Angular CLI is a command-line interface program used to generate an Angular application, generate files for the application, run tests, execute the application, and build the application for deployment. Before you can use the CLI, you need to have Node and npm installed. If you don’t have Node.js installed, you can download and install it from the official download page. This will also install npm alongside Node. At the time of this writing, the latest Angular CLI version is 8.2.1, which requires Node.js version 10.
Install the CLI using npm:
npm install -g @angular/cli
When the CLI is installed, run the
ng command, which should display a list of available commands for the CLI with their descriptions. We’re interested in the command to create a new Angular application, which is
ng new. Before we run that command, let’s see the options available for it.
ng new --help command. This will list the options available for the command with a description for each. We will use some of these options with the
ng new command to create an Angular web application.
Go to the command line, switch to the directory where you want to have your Angular project and run the command below:
ng new expense-tracker-angular -v=true --skipTests=true --skipGit=true --style=css --routing=true --prefix=et
This will create a new Angular application according to the options you specified. Below is the description for those options:
-v=true: The -v option is the short form for
--verbose. It is used to specify if you want the CLI to output more information to the console while running, generating the necessary files and installing the needed packages.
–skipTests=true: This configures the application such that when you use the CLI to generate files, it won’t include test files for them. We used this option because I won’t be covering how to test Angular applications in this tutorial.
–skipGit=true: When set to true, it does not initialize a git repository for the project.
–routing=true: Setting this to true tells it to generate a routing module for the application. You’ll get to see how this works later.
–style=css: Sets the file extension or preprocessor to use for style files.
–prefix=et: Sets the prefix to apply to generated selectors for the project. The selectors are the names you give to Angular components and are used when they’re rendered as HTML elements on the page. You’ll get to see more of this when we cover Angular components in the next post.
In the previous section, we used the
ng new command to create an Angular project. That command creates an Angular workspace folder and generates a new app. A workspace can contain multiple apps, with the initial app that is created to be at the root-level of the workspace. The root-level application has the same name as the workspace, and the source files reside in the
src subfolder of the workspace. In our case, the application is called expense-tracker-angular.
The workspace root folder contains the application source files as well as configuration files for the workspace and applications. The tslint.json contains the default TSLint configuration for projects in the workspace. TSLint is a static analysis tool that checks TypeScript code for readability, maintainability and functionality errors.
The tsconfig.json contains the default TypeScript configuration for the projects in the workspace. The karma.conf.js is the configuration file for the karma test runner. The .editorconfig contains configuration for code editors.
The angular.json file contains workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. The e2e/ folder at the top level contains source files for end-to-end tests that correspond to the root-level application, along with test-specific configuration files. The browserlist file configures the sharing of target browsers and Node.js versions among various front-end tools. See the GitHub page for more information.
Open the angular.json file and take a look at some of the configuration. The following list describes some of the properties you see in that file:
defaultProject: The value is set to the root-level application name
expense-tracker-angular. This value will be used as the project name for commands where the project name is not specified as part of the arguments.
newProjectRoot: Specifies the path where new projects are created. Absolute or relative to the workspace folder.
projects: This contains a sub-section for each application in the workspace, with the per-project configuration options. We only have one project in the workspace, which you’ll see under it. The project also has its own specific configuration options, which are described below.
projectType: This specifies whether the project is an application or a library. An application can run independently in a browser, while a library cannot.
schematics: A set of schematics that customize the
ng generate sub-command option defaults for the project. Angular generation schematics are instructions for modifying a project by adding files or modifying existing files. You should notice
"skipTests": true for some of the schematics. This is in respect to the
--skipTests=true which we set when we ran the command
ng new. This command tells the CLI that when it’s generating those files, it should not add test files for them.
root: This specifies the root folder for this project’s files, relative to the workspace folder. It is empty for the root-level app, which resides at the top level of the workspace.
sourceRoot: The root folder for this project’s source files. For the project we’re building, it’s
src, the root-level application.
prefix: This is the name that Angular prepends to generated selectors for components. Remember the
--prefix=et option we set for the
ng new command.
You can read more about the
angular.json config file in the documentation.
Moving on to the files for the application in
src folder, you should see the
style.css file which contains the CSS definitions for the application. In it, you can add/import styles you want to be applied globally. You may have noticed it in the
styles definition in angular.json.
<link> tags here manually. Instead of adding them manually here, you can define them in the
angular.json config and they will be injected automatically.
src/environments/ folder contains build configuration options for different target environments.
src/assets/ folder contains images, and other asset files to be copied as-is when you build the application.
main.ts is the entry point for the application. It compiles the application using Angular’s JIT compiler and bootstraps the application’s root module (AppModule) to run in the browser. This root module is defined in
app/app.module.ts. This module is what Angular uses to package your application with the logic and data you define for the projects. In the
app/ folder, you also have the app’s root component declared with a selector of
et-root, which is what gets used to display the root application view in
index.html. In the body of
index.html, you will notice the custom directive
<et-root></et-root>, which is what’s used to display what gets rendered to the screen.
I won’t go into modules and components in this post. I will cover those concepts as we build the expense tracker application in later posts.
You have used the Angular CLI to generate an Angular app. It generates a root module and component needed to run an Angular web app. To build and run the Angular app, go to the command line, switch to the directory of your Angular workspace and run
ng serve -o. This compiles the application and starts a development server to serve the application files.
ng serve command is used to build and serve the Angular application. Similar to the other commands you’ve used here so far, this also has a couple of options. The
-o options you just used will open the application in the browser when it’s done building the application. There are a host of other options you can use. You can learn more from the documentation.
We’ve covered some interesting concepts about Angular. You learned about why you will need the Angular CLI, how to set it up and use it to generate a new Angular app. You walked through most of the individual files generated by the CLI and what each of them does. I showed you some options you can use with the
ng new and
ng serve commands. You also got to understand the different configuration files generated for the project and what some settings in
We didn’t add anything related to the expense tracker application we intend to build. We will start getting into it in the next post where I’ll talk about Angular components.
You can get the source code on GitHub.
Peter Mbanugo is a software developer, tech writer, and maker of Hamoni Sync. When he's not building tech products, he spends his time learning and sharing his knowledge on topics related to GraphQL, Offline-First and recently WebAssembly. He's also a contributor to Hoodie and a member of the Offline-First community. You can follow him on Twitter.
Subscribe to be the first to get our expert-written articles and tutorials for developers!