The
steps following involving for creating an Angular7 Example
-
=> Install Node.js if you not installed using https://nodejs.org/en/
=> To download and install npm packages if not
=> Install the Angular CLI if you not installed following command-
=> Create a workspace and initial Angular 7 application -
=> Go to the workspace folder demoApp and launch the server by using the CLI command ng serve --open (with open option).
=> Live Result - The -- open option automatically opens your browser at port:4200 to http://localhost:4200/
=> Install Node.js if you not installed using https://nodejs.org/en/
=> To download and install npm packages if not
=> Install the Angular CLI if you not installed following command-
npm install -g @angular/cli
=> Create a workspace and initial Angular 7 application -
ng new demoApp
=> Go to the workspace folder demoApp and launch the server by using the CLI command ng serve --open (with open option).
cd demoApp
ng serve --open
=> Live Result - The -- open option automatically opens your browser at port:4200 to http://localhost:4200/
Example
:
app.module.ts
-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
-
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demoApp';
}
app.component.html
-
<!--The content below is only a placeholder and can be
replaced.-->
<div style="text-align:center">
<h1>
Welcome to Angular 7 {{
title }}!
</h1>
<img width="300" alt="Angular
Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNER
==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of
Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI
Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://code-sample.com/">Angular
blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
index.html
-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DemoApp</title>
<base href="/">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.spec.ts
-
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should
create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should
have as title 'demoApp'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('demoApp');
});
it('should
render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome
to demoApp!');
});
});
Packages
and Development Dependencies "package.json"
{
"name": "demo-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng
serve",
"build": "ng
build",
"test": "ng
test",
"lint": "ng
lint",
"e2e": "ng
e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.3",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}
Result
for Hello Angular 7 App! -
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
