Skip to content

overview.md

Latest commit

 

History

History
125 lines (94 loc) · 3.55 KB

overview.md

File metadata and controls

125 lines (94 loc) · 3.55 KB

Angular CLI

Overview

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications

Getting Started

To install the angular-cli:

npm install -g angular-cli

Generating and serving an Angular project via a development server Create and run a new project:

ng new my-project
cd new-project
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build Targets and Environment Files

ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.

The mapping used to determine which environment file is used can be found in angular-cli.json:

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production.

Bundling

All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.

Running unit tests

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

Running end-to-end tests

ng e2e

Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.

Global styles

The styles.css file allows users to add global styles and supports CSS imports.

If the project is created with the --style=sass option, this will be a .sass file instead, and the same applies to scss/less/styl.

You can add more global styles via the apps[0].styles property in angular-cli.json.

Global Library Installation

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

As an example, to use Bootstrap 4 this is what you need to do:

First install Bootstrap from npm:

npm install bootstrap@next

Then add the needed script files to apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

Additional Commands

How to Guides

  • Setup AngularFire (coming soon)
  • Include bootstrap (CSS) (coming soon)
  • Include Font Awesome (coming soon)
  • Setup of global styles (coming soon)
  • Setup bootstrap with SASS (coming soon)
  • Setup Angular Material 2 (coming soon)