What’s UML? Go ahead look it up, I’ll wait. No, not UMass Lowell it’s Unified Modeling Language. The current UML Standard, 2.0, has been around since 2005. With 14 different diagram standards UML allows individuals to work at a much higher level of abstraction. I’m familiar with UML from creating ERD diagrams while doing RDBMS work. As a developer it allows me to write pseudo-code quicker, cleaner and platform independent. From a developers stand point, let’s take a look at an example and break it down. I found the example below at https://medium.com/@smagid_allThings/uml-class-diagrams-tutorial-step-by-step-520fd83b300b I really enjoy the content at Medium.com, the articles, reviews and tutorials are all helpful and well written. This is a typical Class diagram representing 4 classes: Animal, Duck, Fish, Zebra. Notice how each of the four blocks are structured the same. Let’s focus on the Animal block. In the upper box notice that Animal is written with a bold font. This indicates that Animal is a concrete class. Abstract classes would be italicized. The next box down is where you define attributes. Public attributes are denoted using a + while private attributes use a -. Looking at our example this would translate into JAVA like this: public Int age; public String gender; The lower box is for methods or functions. The same convention is used for dentoing public or private methods. In the Animal class the example would translate to: public isMammal(){ }; public mate(){ }; Note the example is missing the return types for methods. The convention is to follow the paranthesis with a colon and list the return type. In our example isMammal would be +isMammal () : boolean Relationships between the classes are denoted using lines, arrows and diamonds. In our example the solid line with the white filled arrow indicates inheritance. The article/tutorial above has a great png showing the different relationship lines. The number of online resources for information related to drawing UML diagrams is staggering. For more information and to take a deeper dive into UML go to the source and check it out https://www.uml.org #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

So, you’ve built this really awesome Angular app, now what? Oh, you want to deploy it using Heroku. Easy peasey but there are a few gotcha’s to look out for. Running an Angular app locally we just run: ng serve -o But Heroku doesn’t work that way it needs to know how to serve up the app. We need to install a couple of packages and modify our project to make this work. The following steps should get the app up and running on Heroku just fine. First let’s make sure you are running the latest version of Angular CLI and the Angular Compiler CLI. Open a terminal session in the root folder of your project and run this: npm install @angular/cli@latest @angular/compiler-cli –save-dev So what did we just do? We installed (or updated) Angular CLI and the Angular CLI Compiler to the latest version the –save-dev added the necessary entries to the package.json which we now need to modify. Open the package.json with your favorite editor and scroll down to the devDependencies section. Move these two entries up into the Depencies section: “@angular/cli”: “^7.3.9”, “@angular/compiler-cli”: “^7.2.15”, Pay attention to the formatting and make sure you have commas where commas are needed etc. Notice the ^ symbol before the version numbers? That indicates that the version number shown is the lowest version that can be used but higher versions are allowed. Since this is an Angular app we also want to move the typescript entry up from the devDependecies to the Dependencies section. In my package.json it looks like this: “typescript”: “~3.2.2”, Now we need to tell Heroku how to build the app when it’s deployed. In the scripts section of the package.json add the following line: “postinstall”: “ng build –aot –prod” This tells Heroku to use the Ahead Of Time compiler and make the app production ready. This will create the /dist folder where all the javascripts and html are launched from. Ok now back in terminal type in: npm -v followed by node -v Make a note of the version numbers for both. We need to create an entry at the bottom of the package.json to tell Heroku what engines to use. Format the engine entry like this: “engines”: { “node”: “8.9.0”, “npm”: “6.10.2” } Paste this into the package.json right after the devDepencies section. Be sure to add a comma after the closing } for the devDepencies section. My package.json is pasted way below as an example. Since we can’t run ng serve on Heroku we need to a way to serve the app. We’ll install Express server to handle that for us. Back in terminal run: npm install express path –save This will install Express and create the entry in the package.json for us. Verify that the entry has been created in package.json it should like similar to mine: “express”: “^4.17.1”, Now go back to terminal and type in: touch server.js This creates an empty server javascript file. Open server.js with your favorite editor and paste the following into it: //Install express server const express = require(‘express’); const path = require(‘path’); const app = express(); // Serve only the static files form the dist directory app.use(express.static(__dirname + ‘/dist/your-app’)); app.get(‘/*’, function(req,res) { res.sendFile(path.join(__dirname+’/dist/your-app/index.html’)); }); // Start the app by listening on the default Heroku port app.listen(process.env.PORT || 8080); Replace your-app with the name of your app.
(you will use the name of the sub-folder located in /dist ) Now back in package.json modify (or add) the start entry located in the scripts section to this: “start”: “node server.js” Now save your changes and push them back Gitlab: git add .
git commit -m “updates to deploy to heroku”
git push Following your push check your pipelines and see if the deployment to Heroku was successful. If so go to Heroku and check out your awesome app! If not rewind, start from the top , and double check everything. My package.json: { “name”: “my-app”, “version”: “0.0.0”, “scripts”: { “ng”: “ng”, “start”: “node server.js”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “postinstall”: “ng build –aot –prod” }, “private”: true, “dependencies”: { “@angular/animations”: “^7.2.15”, “@angular/cli”: “^7.3.9”, “@angular/common”: “^7.2.15”, “@angular/compiler”: “^7.2.15”, “@angular/compiler-cli”: “^7.2.15”, “@angular/core”: “^7.2.15”, “@angular/forms”: “^7.2.15”, “@angular/platform-browser”: “^7.2.15”, “@angular/platform-browser-dynamic”: “^7.2.15”, “@angular/router”: “^7.2.15”, “bootstrap”: “^3.3.7”, “core-js”: “^2.6.10”, “express”: “^4.17.1”, “rxjs”: “~6.3.3”, “tslib”: “^1.10.0”, “typescript”: “~3.2.2”, “zone.js”: “~0.8.26” }, “devDependencies”: { “@angular-devkit/build-angular”: “^0.13.9”, “@angular/language-service”: “^7.2.15”, “@types/jasmine”: “~2.8.8”, “@types/jasminewd2”: “^2.0.8”, “@types/node”: “~8.9.4”, “codelyzer”: “~4.5.0”, “jasmine-core”: “~2.99.1”, “jasmine-spec-reporter”: “~4.2.1”, “karma”: “~4.0.0”, “karma-chrome-launcher”: “~2.2.0”, “karma-coverage-istanbul-reporter”: “^2.0.6”, “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” }, “engines”: { “node”: “8.9.0”, “npm”: “6.10.2” } } #CS@Worcester #CS448

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

