Angular ~ Bootstrapping an app - rohit120582sharma/Documentation GitHub Wiki

Introduction

  • It's JavaScript MVC framework to create and maintain Single Page Application (SAP).
  • With client-side templating and heavy use of JavaScript; creating and maintaining large application can be very tedious. Angular removes this cruft.
  • Angular is an inclusion of ES6 & TypeScript.
  • ECMA6 is the standard of JavaScript that enables the use of classes and modules.
  • TypeScript is a superset of JavaScript.

Reference

Set up the Development Environment

You need to set up your development environment by doing the following before you can do anything:

  • Installing Node.js and npm
  • Creating a folder for our application
  • Creating a package.json file
  • Installing the npm packages
  • Creating a TypeScript configuration (tsconfig.json) file
  • Adding dependencies (Webpack as webpack.config.js) for the TypeScript compiler

Node.js® and npm to manage dependencies:

Install Node.js® and npm if they are not already on your machine. Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Package configuration

Node.js creates package.json which is configuration listing the third party packages your project uses.

npm init

Install other dependencies

Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. These packages are maintained and installed with the Node Package Manager. Please click here for basic details.

npm install @angular/core@latest --save
npm install @angular/common@latest --save
npm install @angular/compiler@latest --save
npm install @angular/compiler-cli@latest --save
npm install @angular/platform-browser@latest --save
npm install @angular/platform-browser-dynamic@latest --save
npm install @angular/platform-server@latest --save
npm install @angular/forms@latest --save
npm install @angular/http@latest --save
npm install @angular/animations@latest --save
npm install @angular/router@latest --save

npm install typescript typings --save-dev
npm install core-js rxjs zone.js --save

npm install @angular/material --save
npm install @ng-bootstrap/ng-bootstrap --save
npm install bootstrap --save

npm install lite-server --save-dev
npm install concurrently --save-dev

Write npm script

"scripts": {
	"ng": "ng",
	"start": "ng serve",
	"dev": "concurrently \"lite-server\" \"webpack --watch\"",
	"build": "ng build",
	"test": "ng test",
	"lint": "ng lint",
	"e2e": "ng e2e"
}

Bootstrap

Bootstrapping Angular applications automatically using the app-root element in the index.html is very easy and suitable for most cases.

Root Component

To bootstrap an Angular app, we need a root component.

// app.component.ts
import { Component } from '@angular/core';

@Component({
	selector: 'app-component',
	template: require('./app.component.html'),
	styles: [require('./app.component.css').toString()]
})
export class AppComponent{
	title = 'app';
}

Root module

Each root component lives within a module, and these are defined using @NgModule. Here’s the typical @NgModule for an Angular application, which will need to import our root component:

  • declarations: Registers particular components within this module
  • bootstrap: Tells the module which component to bootstrap
  • imports: Imports other modules into this module
// Modules
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

// Components
import { AppComponent } from './app.component.ts';

// Decorated class
@NgModule({
	imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot([])],
	providers: [],
	declarations: [AppComponent],
	bootstrap: [AppComponent]
})
export class AppModule{
}

Bootstrapping

Now we’ve got a root component and root module, we need to learn how to bootstrap that particular module.

As Angular can be bootstrapped in multiple environments, such as server-side, we need to import a module specific to the environment we’re bootstrapping in. For browser bootstrapping, we need to import something called the platform-browser-dynamic module.

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You'll need polyfills to run an Angular application in most browsers.

The next step is telling what module you’d like to bootstrap.

// Polyfills
import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';

// Platform
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// Application root-module
import { AppModule } from './app.module.ts';

// Bootstrap root-module
platformBrowserDynamic().bootstrapModule(AppModule);

Index Page

To browse an app, we need index.html landing page

<!DOCTYPE html>
<html>
<head>
	<base href="/">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>.:Application Title:.</title>

	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/style.bundle.css">
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<app-component>Loading...</app-component>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="assets/js/script.bundle.js"></script>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️