{"id":214,"date":"2020-08-27T16:53:10","date_gmt":"2020-08-27T14:53:10","guid":{"rendered":"https:\/\/fileidea.com\/?p=214"},"modified":"2020-08-28T13:40:49","modified_gmt":"2020-08-28T11:40:49","slug":"creating-a-simple-angular-10-app-with-nodejs-back-end-using-mysql","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2020\/08\/27\/creating-a-simple-angular-10-app-with-nodejs-back-end-using-mysql\/","title":{"rendered":"Creating a simple Angular 10 App with Nodejs Back-End using MySQL"},"content":{"rendered":"\n
\"\"
When application is finished you can create, read, update and delete posts in Angular 10<\/figcaption><\/figure><\/div>\n\n\n\n

The combination with Angular<\/strong>, Nodejs <\/strong>and MySQL <\/strong>is very powerful. I am a huge fan of MySQL<\/strong>, started using it in 2007 and here we are, 2020 and people still using it a lot for websites and web services. On top of that, I just found out that MySQL was created by some Swedes back in 1995, the same country as where I am from! Okay now let’s get started.<\/p>\n\n\n\n

What we are going to do is super a simple Angular app which where you can create<\/strong>, read<\/strong>, update <\/strong>and delete (CRUD) <\/strong>articles The articles will contain properties such as id<\/strong>, title <\/strong>and category<\/strong>. Hopefully this will get you inspired to create more similar improved projects, also, note that there is no security thinking here, this is just to show how to get started with Angular 10<\/strong> and MySQL<\/strong>.<\/p>\n\n\n\n

First create a fresh directory for your app named anything you want, I’m going with “myapp” as name. In here we will create an Angular app. <\/p>\n\n\n\n

Verify that you your Angular version is not too old, we are using Angular 10 for this project.<\/p>\n\n\n

\nng --version\n<\/pre><\/div>\n\n\n
If you are not too far from version 10 you can probably just simply do the ng update like this, if you still have problems check out the Angular Update Guide<\/strong> here<\/a>.<\/p>\n\n\n
\nng update @angular\/core @angular\/cli\n<\/pre><\/div>\n\n\n
If you don’t have Angular installed at all, run the command<\/p>\n\n\n
\nnpm install -g @angular\/cli\n<\/pre><\/div>\n\n\n
Create your Angular project<\/h3>\n\n\n
\nng new myapp\n<\/pre><\/div>\n\n\n
I am going to go with yes on routing and CSS as preferred styling syntax. If you don’t have angular installed, please install it first by running the command npm install -g @angular\/cli<\/strong>.<\/p>\n\n\n\n
So when you have created your angular app with the ng new myapp<\/strong> command, let’s check that it is alive and well, go to your folder with the cd <\/strong>command. <\/p>\n\n\n
\ncd .\\myapp\n<\/pre><\/div>\n\n\n
Now in your app directory, run your application with the serve <\/strong>angular command.<\/p>\n\n\n
\nng serve\n<\/pre><\/div>\n\n\n
\"\"
Result after creating a new Angular app<\/figcaption><\/figure>\n\n\n\n
Create a Node.js Server<\/h3>\n\n\n\n
Great it looks good! Next step is to go back to your main directory with the cd<\/strong> command and create a server folder with the mkdir <\/strong>command. This is going to be the back-end, the nodejs folder. <\/p>\n\n\n
\ncd ..\nmkdir server\n<\/pre><\/div>\n\n\n
Now we have a server <\/strong>folder and a myapp <\/strong>folder. Jump into the folder and create a server.js<\/strong> file. In this file, <\/p>\n\n\n
\nlet app = require('express')(),\n    server = require('http').Server(app),\n    bodyParser = require('body-parser')\nexpress = require('express'),\n    cors = require('cors'),\n    http = require('http'),\n    path = require('path');\n\nlet articleRoute = require('.\/Routes\/article'),\n    util = require('.\/Configurations\/utils');\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\n\napp.use(cors());\n\napp.use(function (err, req, res, next) {\n    return res.send({ "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SOMETHING_WENT_WRONG });\n});\n\napp.use('\/article', articleRoute);\n\n\/\/ catch 404 and forward to error handler\napp.use(function (req, res, next) {\n    next();\n});\n\nserver.listen(3000, function () {\n    console.log('app listening on port: 3000');\n});\n<\/pre><\/div>\n\n\n
What we are doing<\/strong>
We are running a nodejs express server here on port 3000<\/strong>. We also define that on the URL \/article<\/strong> we want to use the articleRoute<\/strong> object. In the top of the file we have imported this object in .\/Routes\/article<\/strong>. We also have our util <\/strong>object at  .\/Configurations\/utils <\/strong>to send statusCodes. We will create these folders and files shortly!<\/p>\n\n\n\n
Now let’s install the dependencies<\/strong> from our newly created server.js<\/strong><\/p>\n\n\n
\nnpm i express http body-parser cors http path\n<\/pre><\/div>\n\n\n
Hopefully I didn’t miss any dependency, but you will notice if it fails to run later on.<\/p>\n\n\n\n
Now create another directory called Routes<\/strong> inside the server <\/strong>folder, and inside the Routes <\/strong>folder create a file called article.js<\/strong> <\/p>\n\n\n
\nlet express = require('express'),\n    router = express.Router(),\n    util = require('..\/Configurations\/utils'),\n    articleService = require('..\/service\/article');\n\n\/**Api to create article *\/\nrouter.post('\/create-article', (req, res) => {\n    console.log(req)\n    articleService.createArticle(req.body, (data) => {\n        res.send(data);\n    });\n});\n\n\/\/ \/**Api to update article *\/\nrouter.put('\/update-article', (req, res) => {\n    articleService.updateArticle(req.body, (data) => {\n        res.send(data);\n    });\n});\n\n\/\/ \/**Api to delete the article *\/\nrouter.delete('\/delete-article', (req, res) => {\n    articleService.deleteArticle(req.query, (data) => {\n        res.send(data);\n    });\n});\n\n\/**Api to get the list of article *\/\nrouter.get('\/get-article', (req, res) => {\n    articleService.getArticle(req.query, (data) => {\n        res.send(data);\n    });\n});\n\n\/\/ \/**API to get the article by id... *\/\nrouter.get('\/get-article-by-id', (req, res) => {\n    articleService.getArticleById(req.query, (data) => {\n        res.send(data);\n    });\n});\n\nmodule.exports = router;\n<\/pre><\/div>\n\n\n
Install the dependencies<\/strong><\/p>\n\n\n
\nnpm i async xml2js\n<\/pre><\/div>\n\n\n
With this routing file we now have some API routes for our articles in our database. Don’t worry about the database yet, we will come to that.<\/p>\n\n\n\n
Now create another folder inside the server folder called Configurations <\/strong>and inside it, create a file called config.js<\/strong>.<\/p>\n\n\n
\nlet environment = "dev";\n\nlet serverURLs = {\n    "dev": {\n        "NODE_SERVER": "http:\/\/localhost",\n        "NODE_SERVER_PORT": "3000",\n        "MYSQL_HOST": 'localhost',\n        "MYSQL_USER": 'root',\n        "MYSQL_PASSWORD": 'password',\n        'MYSQL_DATABASE': 'mydb',\n    }\n}\n\nlet config = {\n    "DB_URL_MYSQL": {\n        "host": `${serverURLs[environment].MYSQL_HOST}`,\n        "user": `${serverURLs[environment].MYSQL_USER}`,\n        "password": `${serverURLs[environment].MYSQL_PASSWORD}`,\n        "database": `${serverURLs[environment].MYSQL_DATABASE}`\n    },\n    "NODE_SERVER_PORT": {\n        "port": `${serverURLs[environment].NODE_SERVER_PORT}`\n    },\n    "NODE_SERVER_URL": {\n        "url": `${serverURLs[environment].NODE_SERVER}`\n    }\n};\n\nmodule.exports = {\n    config: config\n};\n<\/pre><\/div>\n\n\n
Next up, create a mysqlconfig.js<\/strong> file inside the Configurations <\/strong>folder.<\/p>\n\n\n
\nvar config = require("..\/Configurations\/config").config;\nvar mysql = require('mysql');\nvar connection = mysql.createConnection({\n    host: config.DB_URL_MYSQL.host,\n    user: config.DB_URL_MYSQL.user,\n    password: config.DB_URL_MYSQL.password,\n    database: config.DB_URL_MYSQL.database,\n});\n\nconnection.connect((er) => {\n    console.log(er)\n});\n\nlet getDB = () => {\n    return connection;\n}\n\nmodule.exports = {\n    getDB: getDB\n}\n<\/pre><\/div>\n\n\n
Remember to install the mysql dependency <\/strong><\/p>\n\n\n
\nnpm i mysql\n<\/pre><\/div>\n\n\n
Next create a utils.js <\/strong>file, still inside the Configurations <\/strong>folder. We will define some status messages.<\/p>\n\n\n
\n\/\/ Define Error Codes\nlet statusCode = {\n    OK: 200,\n    FOUR_ZERO_FOUR: 404,\n    FOUR_ZERO_THREE: 403,\n    FOUR_ZERO_ONE: 401,\n    FIVE_ZERO_ZERO: 500\n};\n\n\/\/ Define Error Messages\nlet statusMessage = {\n    SERVER_BUSY: 'Our Servers are busy. Please try again later.',\n    DATA_UPDATED: 'Data updated successfully.',\n    DELETE_DATA: 'Delete data successfully',\n\n};\n\nmodule.exports = {\n    statusCode: statusCode,\n    statusMessage: statusMessage\n}\n<\/pre><\/div>\n\n\n
Now create a new DAO <\/strong>folder in the server folder to handle the SQL queries and add a file called articleDAO.js <\/strong>inside it.<\/p>\n\n\n
\nlet dbConfig = require("..\/Configurations\/mysqlconnection");\n\nlet getArticle = (criteria, callback) => {\n    \/\/criteria.aricle_id ? conditions += ` and aricle_id = '${criteria.aricle_id}'` : true;\n    dbConfig.getDB().query(`select * from article where 1`, criteria, callback);\n}\n\nlet getArticleDetail = (criteria, callback) => {\n    let conditions = "";\n    criteria.id ? conditions += ` and id = '${criteria.id}'` : true;\n    dbConfig.getDB().query(`select * from article where 1 ${conditions}`, callback);\n}\n\nlet createArticle = (dataToSet, callback) => {\n    console.log("insert into article set ? ", dataToSet, 'fileidea')\n    dbConfig.getDB().query("insert into article set ? ", dataToSet, callback);\n}\n\nlet deleteArticle = (criteria, callback) => {\n    let conditions = "";\n    criteria.id ? conditions += ` and id = '${criteria.id}'` : true;\n    console.log(`delete from article where 1 ${conditions}`);\n    dbConfig.getDB().query(`delete from article where 1 ${conditions}`, callback);\n\n}\n\nlet updateArticle = (criteria, dataToSet, callback) => {\n    let conditions = "";\n    let setData = "";\n    criteria.id ? conditions += ` and id = '${criteria.id}'` : true;\n    dataToSet.category ? setData += `category = '${dataToSet.category}'` : true;\n    dataToSet.title ? setData += `, title = '${dataToSet.title}'` : true;\n    console.log(`UPDATE article SET ${setData} where 1 ${conditions}`);\n    dbConfig.getDB().query(`UPDATE article SET ${setData} where 1 ${conditions}`, callback);\n}\nmodule.exports = {\n    getArticle: getArticle,\n    createArticle: createArticle,\n    deleteArticle: deleteArticle,\n    updateArticle: updateArticle,\n    getArticleDetail: getArticleDetail\n}\n<\/pre><\/div>\n\n\n
Create a service <\/strong>folder inside the server folder now and add a file called article.js<\/strong>.<\/p>\n\n\n
\nlet async = require('async'),\n    parseString = require('xml2js').parseString;\n\nlet util = require('..\/Configurations\/utils'),\n    articleDAO = require('..\/DAO\/articleDAO');\n\n\/* Creating a new article *\/\nlet createArticle = (data, callback) => {\n    async.auto({\n        article: (cb) => {\n            var dataToSet = {\n                "category": data.category ? data.category : '',\n                "title": data.title,\n            }\n            console.log(dataToSet);\n            articleDAO.createArticle(dataToSet, (err, dbData) => {\n                if (err) {\n                    cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });\n                    return;\n                }\n\n                cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DATA_UPDATED, "result": dataToSet });\n            });\n        }\n        \/\/]\n    }, (err, response) => {\n        callback(response.article);\n    });\n}\n\n\/* Update an article *\/\nlet updateArticle = (data, callback) => {\n    async.auto({\n        articleUpdate: (cb) => {\n            if (!data.id) {\n                cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })\n                return;\n            }\n            console.log('phase 1');\n            var criteria = {\n                id: data.id,\n            }\n            var dataToSet = {\n                "category": data.category,\n                "title": data.title,\n            }\n            console.log(criteria, 'test', dataToSet);\n            articleDAO.updateArticle(criteria, dataToSet, (err, dbData) => {\n                if (err) {\n                    cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });\n                    return;\n                }\n                else {\n                    cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DATA_UPDATED, "result": dataToSet });\n                }\n            });\n        }\n    }, (err, response) => {\n        callback(response.articleUpdate);\n    });\n}\n\n\/* Delete an article *\/\nlet deleteArticle = (data, callback) => {\n    console.log(data, 'data to set')\n    async.auto({\n        removeArticle: (cb) => {\n            if (!data.id) {\n                cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })\n                return;\n            }\n            var criteria = {\n                id: data.id,\n            }\n            articleDAO.deleteArticle(criteria, (err, dbData) => {\n                if (err) {\n                    console.log(err);\n                    cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });\n                    return;\n                }\n                cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.DELETE_DATA });\n            });\n        }\n    }, (err, response) => {\n        callback(response.removeArticle);\n    });\n}\n\n\/* Get all articles  *\/\nlet getArticle = (data, callback) => {\n    async.auto({\n        article: (cb) => {\n            articleDAO.getArticle({}, (err, data) => {\n                if (err) {\n                    cb(null, { "errorCode": util.statusCode.INTERNAL_SERVER_ERROR, "statusMessage": util.statusMessage.SERVER_BUSY });\n                    return;\n                }\n                cb(null, data);\n                return;\n            });\n        }\n    }, (err, response) => {\n        callback(response.article);\n    })\n}\n\n\/* Get article by Id *\/\nlet getArticleById = (data, callback) => {\n    async.auto({\n        article: (cb) => {\n            let criteria = {\n                "id": data.id\n            }\n            articleDAO.getArticleDetail(criteria, (err, data) => {\n                if (err) {\n                    console.log(err, 'error----');\n                    cb(null, { "errorCode": util.statusCode.INTERNAL_SERVER_ERROR, "statusMessage": util.statusMessage.SERVER_BUSY });\n                    return;\n                }\n                cb(null, data[0]);\n                return;\n            });\n        }\n    }, (err, response) => {\n        callback(response.article);\n    })\n}\n\nmodule.exports = {\n    createArticle: createArticle,\n    updateArticle: updateArticle,\n    deleteArticle: deleteArticle,\n    getArticle: getArticle,\n    getArticleById: getArticleById\n};\n<\/pre><\/div>\n\n\n
Now we have a full service for the full article object in our database utilising the articleDAO.js<\/strong> file which works like an interface for our service.<\/p>\n\n\n\n
To start your server run node server.js <\/strong>inside your server folder. It will be hosted on localhost:3000. Also since we haven’t made any settings to the database yet you will get database errors if you are trying to get any articles through your API.<\/p>\n\n\n\n
Proceed with Angular app<\/strong><\/h3>\n\n\n\n
Our nodejs express server is now pretty much done! In the end we will we will adjust the database settings if you haven’t already done it. Now let’s go back to the angular application folder (myapp<\/strong>) in the terminal. Then generate a component with the angular command.<\/p>\n\n\n
\nng g component article\n<\/pre><\/div>\n\n\n
Bam! We got a component ready to do stuff with. Now to communicate with our back-end service, we can use the HttpClientModule <\/strong>from Angular. Let’s add it to our angular app inside app.module.ts<\/strong>. Open and edit it and add the HttpClientModule<\/strong> to the imports. We also want to add ReactiveFormsModule <\/strong>and FormsModule <\/strong>because we will use formGroup<\/strong> soon in our component. Note that the generate command already added our ArticleComponent <\/strong>to the module. We will also add ArticleService<\/strong>, which we will add in the next step, so expect an error here.<\/p>\n\n\n\n
My app.module.ts<\/strong> looks like this now:<\/p>\n\n\n
\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { ArticleComponent } from '.\/article\/article.component';\nimport { HttpClientModule } from '@angular\/common\/http';\nimport { ArticleService } from '.\/article.service';\nimport { HttpModule } from '@angular\/http';\nimport { CommonModule } from '@angular\/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular\/forms';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ArticleComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    HttpClientModule,\n    HttpModule,\n    CommonModule,\n    ReactiveFormsModule\n  ],\n  exports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule\n  ],\n  providers: [ArticleService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n<\/pre><\/div>\n\n\n
Now let’s add an Article class\/model that we will use whenever doing things with our articles. Create a folder Models <\/strong>in your app folder, and in it, create a file called article.model.ts<\/strong>. Here we can add as many properties as we want, but first of all, we need to include the ones that will be in the database table.<\/p>\n\n\n
\nexport class Article {\n    id: number\n    title: string\n    category: string\n}\n<\/pre><\/div>\n\n\n
Now we need a service which can talk to the back-end. Run the Angular command to create a service<\/strong> with the following in your angular project folder.<\/p>\n\n\n
\nng g service article\n<\/pre><\/div>\n\n\n
Open up the generated article.service.ts <\/strong>file and add<\/p>\n\n\n
\nimport { Injectable } from '@angular\/core';\nimport { Http, Response, Headers, RequestOptions } from '@angular\/http';\nimport { Observable, pipe, of } from 'rxjs';\nimport { map, catchError } from 'rxjs\/operators';\nimport { Article } from '.\/model\/article.model';\n\n\n@Injectable()\nexport class ArticleService {\n  \/\/ URL for CRUD operations\n  articleUrl = "http:\/\/localhost:3000\/article";\n  \/\/ Create constructor to get Http instance\n  constructor(private http: Http) {\n  }\n\n  \/\/ Fetch all articles\n  getAllArticles(): Observable<Article[]> {\n    return this.http.get(this.articleUrl + "\/get-article")\n      .pipe(map(this.extractData))\n\n  }\n  \/\/ Create article\n  createArticle(article: Article): Observable<number> {\n    let cpHeaders = new Headers({ 'Content-Type': 'application\/json' });\n    let options = new RequestOptions({ headers: cpHeaders });\n    console.log(article)\n    return this.http.post(this.articleUrl + "\/create-article", article, options)\n      .pipe(\n        map(success => success.status)\n      )\n  }\n  \/\/ Fetch article by id\n  getArticleById(articleId: string): Observable<Article> {\n    let cpHeaders = new Headers({ 'Content-Type': 'application\/json' });\n    let options = new RequestOptions({ headers: cpHeaders });\n    console.log(this.articleUrl + "\/get-article-by-id?id=" + articleId);\n    return this.http.get(this.articleUrl + "\/get-article-by-id?id=" + articleId)\n      .pipe(map(this.extractData))\n  }\n  \/\/ Update article\n  updateArticle(article: Article): Observable<number> {\n    let cpHeaders = new Headers({ 'Content-Type': 'application\/json' });\n    let options = new RequestOptions({ headers: cpHeaders });\n    return this.http.put(this.articleUrl + "\/update-article", article, options)\n      .pipe(map(success => success.status))\n  }\n  \/\/ Delete article    \n  deleteArticleById(articleId: string): Observable<number> {\n    let cpHeaders = new Headers({ 'Content-Type': 'application\/json' });\n    let options = new RequestOptions({ headers: cpHeaders });\n    return this.http.delete(this.articleUrl + "\/delete-article?id=" + articleId)\n      .pipe(map(success => success.status))\n\n  }\n  private extractData(res: Response) {\n    let body = res.json();\n    return body;\n  }\n  private handleError(error: Response | any) {\n    console.error(error.message || error);\n    return Observable.throw(error.status);\n  }\n}\n<\/pre><\/div>\n\n\n
Great we got the service down to talk with our back-end. <\/p>\n\n\n\n
Let’s start using the service, open up the article.component.ts<\/strong> file and add:<\/p>\n\n\n
\nimport { Component, OnInit } from '@angular\/core';\nimport { FormControl, FormGroup, Validators } from '@angular\/forms';\nimport { Article } from '..\/model\/article.model';\nimport { ArticleService } from '..\/article.service'\n\n@Component({\n  selector: 'app-article',\n  templateUrl: '.\/article.component.html',\n  styleUrls: ['.\/article.component.css']\n})\nexport class ArticleComponent implements OnInit {\n  \/\/Component properties\n  allArticles: Article[];\n  statusCode: number;\n  requestProcessing = false;\n  articleIdToUpdate = null;\n  processValidation = false;\n  \/\/Create form\n  articleForm = new FormGroup({\n    title: new FormControl('', Validators.required),\n    category: new FormControl('', Validators.required)\n  });\n  \/\/Create constructor to get service instance\n  constructor(private articleService: ArticleService) {\n  }\n  \/\/Create ngOnInit() and and load articles\n  ngOnInit(): void {\n    this.getAllArticles();\n  }\n\n  \/\/Fetch all articles\n  getAllArticles() {\n    this.articleService.getAllArticles()\n      .subscribe(\n        data => this.allArticles = data,\n        errorCode => this.statusCode = errorCode);\n\n  }\n  \/\/Handle create and update article\n  onArticleFormSubmit() {\n    this.processValidation = true;\n    if (this.articleForm.invalid) {\n      return; \/\/Validation failed, exit from method.\n    }\n    \/\/Form is valid, now perform create or update\n    this.preProcessConfigurations();\n    let article = this.articleForm.value;\n    console.log(article)\n    if (this.articleIdToUpdate === null) {\n      \/\/Generate article id then create article\n      this.articleService.getAllArticles()\n        .subscribe(articles => {\n          let articleId = 0\n          \/\/Generate article id    \n          if (articles.length > 0) {\n            let maxIndex = articles.length - 1;\n\n            let articleWithMaxIndex = articles[maxIndex];\n            articleId = articleWithMaxIndex.id + 1;\n          }\n          article.id = articleId;\n          console.log(article, 'this is form data---');\n          \/\/Create article\n          this.articleService.createArticle(article)\n            .subscribe(successCode => {\n              this.statusCode = successCode;\n              this.getAllArticles();\n              this.backToCreateArticle();\n            },\n              errorCode => this.statusCode = errorCode\n            );\n        });\n    } else {\n      \/\/Handle update article\n      article.id = this.articleIdToUpdate;\n      this.articleService.updateArticle(article)\n        .subscribe(successCode => {\n          this.statusCode = successCode;\n          this.getAllArticles();\n          this.backToCreateArticle();\n        },\n          errorCode => this.statusCode = errorCode);\n    }\n  }\n  \/\/Load article by id to edit\n  loadArticleToEdit(articleId: string) {\n    this.preProcessConfigurations();\n    this.articleService.getArticleById(articleId)\n      .subscribe(article => {\n        console.log(article, 'poiuytre');\n        this.articleIdToUpdate = article.id;\n        this.articleForm.setValue({ title: article.title, category: article.category });\n        this.processValidation = true;\n        this.requestProcessing = false;\n      },\n        errorCode => this.statusCode = errorCode);\n  }\n  \/\/Delete article\n  deleteArticle(articleId: string) {\n    this.preProcessConfigurations();\n    this.articleService.deleteArticleById(articleId)\n      .subscribe(successCode => {\n        \/\/this.statusCode = successCode;\n        \/\/Expecting success code 204 from server\n        this.statusCode = 204;\n        this.getAllArticles();\n        this.backToCreateArticle();\n      },\n        errorCode => this.statusCode = errorCode);\n  }\n  \/\/Perform preliminary processing configurations\n  preProcessConfigurations() {\n    this.statusCode = null;\n    this.requestProcessing = true;\n  }\n  \/\/Go back from update to create\n  backToCreateArticle() {\n    this.articleIdToUpdate = null;\n    this.articleForm.reset();\n    this.processValidation = false;\n  }\n}\n<\/pre><\/div>\n\n\n
To keep it simple we will run a getAllArticles <\/strong>method to get all articles whenever the component is initialised. Now let us create the component html. Open up article.component.html<\/strong> and add:   <\/p>\n\n\n
\n<h1 class="text-center">FileIdea Angular 10 app<\/h1>\n<h3 class="text-center" *ngIf="articleIdToUpdate; else create">\n    Update Article for Id: {{articleIdToUpdate}}\n<\/h3>\n<ng-template #create>\n    <h3 class="text-center"> Create New Article <\/h3>\n<\/ng-template>\n<div>\n    <form [formGroup]="articleForm" (ngSubmit)="onArticleFormSubmit()">\n        <table class="table-striped" style="margin:0 auto;">\n            <tr>\n                <td>Enter Title<\/td>\n                <td><input formControlName="title">\n                    <label *ngIf="articleForm.get('title').invalid && processValidation" [ngClass]="'error'"> Title is\n                        required. <\/label>\n                <\/td>\n            <\/tr>\n            <tr>\n                <td>Enter Category<\/td>\n                <td><input formControlName="category">\n                    <label *ngIf="articleForm.get('category').invalid && processValidation" [ngClass]="'error'">\n                        Category is required. <\/label>\n                <\/td>\n            <\/tr>\n            <tr>\n                <td colspan="2">\n                    <button class="btn btn-default" *ngIf="!articleIdToUpdate">CREATE<\/button>\n                    <button class="btn btn-default" *ngIf="articleIdToUpdate">UPDATE<\/button>\n                    <button (click)="backToCreateArticle()" *ngIf="articleIdToUpdate">Go Back<\/button>\n                <\/td>\n            <\/tr>\n        <\/table>\n    <\/form>\n    <br \/>\n    <div class="text-center" *ngIf="statusCode; else processing">\n        <div *ngIf="statusCode === 201" [ngClass]="'success'">\n            Article added successfully.\n        <\/div>\n        <div *ngIf="statusCode === 409" [ngClass]="'success'">\n            Article already exists.\n        <\/div>\n        <div *ngIf="statusCode === 200" [ngClass]="'success'">\n            Article updated successfully.\n        <\/div>\n        <div *ngIf="statusCode === 204" [ngClass]="'success'">\n            Article deleted successfully.\n        <\/div>\n        <div *ngIf="statusCode === 500" [ngClass]="'error'">\n            Internal Server Error.\n        <\/div>\n    <\/div>\n    <ng-template #processing>\n        <!-- <img *ngIf="requestProcessing" src="assets\/images\/loading.gif"> -->\n        <p *ngIf="requestProcessing">Loading<\/p>\n    <\/ng-template>\n<\/div>\n<h3 class="text-center">Article List<\/h3>\n<table class="table-striped" style="margin:0 auto;" *ngIf="allArticles">\n    <tr>\n        <th> Id<\/th>\n        <th>Title<\/th>\n        <th>Category<\/th>\n        <th><\/th>\n        <th><\/th>\n    <\/tr>\n    <tr *ngFor="let article of allArticles">\n        <td>{{article.id}}<\/td>\n        <td>{{article.title}}<\/td>\n        <td>{{article.category}}<\/td>\n        <td><button class="btn btn-default" type="button" (click)="loadArticleToEdit(article.id)">Edit<\/button> <\/td>\n        <td><button class="btn btn-default" type="button" (click)="deleteArticle(article.id)">Delete<\/button><\/td>\n    <\/tr>\n<\/table>\n<\/pre><\/div>\n\n\n
Okay we got a back end server, a service in our Angular app, and markup for our component. What is next? Well let us add the new component to our app.component.html. You can remove everything there and replace it with   <app-article><\/app-article><\/strong> if you want. I am actually going to keep the sample CSS because I like what they have going on with the blue top bar, and then I’ll put my component element inside the content class they already made, and keep router-outlet<\/strong> in the bottom. In the end, my app.component.html <\/strong>looks like this. <\/p>\n\n\n
\n<style>\n  :host {\n    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n    font-size: 14px;\n    color: #333;\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 8px 0;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  .spacer {\n    flex: 1;\n  }\n\n  .toolbar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    background-color: #1976d2;\n    color: white;\n    font-weight: 600;\n  }\n\n  .toolbar img {\n    margin: 0 16px;\n  }\n\n  .toolbar #twitter-logo {\n    height: 40px;\n    margin: 0 16px;\n  }\n\n  .toolbar #twitter-logo:hover {\n    opacity: 0.8;\n  }\n\n  .content {\n    display: flex;\n    margin: 82px auto 32px;\n    padding: 0 16px;\n    max-width: 960px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  svg.material-icons {\n    height: 24px;\n    width: auto;\n  }\n\n  svg.material-icons:not(:last-child) {\n    margin-right: 8px;\n  }\n\n\n  svg#clouds {\n    position: fixed;\n    bottom: -160px;\n    left: -230px;\n    z-index: -10;\n    width: 1920px;\n  }\n\n\n  \/* Responsive Styles *\/\n  @media screen and (max-width: 767px) {\n\n    .card-container>*:not(.circle-link),\n    .terminal {\n      width: 100%;\n    }\n\n    .card:not(.highlight-card) {\n      height: 16px;\n      margin: 8px 0;\n    }\n\n    .card.highlight-card span {\n      margin-left: 72px;\n    }\n\n    svg#rocket-smoke {\n      right: 120px;\n      transform: rotate(-5deg);\n    }\n  }\n\n  @media screen and (max-width: 575px) {\n    svg#rocket-smoke {\n      display: none;\n      visibility: hidden;\n    }\n  }\n<\/style>\n\n\n<!-- Toolbar -->\n<div class="toolbar" role="banner">\n  <img width="40" alt="Angular Logo"\n    src="data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" \/>\n  <span>Welcome<\/span>\n  <div class="spacer"><\/div>\n  <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https:\/\/twitter.com\/angular" title="Twitter">\n    <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http:\/\/www.w3.org\/2000\/svg" viewBox="0 0 400 400">\n      <rect width="400" height="400" fill="none" \/>\n      <path\n        d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"\n        fill="#fff" \/>\n    <\/svg>\n  <\/a>\n<\/div>\n\n<div class="content" role="main">\n  <!-- Article Component -->\n  <app-article><\/app-article>\n\n<\/div>\n\n\n<router-outlet><\/router-outlet>\n<\/pre><\/div>\n\n\n
MySQL<\/strong><\/p>\n\n\n\n
To get the MySQL <\/strong>working, open up our favourite tool. I am using XAMPP<\/strong> which has phpmyadmin <\/strong>for MySQL which never seems to have any problems. Download it here<\/a>. Start your Apache<\/strong> (you might need to change port<\/a>) and MySQL<\/strong> and click on the admin button to view the phpmyadmin<\/strong> page.<\/p>\n\n\n\n
Once you are in phpmyadmin, create a database and in it, create a article<\/strong> table. My phpmyadmin looks like this now.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
\nCREATE TABLE `article` (\n  `id` int(11) NOT NULL,\n  `title` varchar(80) NOT NULL,\n  `category` varchar(80) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;\n\n\nALTER TABLE `article`\n  ADD PRIMARY KEY (`id`);\n\n\nALTER TABLE `article`\n  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;\n\n<\/pre><\/div>\n\n\n
If you are feeling copy-pasty you can run the sql above to your test<\/strong> database or whatever you called it. Now we need to update our sql database settings in our server, inside the config.js<\/strong> inside the Configurations<\/strong> folder. Now I have a test database server and running this on localhost, I do not have a password. This is how my config.js<\/strong> looks like<\/p>\n\n\n
\nlet environment = "dev";\n\nlet serverURLs = {\n    "dev": {\n        "NODE_SERVER": "http:\/\/localhost",\n        "NODE_SERVER_PORT": "3306",\n        "MYSQL_HOST": '127.0.0.1',\n        "MYSQL_USER": 'root',\n        "MYSQL_PASSWORD": '',\n        'MYSQL_DATABASE': 'test',\n    }\n}\n\nlet config = {\n    "DB_URL_MYSQL": {\n        "host": `${serverURLs[environment].MYSQL_HOST}`,\n        "user": `${serverURLs[environment].MYSQL_USER}`,\n        "password": `${serverURLs[environment].MYSQL_PASSWORD}`,\n        "database": `${serverURLs[environment].MYSQL_DATABASE}`\n    },\n    "NODE_SERVER_PORT": {\n        "port": `${serverURLs[environment].NODE_SERVER_PORT}`\n    },\n    "NODE_SERVER_URL": {\n        "url": `${serverURLs[environment].NODE_SERVER}`\n    }\n};\n\nmodule.exports = {\n    config: config\n};\n<\/pre><\/div>\n\n\n
Mission Complete<\/h3>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
You should now have a app that uses MySQL with Angular 10! Open up your Angular app on localhost:4200 and behold the beauty and start inserting new rows into your article <\/strong>table. <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The combination with Angular, Nodejs and MySQL is very powerful. I am a huge fan of MySQL, started using it in 2007 and here we are, 2020 and people still using it a lot for websites and web services. On top of that, I just found out that MySQL was created by some Swedes back … <\/p>\n
Continue reading “Creating a simple Angular 10 App with Nodejs Back-End using MySQL”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[26,28,27,24],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/214"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}