8301. Angular - Getting Started with Angular CLIAngular CLI
Learn to use Angular CLI to develop single page application.
1. Angular and Angular CLI
Angular is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser.
Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. 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.
2. Angular CLI
2.1 Installing Angular CLI
Install Angular CLI globally and check the version.
$ npm install -g angular-cli
$ ng --version
2.2 Upgrading CLI
Uninstall and install again to upgrade CLI.
$ npm uninstall -g angular-cli
$ npm cache clean
$ npm install -g angular-cli
2.3 Common CLI Commands
Useful commands to create angular components, services, etc.
$ ng g component header // create a new component
$ ng g service product // create a new service
$ ng g module shared // create a new module
$ ng g directive sizer // create a new directive
$ ng g pipe reverse // create a new pipe
2.4 Useful CLI Options
When calling the CLI commands, we have following options.
- –flat
- –inline-template
- –inline-style
- –spec false
- –minimal
For example, the following command create new Angular project with inline template and inline style(No additional html and css file).
$ ng new helloworld --inline-template --inline-style
3. Starting to Code with CLI
3.1 Creating New Project
Generate a new project and skeleton application named ‘helloworld’ by running the following commands:
$ ng new helloworld
3.2 What’s in the Root Folder?
File or Folder | What It Is |
---|---|
e2e | Folder for testing files (more on testing, Karma, and protractor) |
node_modules | Folder for project node dependencies |
src | Folder for project source code |
.editorConfig | editor configuration file |
.gitignore | git ignore file |
angular-cli.json | CLI configuration file. You change your CLi options in this file |
karma-conf.json | Karma configuration file (more on testing, Karma, and protractor) |
package.json | node dependencies configuration file |
protractor-conf.js | Protractor configuration file (more on testing, Karma, and protractor) |
readMe.md | readme informational file, contains information on CLI commands |
tslint.json | Lint configuration file |
3.3 CLI-Generated project code
All the source files for the Angular project are located in the folder ‘src’.
File or Folder | What It Is |
---|---|
app | Folder for your application source code files |
assets | Folder for your application image and CSS files |
environments | Folder for configuration files for environments |
favicon.ico | Application icon |
index.html | The htML page for the Angular single page application |
main.ts | Code to start the application |
styles.css | Global style definitions |
test.ts | Code to run the application tests |
tsconfig.json | Typescript/compiler configuration file |
3.4 Bootstrapping
Bootstrapping usually refers to a self-starting process that’s supposed to proceed without external input. In this case, it refers to how an Angular application starts up. This section takes a look at how the starter project bootstraps.
In src/app/app.module.ts, you will see the following line to tell the module to bootstrap with the AppComponent.
@NgModule({
...
bootstrap: [AppComponent]
})
3.5 Angular compilation
An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an Angular compiler.
Angular offers two ways to compile your application:
- Just-in-Time (
JIT
), which compiles your app in the browser at runtime - Ahead-of-Time (
AOT
), which compiles your app at build time.
JIT compilation is the default when you run the build-only or the build-and-serve-locally CLI commands:
$ ng build
$ ng serve
For AOT compilation, append the --aot
flags to the build-only or the build-and-serve-locally CLI commands:
$ ng build --aot
$ ng serve --aot
- The
--prod
meta-flag compiles with AOT by default.
3.6 WebPack
The Angular CLI uses Webpack
to transpile, compile, and deploy project code. It also uses the webpack-dev-server as its web server by default.
By default, WebPack configuration file webpack.config.js
is hidden. The following Angular CLI command makes it available:
$ ng eject
- Be careful, running this command will change the commands in package.json.