[PDF] [PDF] Download Angular CLI Tutorial (PDF Version) - Tutorialspoint

[PDF] Angular 7 i - Tutorialspoint

Click Download for Windows for installing the IDE and run the setup to start using IDE Following is the Editor: Page 16 Angular 7 12 We have not 

[PDF] Preview Angular 2 Tutorial (PDF Version) - Tutorialspoint

Angular 2 is an open source JavaScript framework to build web applications in components of AngularJS 2 with suitable examples End of ebook preview

[PDF] Preview AngularJS Tutorial (PDF Version) - Tutorialspoint

AngularJS is a very powerful JavaScript library It is used in AngularJS and its programming concepts in simple and easy steps End of ebook preview

[PDF] Angular 4 i - Tutorialspoint

Angular 4 is a JavaScript framework for building web applications and apps in Angular 4 ii Table of Contents About the Tutorial End of ebook preview

[PDF] Angular Material i - Tutorialspoint

Angular Material is a UI component library for Angular JS developers Angular Material components Angular Material 16 End of ebook preview If you liked 

[PDF] Download Angular CLI Tutorial (PDF Version) - Tutorialspoint

Angular CLI comes with commands that help us create and start on our project very fast It has commands to create a project, a component and services, change  

[PDF] AngularJS PDF Version - Tutorialspoint

us serve more readers by making a small contribution DOWNLOAD ANGULARJS TUTORIAL PDFVERSION Loading [MathJax]/jax/output/HTML- CSS/jax js

[PDF] Angular 8 - Reviewed - Tutorialspoint

Angular 8 is an open source, TypeScript based frontend web application If Node is not installed, you can download and install by visiting the following link:

[PDF] AngularJS Tutorial in PDF - Tutorialspoint

You can download the PDF of this wonderful tutorial by paying a nominal price of $9 99 Your contribution will go a long way in helping us serve more readers

[PDF] Angular 2 Mock Test - Questions Set From 1 to 12 - Tutorialspoint

This section presents you various set of Mock Tests related to Angular 2 You can download these sample mock tests at your local machine and solve offline at 

[PDF] angular 2 ppt

[PDF] angular 2 ppt for beginners

[PDF] angular 2 practice exercises

[PDF] angular 2 project example github

[PDF] angular 2 projects for beginners

[PDF] angular 2 sample project for beginners

[PDF] angular 2 sample project in eclipse

[PDF] angular 2 sample project in visual studio 2015

[PDF] angular 2 sample project in visual studio 2017

[PDF] angular 2 sample project in visual studio code

[PDF] angular 2 services best practices

[PDF] angular 2 tutorial for beginners learn angular 2 from scratch

[PDF] angular 2 tutorial for beginners pdf

[PDF] angular 2 tutorial for beginners w3schools

[PDF] angular 2 tutorial in hindi

Angular CLI

i

Angular CLI

i Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast. It has commands to create a project, a component and services, change the port, etc. This tutorial is designed for software programmers who want to learn the basics of Angular CLI and its concepts in a simple and easy manner. This tutorial will give you enough understanding on the various functionalities of Angular CLI with suitable examples. Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Typescript, and Document Object Model (DOM).

Copyright 2020 by Tutorials Point (I) Pvt. Ltd.

All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com

Angular CLI

ii

About the Tutorial ............................................................................................................................................ i

Audience ........................................................................................................................................................... i

Prerequisites ..................................................................................................................................................... i

Copyright & Disclaimer ..................................................................................................................................... i

Table of Contents ............................................................................................................................................ ii

1. Angular CLI - Overview ............................................................................................................................. 1

Commands for Angular 4 ................................................................................................................................. 1

Download Node.js archive ............................................................................................................................... 3

Installation on UNIX/Linux/Mac OS X, and SunOS........................................................................................... 3

Installation on Windows .................................................................................................................................. 4

Angular CLI

iii

Angular CLI

1 Angular command-line interface (CLI) makes it easy to start with any Angular project. It comes with commands that help us create and start on our project very fast. Let us now go through the commands available to create a project, a component and services, change the port, etc. To work with Angular CLI, we need to have it installed on our system. Let us use the following command for the same: npm install -g @angular/cli To create a new project, we can run the following command in the command line and the project will be created. ng new PROJECT-NAME cd PROJECT-NAME ng serve // ng serve // will compile and you can see the output of your project in the browser: http://localhost:4200/

4200 is the default port used when a new project is created. You can change the port with

the following command: ng serve --host 0.0.0.0 --port 4201 The following table lists down a few important commands which are required while working with the Angular 4 projects.

Sr.No Commands & Description

1 Component

ng g component new-component

2 Directive

ng g directive new-directive

3 Pipe

1. Angular CLI - Overview

Angular CLI

2 ng g pipe new-pipe