So, you’ve built this really awesome Angular app, now what? Oh, you want to deploy it using Heroku. Easy peasey but there are a few gotcha’s to look out for. Running an Angular app locally we just run: ng serve -o But Heroku doesn’t work that way it needs to know how to serve up the app. We need to install a couple of packages and modify our project to make this work. The following steps should get the app up and running on Heroku just fine. First let’s make sure you are running the latest version of Angular CLI and the Angular Compiler CLI. Open a terminal session in the root folder of your project and run this: npm install @angular/cli@latest @angular/compiler-cli –save-dev So what did we just do? We installed (or updated) Angular CLI and the Angular CLI Compiler to the latest version the –save-dev added the necessary entries to the package.json which we now need to modify. Open the package.json with your favorite editor and scroll down to the devDependencies section. Move these two entries up into the Depencies section: “@angular/cli”: “^7.3.9”, “@angular/compiler-cli”: “^7.2.15”, Pay attention to the formatting and make sure you have commas where commas are needed etc. Notice the ^ symbol before the version numbers? That indicates that the version number shown is the lowest version that can be used but higher versions are allowed. Since this is an Angular app we also want to move the typescript entry up from the devDependecies to the Dependencies section. In my package.json it looks like this: “typescript”: “~3.2.2”, Now we need to tell Heroku how to build the app when it’s deployed. In the scripts section of the package.json add the following line: “postinstall”: “ng build –aot –prod” This tells Heroku to use the Ahead Of Time compiler and make the app production ready. This will create the /dist folder where all the javascripts and html are launched from. Ok now back in terminal type in: npm -v followed by node -v Make a note of the version numbers for both. We need to create an entry at the bottom of the package.json to tell Heroku what engines to use. Format the engine entry like this: “engines”: { “node”: “8.9.0”, “npm”: “6.10.2” } Paste this into the package.json right after the devDepencies section. Be sure to add a comma after the closing } for the devDepencies section. My package.json is pasted way below as an example. Since we can’t run ng serve on Heroku we need to a way to serve the app. We’ll install Express server to handle that for us. Back in terminal run: npm install express path –save This will install Express and create the entry in the package.json for us. Verify that the entry has been created in package.json it should like similar to mine: “express”: “^4.17.1”, Now go back to terminal and type in: touch server.js This creates an empty server javascript file. Open server.js with your favorite editor and paste the following into it: //Install express server const express = require(‘express’); const path = require(‘path’); const app = express(); // Serve only the static files form the dist directory app.use(express.static(__dirname + ‘/dist/your-app’)); app.get(‘/*’, function(req,res) { res.sendFile(path.join(__dirname+’/dist/your-app/index.html’)); }); // Start the app by listening on the default Heroku port app.listen(process.env.PORT || 8080); Replace your-app with the name of your app.
(you will use the name of the sub-folder located in /dist ) Now back in package.json modify (or add) the start entry located in the scripts section to this: “start”: “node server.js” Now save your changes and push them back Gitlab: git add .
git commit -m “updates to deploy to heroku”
git push Following your push check your pipelines and see if the deployment to Heroku was successful. If so go to Heroku and check out your awesome app! If not rewind, start from the top , and double check everything. My package.json: { “name”: “my-app”, “version”: “0.0.0”, “scripts”: { “ng”: “ng”, “start”: “node server.js”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “postinstall”: “ng build –aot –prod” }, “private”: true, “dependencies”: { “@angular/animations”: “^7.2.15”, “@angular/cli”: “^7.3.9”, “@angular/common”: “^7.2.15”, “@angular/compiler”: “^7.2.15”, “@angular/compiler-cli”: “^7.2.15”, “@angular/core”: “^7.2.15”, “@angular/forms”: “^7.2.15”, “@angular/platform-browser”: “^7.2.15”, “@angular/platform-browser-dynamic”: “^7.2.15”, “@angular/router”: “^7.2.15”, “bootstrap”: “^3.3.7”, “core-js”: “^2.6.10”, “express”: “^4.17.1”, “rxjs”: “~6.3.3”, “tslib”: “^1.10.0”, “typescript”: “~3.2.2”, “zone.js”: “~0.8.26” }, “devDependencies”: { “@angular-devkit/build-angular”: “^0.13.9”, “@angular/language-service”: “^7.2.15”, “@types/jasmine”: “~2.8.8”, “@types/jasminewd2”: “^2.0.8”, “@types/node”: “~8.9.4”, “codelyzer”: “~4.5.0”, “jasmine-core”: “~2.99.1”, “jasmine-spec-reporter”: “~4.2.1”, “karma”: “~4.0.0”, “karma-chrome-launcher”: “~2.2.0”, “karma-coverage-istanbul-reporter”: “^2.0.6”, “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” }, “engines”: { “node”: “8.9.0”, “npm”: “6.10.2” } } #CS@Worcester #CS448

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

