Angular 5 vs Angular 6

Angular 6 CRUD Operations Application and Example

The following frameworks, and modules are required for CREATE Angular 6 CRUD Applications :
2.      Angular CLI
3.      Angular 6
4.      Visual Studio code
5.      Node Command Line (Windows) or Integrated terminal

Suppose that you have installed Node.js. Now, you need to check the versions of both Node.js and NPM.  Open the Integrated terminal or Node command line then type the below commands.
node -v

npm -v

Install Angular CLI and Create Angular 6 Web Application -
To install or upgrade the latest Angular 6 CLI, type this command in the integrated terminal or Node command line.
npm install -g @angular/cli

Now, you can create a new Angular 6 Web Application using this Angular CLI command.
ng new Angular6App

Next, go to the newly created Angular 6 project directory folder.
cd ./Angular6App

Now, run the new Angular6App using this command.
ng serve

Now, your browser open the URL “localhost: 4200” automatically and you will see package.json looks like –
  "name": "angular6-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": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.2",
    "@angular-devkit/build-angular": "~0.6.3",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.3",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"

As of the Angular 6 release, the .angular-cli.json file is renamed to angular.json.

Let’s start to explore the CREATED project. Follows the below steps for CREATING crud applications -
1.      Create Routes for Accessing Users Data using Restful API
2.      Create Angular 6 Routes for Navigation between Angular Pages and Components
3.      Create Angular 6 Service for Accessing RESTful API
4.      Display User List using Angular 6 Components
5.      Result
Note – I will update soon the above steps with code.

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..

My Tech Blog -
My Books - Book 1 and Book 2

Angular 6 CRUD Operations Application and Example Angular 6 CRUD Operations Application and Example Reviewed by Anil Singh on 9:03 PM Rating: (5) Powered by Blogger.