AngularT Dark_870x220

Angular is a framework for building client-side applications using HTML, CSS, and JavaScript. In this post, the first of a series, I cover how to set up an Angular app using the CLI, the various CLI commands and options, and what most of the files generated by the CLI do.

Angular is a framework for building client-side applications using HTML, CSS, and JavaScript. It has features that support development for the web, mobile web, native mobile, and native desktop. It is similar to some other JavaScript libraries such as React and Vue, both of which are also good to work with. While React, Vue, and Angular are on the top charts of JavaScripts frameworks to use/learn, I think Angular has got a good spot because of some features such as:

  • Native mobile and desktop development using products like Ionic and NativeScript
  • Encourages organizing logic into modules — this makes it easier to organize and re-use logic
  • Increased developer productivity because of the tooling support

If you want to learn how to use Angular to build feature-rich applications, you’re in the right place. In this post, and future ones, I’ll guide you through building an Angular application using HTML, CSS, and TypeScript. No prior experience with Angular, React, or Vue required. You don’t need to understand TypeScript because I’ll be explaining whatever TypeScript feature you’ll use as we go along. However, you’ll need to have some knowledge about HTML, CSS, JavaScript, and have Node and npm installed.

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.

completed-et-angular-app

Set Up the Angular Application

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.

The CLI

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.

Run 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:

  1. -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.

  2. –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.

  3. –skipGit=true: When set to true, it does not initialize a git repository for the project.

  4. –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.

  5. –style=css: Sets the file extension or preprocessor to use for style files.

  6. –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.

The Project Files

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:

  1. 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.

  2. newProjectRoot: Specifies the path where new projects are created. Absolute or relative to the workspace folder.

  3. 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.

  4. projectType: This specifies whether the project is an application or a library. An application can run independently in a browser, while a library cannot.

  5. 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.

  6. 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.

  7. sourceRoot: The root folder for this project’s source files. For the project we’re building, it’s src, the root-level application.

  8. 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.

The src/index.html file is the main HTML page that is served when the application is opened in the browser. The CLI automatically adds all the JavaScript and CSS you define when building the app, so you typically don’t need to add any <script> or <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.

The src/environments/ folder contains build configuration options for different target environments.

The src/assets/ folder contains images, and other asset files to be copied as-is when you build the application.

The 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.

Running the Application

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.
initial-angular-screen (002)

The 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.

What’s Next?

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 angular.json mean.

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
About the Author

Peter Mbanugo

Peter Mbanugo is a software developer, tech writer, and maker of Hamoni Sync. He currently works with Field Intelligence, where he helps build logistic and supply chain apps. He's also a contributor to Hoodie and a member of the Offline-First community. You can follow him on Twitter.

Related Posts

Comments

Comments are disabled in preview mode.