4 Service

ng g service new-service

5 Module

ng g module my-module Whenever a new module, a component, or a service is created, the reference of the same is updated in the parent module app.module.ts.

Angular CLI

3 To work with Angular CLI, we need to have Node installed on our system. Let us understand about the environment setup required for Angular CLI in detail. Download latest version of Node.js installable archive file from Node.js Downloads, which is available at https://nodejs.org/download/. At the time of writing this tutorial, the versions available on different OS are listed below:

OS Archive name

Windows node-v6.3.1-x64.msi

Linux node-v6.3.1-linux-x86.tar.gz

Mac node-v6.3.1-darwin-x86.tar.gz

SunOS node-v6.3.1-sunos-x86.tar.gz

Based on your OS architecture, download and extract the archive node-v6.3.1- osname.tar.gz into /tmp, and then, finally move extracted files into /usr/local/nodejs directory.

For example:

$ cd /tmp $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz $ tar xvfz node-v6.3.1-linux-x64.tar.gz $ mkdir -p /usr/local/nodejs $ mv node-v6.3.1-linux-x64/* /usr/local/nodejs Add /usr/local/nodejs/bin to the PATH environment variable.

OS Output

Linux export PATH=$PATH:/usr/local/nodejs/bin

Angular CLI

4

Mac export PATH=$PATH:/usr/local/nodejs/bin

FreeBSD export PATH=$PATH:/usr/local/nodejs/bin

Use the MSI file and follow the prompts to install the Node.js. By default, the installer uses the Node.js distribution in C:\Program Files\nodejs. The installer should set the C:\Program Files\nodejs\bin directory in windows PATH environment variable. Restart any open command prompts for the change to take effect.

Verify installation: Executing a File

Create a js file named main.js on your machine (Windows or Linux) having the following code: /* Hello, World! program in node.js */ console.log("Hello, World!") The link for live demo is https://www.tutorialspoint.com/execute_nodejs_online.php. Now, execute main.js file using Node.js interpreter to see the result: $ node main.js If everything is fine with your installation, this should produce the following result:

Hello, World!

Now, the Node is installed. You can run the following command to install Angular CLI. npm install -g @angular/cli

Verify the installation

Now, run the following command to see the result:

$ ng --version If everything is fine with your installation, this should produce the following result: _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/

Angular CLI

5

Angular CLI: 9.1.0

Node: 12.16.1

OS: win32 x64

Angular:

Ivy Workspace:

Package Version

@angular-devkit/architect 0.901.0 @angular-devkit/core 9.1.0 @angular-devkit/schematics 9.1.0 @schematics/angular 9.1.0 @schematics/update 0.901.0 rxjs 6.5.4 On Windows, in case of ng being not recognised as internal or external command, update the system path variable to include the following path.

C:\Users\\AppData\Roaming\npm

Angular CLI

6 This chapter explains the syntax, options of ng version command along with an example.

Syntax

The syntax for ng version command is as follows:

ng version [options] ng v [options] ng version command shows the Angular CLI version installed.

Options

Options are optional parameters.

Sr.No. Option & Syntax Description

1 --help=

true|false|json|JSON Shows a help message for this command in the console.

Default: false

Example

An example for ng version command is given below:

\>Node ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/

Angular CLI: 9.1.0

Node: 12.16.1

Angular CLI

7

OS: win32 x64

Angular:

Ivy Workspace:

Package Version

@angular-devkit/architect 0.901.0 @angular-devkit/core 9.1.0 @angular-devkit/schematics 9.1.0 @schematics/angular 9.1.0 @schematics/update 0.901.0 rxjs 6.5.4

Angular CLI

8 This chapter explains the syntax, argument and options of ng new command along with an example.

Syntax

The syntax for ng new command is as follows:

ng new [options] ng n [options] ng new command creates a workspace of given name with a default Angular Application. It provides interactive prompts to set optional configurations. All prompts have default values to choose.

Argument

The argument for ng new command is as follows:

Sr.No. Argument & Syntax Description

1 The name of the new workspace and initial project.

Options

Options are optional parameters.

Sr.No. Option & Syntax Description

1 --collection=collection A collection of schematics

to use in generating the initial app.

Aliases: -c.

2 --commit=true|false Initial git repository

commit information.

Default: true.

3 --createApplication=true|false When true (the default),

creates a new initial app project in the src folder of the new workspace. When false, creates an empty

Angular CLI

9 workspace with no initial app. You can then use to generate application command so that all apps are created in the projects folder.

Default: true.

4 --defaults=true|false When true, disables

interactive input prompts for options with a default.

5 --directory=directory The directory name to

create the workspace in.

6 --dryRun=true|false When true, runs through

and reports activity without writing out results.quotesdbs_dbs14.pdfusesText_20