The following frameworks, and modules are
required for CREATE Angular 6 CRUD Applications :
Let’s start to explore the CREATED project. Follows
the below steps for CREATING crud applications -
2. Angular CLI
3. Angular 6
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
v8.11.1
And
npm
-v
6.0.0
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.
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.