This week let’s take another peek at the FoodKeeper API. We’ll review the endpoints and how to submit a request to retrieve data. Before we jump into this you need to download and install a REST client. I highly recommend Insomnia, the app not the sleep disorder, (download it here) I’ll wait… Now that you have Insomnia installed let’s talk about endpoints. Last week we covered the four primary HTTP verbs used with REST. Did you have a chance to visit https://www.restapitutorial.com despite the name of the website these aren’t tutorials on how to make REST calls but more like development guidelines for developers writing REST API’s.

So why did I recommend it? Because understanding how a good RESTful API is designed will make it easier to craft your REST calls. So the 4 basic HTTP verbs (POST, GET, PUT and DELETE) are CRUD (Create, Read, Update, Delete) operations. · POST = Create · GET = Read · PUT = Update · DELETE = Delete Kind of makes sense, right? These also make up the endpoints you access with your REST client. In JAVA we add an annotation to the class and the getter and setter methods to define the endpoint. For the FoodKeeper API we are using the Spring Framework (https://spring.io/) to help setup the Rest components. After all the imports are declared the class must be annotated with @RestController so that the compiler knows how to process it. Each endpoint must be annotated to reflect what it does. A POST endpoint would be annotated like this: @PostMapping(“/list/new”) The part in parenthesis indicates the URL path that you would pass as part of the REST Client call and is the actual endpoint. Let’s look at an online example. In a new tab on your browser go to: http://dummy.restapiexample.com/ The site lists 5 public endpoints you can practice against: · GET /employee · GET /employee/{id} · POST /create · PUT /update/{id} · DELETE /delete/{id} Note the curly braces with id in between them – this indicates that you will be passing a value.
Open your REST client, in Insomnia you would type in the URL in the White field in the top center of the screen and select the REST Method to the left of it: Click the Send button and watch the Right hand column you will see it populate with employees. This is the first entry in the list that was returned for me: Play around and get familiar with your REST Client and hit some of the other endpoints at

http://dummy.restapiexample.com/ TIP: For the endpoints above with {id} just append the url string with a number like this: http://dummy.restapiexample.com/api/v1/employees/6821 All right go play and learn something! #CS@Worcester #CS448

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Did you do that Angular tut I provided in my last post? Pretty easy to get up and running. I did the whole Tour of Heroes tutorial over the summer so I could have a solid understanding of where I was at with it. It’s flexible and somewhat intuitive. Ready to kick your Angular skills up a notch? Let’s create a component that does an API call that returns a list of all employee’s. We’ll code this against a working online example that’s hosted at dummy.restapiexample.com I’m making a couple of assumptions here. First that you actually did the earlier tutorial and second that you understand how API’s work and lastly that you have an Angular site you are currently working on. If you’re not sure about Rest API’s read this article on Sitepoint then jump back in. Ok if you’re working with a very basic Angular site let’s open it in your favorite IDE. I like using Webstorm as it has some neat built ins. In Webstorm I’ll click in the lower toolbar and launch a terminal session in the root of my project folder. To create the new component I’ll type in: ng g component getAllEmployees Since you’re here go ahead and create an employee class: ng g class employee This will create a new Angular component named get-all-employees and will also create an employee class file in the root of your project. If you check out your projects file structure you’ll see a new folder named get-all-employees in the app folder. Browse that new folder and you’ll see that Angular created the .css .html .spce.ts and component.ts for your new component. Now let’s get to the fun part, the coding. Open the employee.ts in the root folder and modify it like this: export class Employee { id: number; employee_name: string; employee_salary: number; employee_age: number; constructor(id: number, employee_name: string, employee_salary: number, employee_age: number) { this.id = id; this.employee_name = employee_name; this.employee_salary = employee_salary; this.employee_age = employee_age; } } Ignore my formatting please as my blog interface makes it wonky. By using an Employee class we can import the JSON response objects into an array of employee objects. Save the employee.ts and open up the get-all-employees.component.ts we’ll modify this to use the employee.ts and create the methods to pass the GET request to pull in all the employees: import { Component, OnInit } from ‘@angular/core’; import {Employee} from ‘../employee’; import {HttpClient, HttpErrorResponse} from ‘@angular/common/http’; @Component({ selector: ‘app-get-all-employees’, templateUrl: ‘./get-all-employees.component.html’, styleUrls: [‘./get-all-employees.component.css’] }) export class GetAllEmployeesComponent implements OnInit { employees: Employee[] = [Object]; error: HttpErrorResponse = null; constructor(private http: HttpClient) { } ngOnInit() { } getAllEmployees(): void { this.error = null; this.http.get(‘http://dummy.restapiexample.com/api/v1/employees’ ) .subscribe(response => { this.employees = response; console.log(response); }); } } Let’s break down what we are doing here. The imports should be self-explanatory but just in case… The (Component, OnInit) are Angular core components technically since we aren’t using the ngOnInit method we really don’t need it and could remove it from this component. We import Employee so we can create an array of Employee objects. The HttpClient and HttpErrorResponse are imported because we are going to be making an http call and may have to handle an error response. The @Component section defines the get-all-employees component. Now lets look at the class, we create the empty employees array of object type Employee. We set a HttpErrorResponse named error to null and we call our constructor to create a private http client. The getAllEmployees method is the where the magic happens. It takes the JSON response and maps each entry as an Employee object in the employees array. Ok next week we will finish this up by modifying app.modules.ts, get-all-customers.component.html, app.component.html and app.component.ts Until then – Happy Coding! #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Did you do that Angular tut I provided in my last post? Pretty easy to get up and running. I did the whole Tour of Heroes tutorial over the summer so I could have a solid understanding of where I was at with it. It’s flexible and somewhat intuitive. Ready to kick your Angular skills up a notch? Let’s create a component that does an API call that returns a list of all employee’s. We’ll code this against a working online example that’s hosted at dummy.restapiexample.com I’m making a couple of assumptions here. First that you actually did the earlier tutorial and second that you understand how API’s work and lastly that you have an Angular site you are currently working on. If you’re not sure about Rest API’s read this article on Sitepoint then jump back in. Ok if you’re working with a very basic Angular site let’s open it in your favorite IDE. I like using Webstorm as it has some neat built ins. In Webstorm I’ll click in the lower toolbar and launch a terminal session in the root of my project folder. To create the new component I’ll type in: ng g component getAllEmployees Since you’re here go ahead and create an employee class: ng g class employee This will create a new Angular component named get-all-employees and will also create an employee class file in the root of your project. If you check out your projects file structure you’ll see a new folder named get-all-employees in the app folder. Browse that new folder and you’ll see that Angular created the .css .html .spce.ts and component.ts for your new component. Now let’s get to the fun part, the coding. Open the employee.ts in the root folder and modify it like this: export class Employee { id: number; employee_name: string; employee_salary: number; employee_age: number; constructor(id: number, employee_name: string, employee_salary: number, employee_age: number) { this.id = id; this.employee_name = employee_name; this.employee_salary = employee_salary; this.employee_age = employee_age; } } Ignore my formatting please as my blog interface makes it wonky. By using an Employee class we can import the JSON response objects into an array of employee objects. Save the employee.ts and open up the get-all-employees.component.ts we’ll modify this to use the employee.ts and create the methods to pass the GET request to pull in all the employees: import { Component, OnInit } from ‘@angular/core’; import {Employee} from ‘../employee’; import {HttpClient, HttpErrorResponse} from ‘@angular/common/http’; @Component({ selector: ‘app-get-all-employees’, templateUrl: ‘./get-all-employees.component.html’, styleUrls: [‘./get-all-employees.component.css’] }) export class GetAllEmployeesComponent implements OnInit { employees: Employee[] = [Object]; error: HttpErrorResponse = null; constructor(private http: HttpClient) { } ngOnInit() { } getAllEmployees(): void { this.error = null; this.http.get(‘http://dummy.restapiexample.com/api/v1/employees’ ) .subscribe(response => { this.employees = response; console.log(response); }); } } Let’s break down what we are doing here. The imports should be self-explanatory but just in case… The (Component, OnInit) are Angular core components technically since we aren’t using the ngOnInit method we really don’t need it and could remove it from this component. We import Employee so we can create an array of Employee objects. The HttpClient and HttpErrorResponse are imported because we are going to be making an http call and may have to handle an error response. The @Component section defines the get-all-employees component. Now lets look at the class, we create the empty employees array of object type Employee. We set a HttpErrorResponse named error to null and we call our constructor to create a private http client. The getAllEmployees method is the where the magic happens. It takes the JSON response and maps each entry as an Employee object in the employees array. Ok next week we will finish this up by modifying app.modules.ts, get-all-customers.component.html, app.component.html and app.component.ts Until then – Happy Coding! #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

So you wanna build a Single Page Web App (SPA). What’s your angle fat guy? I just wanna help man! Ok let’s take a step back here and cool off. Let’s shift our focus to building our single page web app. One of the products best suited for developing SPA’s is Angular. What is Angular? According to this article on Sitepoint, Angular is a client-side JavaScript framework. A what? A tool that helps you develop a web application while defining how it should be designed and how it should be organized. Using Angular you’ll mainly focus on TypeScript, HTML and CSS. Wait, I thought you said it was a JavaScript framework? It is, the compiler takes the TypeScript files you create and converts them to JavaScript for display on the web. What’s the difference? Look man this will go a lot quicker if you stop interrupting. Read this article on geeksforgeeks.com to see the difference between TypeScript and JavaScript. So where do we start with our first Angular project? Let’s get our feet wet and jump in and do the Getting Started Tutorial on Angular.io It’s a great tut that walks you through creating a small ecommerce web app and introduces most of the early framework principals and techniques. Check out my next post to see some example of creating more complex SPA’s and components. #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

So you wanna build a Single Page Web App (SPA). What’s your angle fat guy? I just wanna help man! Ok let’s take a step back here and cool off. Let’s shift our focus to building our single page web app. One of the products best suited for developing SPA’s is Angular. What is Angular? According to this article on Sitepoint, Angular is a client-side JavaScript framework. A what? A tool that helps you develop a web application while defining how it should be designed and how it should be organized. Using Angular you’ll mainly focus on TypeScript, HTML and CSS. Wait, I thought you said it was a JavaScript framework? It is, the compiler takes the TypeScript files you create and converts them to JavaScript for display on the web. What’s the difference? Look man this will go a lot quicker if you stop interrupting. Read this article on geeksforgeeks.com to see the difference between TypeScript and JavaScript. So where do we start with our first Angular project? Let’s get our feet wet and jump in and do the Getting Started Tutorial on Angular.io It’s a great tut that walks you through creating a small ecommerce web app and introduces most of the early framework principals and techniques. Check out my next post to see some example of creating more complex SPA’s and components. #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.