Angular 7 CRUD

-
Angular 7 just released a few weeks ago, it comes with a few new feature and improvements. In this article, we will be creating an Angular application. I will explain step by step tutorials from scratch and perform CRUD operations. We will use a separate backend using PHP/MySql and accessing by Angular 7.
The following tools, frameworks, and modules are required for this tutorial:
Node.js (recommended version)
Angular 7 CLI
Angular 7
Express and MongoDB API
Terminal (Mac/Linux) or Command Line (Windows)
IDE (Web Strom Recommended)
Wamp Server (Windows)
We will create two separate projects. One is for Angular, and one is for PHP Web API. That means one for frontend and one for the backend.
First, we will install Angular 7 using Angular CLI, and then we will continue to develop the frontend and backend.
Install Angular 7
If you have an older Angular CLI version, then you can run the following command to install the latest versions.
npm install -g @angular/cli
type the following command to check the updated Angular CLI version
ng v
you can see that we have updated Angular CLI.
Create Project
Now, you will be able to create a new Angular project using the following CLI command.
ng new ng7CRUD
after creating a new project, you can see the folder structure be like this.
Next, install the following dependencies using the following command via npm.
//Bootstrap
npm install bootstrap --save
//jqueru
npm install jquery --save
//dropify
npm install dropify --save
//Datatablesnpm install datatables.net --save
npm install datatables.net-dt --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
You need to import the CSS and JS files into an angular.json file. Into the styles section, you need to import CSS files. Into the script section, you need to import JS files. Example code is given below.
"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
  "node_modules/bootstrap/dist/css/bootstrap-grid.css",
  "node_modules/dropify/dist/css/dropify.css",
  "node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/bootstrap/dist/js/bootstrap.js",
  "node_modules/dropify/dist/js/dropify.js",
  "node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js"
]
Next, you can run the project using the following command
ng serve
reference::https://medium.com/@ramsatt/angular-7-crud-part-1-project-creation-and-theme-integration-1f004dd09949

Comments

Post a Comment

Popular posts from this blog

Your app currently targets API level 27 and must target at least API level 28 to ensure it is built on the latest APIs optimized for security and performance. Change your app's target API level to at least 28

-
https://stackoverflow.com/questions/51466168/android-playstore-warning-your-app-currently-targets-api-level-25 ionic cordova platform rm android ionic cordova platform add android@7 . 1.4 (Or) prefer below code first, using ionic3 <preference name = "android-targetSdkVersion" value = "28" />
Read more

ionic project creation

-
ionic start myApp tabs  ionic generate page contact for services ::: ionic generate provider httpclientModule in ionic3 https://www.npmjs.com/package/ngx-http-client https://www.tutorialspoint.com/ionic/ionic_camera.htm import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { toPromise } from 'rxjs/operator/toPromise'; import { AlertController, MenuController, ToastController } from 'ionic-angular'; /* Generated class for the CallsProvider provider. See https://angular.io/guide/dependency-injection for more info on providers and Angular DI. */ @Injectable() export class CallsProvider { SERVER_IP=" http://209.126.98.38/EverestHome/public/api/v1/ " constructor(public http: HttpClient) { console.log('Hello CallsProvider Provider'); } post(api: string , requestData: any) { debugger; console.log(requestData); return this.http.po...
Read more

change root user in ubuntu

-
Run  sudo <command>  and type in your login password, if prompted, to run only that instance of the command as root. Next time you run another or the same command without the  sudo  prefix, you will not have root access. Run  sudo -i . This will give you an interactive root shell. Note that the  $  at the end of your prompt has changed to a  # , indicating that you have root access. From here you can run any sequence of commands as root, or run the command  exit  to leave the root shell. Use the  su  (substitute user) command to get a root shell. This is effectively the same as using  sudo -i . Note that when you use this command it will ask for the root password and not your login password. These are not the same. You may have to set or change the root password by running  sudo passwd root  first. Run  sudo -s . This gives you root access, but maintains your current SHELL. Shell specific s...
Read more