2017.04.25: As of March 24, Angular CLI v1.0 was released. This article has been updated to reflect the latest changes. If you want to add the latest features of Angular CLI v1.0 to your existing Angular project that was generated with an earlier version of Angular CLI, check out the Angular CLI v1.0 migration guide.
2017.02.17: As of February 9, 2017, the ng deploy command has been removed from the core of Angular CLI. Read more here.
2017.01.27: As of January 27, 2017, the official recommendation is to use the name AngularJS for any 1.x release and the name Angular for any 2+ release. This article has been updated to reflect the official branding guidelines.
This is the preliminary article in a 4-part series on how to write a Todo application in Angular.
- Part 0— The Ultimate Angular CLI Reference Guide
- Part 1— Getting our first version of the Todo application up and running
- Part 2— Creating separate components to display a list of todo's and a single todo
- Part 3— Update the Todo service to communicate with a REST API
- Part 4— Use Component Router to route to different components
On September 15, 2016, Angular Final was released.
Where AngularJS 1.x was limited to a framework, Angular has grown into an ambitious platform that allows you to develop fast and scalable applications across all platforms such as web, mobile web, native mobile and even native desktop.
With this transition to a platform, tooling has become more important than ever. However, setting up and configuring tooling is not always easy. To make sure Angular developers can focus on building applications with as little friction as possible, the Angular team is putting a lot of effort into providing developers with a high quality development toolset.
Part of that toolset are close integrations with a wide array of IDEs and editors. Another part of that toolset is Angular CLI.
In this article we have a look at what Angular CLI is, what it can do for you, and how it performs some of its magic behind the scenes. Even if you already use Angular CLI, this article can serve as a reference to better understand its inner workings.
Technically you are not required to use Angular CLI to develop an Angular application, but its many features can highly improve the quality of your code and save you a lot of time along the way.
So let's get started!
What Is Angular CLI?
Angular CLI is a Command Line Interface (CLI) to automate your development workflow. It allows you to:
- create a new Angular application
- run a development server with LiveReload support to preview your application during development
- add features to your existing Angular application
- run your application's unit tests
- run your application's end-to-end (E2E) tests
- build your application for deployment to production
Before we have a look at each of the above in detail, let's first see how you can install Angular CLI.
Prerequisites
Before you can use Angular CLI, you must have Node.js 6.9.0 and npm 3.0.0 or higher installed on your system.
You can download the latest version of Node.js for your operating system and consult the latest installation instructions on the official Node.js website.
If you already have Node.js and npm installed, you can verify their version by running:
$ node -v # => displays your Node.js version
$ npm -v # => displays your npm version
Once you have Node.js installed, you can use the npm command to install TypeScript:
$ npm install -g typescript@2.2.0
Although TypeScript is technically not an absolute requirement, it is highly recommended by the Angular team, so I recommend you install it to make working with Angular as comfortable as possible.
Now that you have Node.js and TypeScript installed, you can install Angular CLI.
Installing Angular CLI
To install Angular CLI, run:
$ npm install -g @angular/cli
which will install the ng command globally on your system.
To verify whether your installation completed successfully, you can run:
$ ng version
which displays the version you have installed:
@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64
Now that you have Angular CLI installed, let's use it to create a new application.
Creating a New Angular Application
There are two ways to create a new application using Angular CLI:
ng init: create a new application in the current directoryng new: create a new directory and runng initinside the new directory
So ng new is similar to ng init except that it also creates a directory for you.
Assuming you haven't created a directory yet, let's use ng new to create a new project:
$ ng new my-app
Behind the scenes, the following happens:
- a new directory
my-appis created - all source files and directories for your new Angular application are created based on the name you specified (
my-app) and best-practices from the official Angular Style Guide - npm dependencies are installed
- TypeScript is configured for you
- the Karma unit test runner is configured for you
- the Protractor end-to-end test framework is configured for you
- environment files with default settings are created
You will learn more about each of these aspects in the following sections.
At this point you have a working Angular application and your new directory my-app looks like this:
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
Available Options
--dry-run: boolean, defaultfalse, perform dry-run so no changes are written to filesystem--verbose: boolean, defaultfalse--link-cli: boolean, defaultfalse, automatically link the@angular/clipackage (more info)--skip-install: boolean, defaultfalse, skipnpm install--skip-git: boolean, defaultfalse, don't initialize git repository--skip-tests: boolean, defaultfalse, skip creating tests--skip-commit: boolean, defaultfalse, skip committing the first git commit--directory: string, name of directory to create, by default this is the same as the application name--source-dir: string, default'src', name of source directory--style: string, default'css', the style language to use ('css','less'or'scss')--prefix: string, default'app', the prefix to use when generating new components--mobile: boolean, defaultfalse, generate a Progressive Web App application (see section on upcoming features)--routing: boolean, defaultfalse, add module with routing information and import it in main app module--inline-style: boolean, defaultfalse, use inline styles when generating the new application--inline-template: boolean, defaultfalse, use inline templates when generating the new application
Run $ ng generate --help to see all available options of your locally installed Angular CLI.
Let's see how you can start your application so you can see it in action.
Running Your Application
To preview your new application in your browser, navigate to its directory:
$ cd my-app
and run:
$ ng serve
to start the built-in development server on port 4200:
** NG Live Development Server is running on http://localhost:4200 **
Hash: 09fb2ad840c1472e5885
Time: 6230ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
Continue reading %The Ultimate Angular CLI Reference Guide%
by Jurgen Van de Moere via SitePoint
No comments:
Post a Comment