{"id":22560,"date":"2018-09-04T20:42:29","date_gmt":"2018-09-04T17:42:29","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=22560"},"modified":"2018-09-19T09:44:16","modified_gmt":"2018-09-19T06:44:16","slug":"single-page-application-node-angular","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/single-page-application-node-angular\/","title":{"rendered":"Build a CRUD-y Single Page Application with Node and Angular"},"content":{"rendered":"

\u201cI love writing authentication and authorization code.\u201d ~ No Web Developer Ever.<\/b> Tired of building the same login screens over and over? Try the Okta API for hosted authentication, authorization, and multi-factor auth.<\/a> <\/span><\/p>\n

Even before the release of Angular 6, Angular had gone through some changes over the years. The biggest one was the jump from AngularJS (v1.x) to Angular (v2+), which included a lot of breaking syntax changes and made TypeScript the default language instead of JavaScript. TypeScript is actually a superset of JavaScript, but it allows you to have strongly typed functions and variables, and it will get compiled down to JavaScript so that it can still run in your browser. Given the popularity of of Angular and Node, it wouldn\u2019t be shocking if you were considering this stack for your next project.<\/p>\n

Today I\u2019ll show you how you to build a secure single-page app with basic CRUD functionality. You\u2019ll use Okta\u2019s OpenID Connect (OIDC) API<\/a> to handle authentication. Okta provides a simple to use Angular SDK<\/a> to get you up and running very quickly. On the backend, I\u2019ll show you how to use the Okta JWT Verifier<\/a> to ensure that the user is properly authenticated before serving any sensitive content.<\/p>\n

We\u2019ll be working with Angular 6 for this project, so you can get a feel for some of the changes and news features (read more about them in our Angular 6: What\u2019s New, and Why Upgrade? post<\/a>).<\/p>\n

Let\u2019s get started!<\/p>\n

Create Your Angular 6 App<\/h2>\n

The Angular team maintains a wonderful command line interface called the Angular CLI<\/a> that makes creating new Angular apps a breeze. It also has a ton of blueprints for generating new classes, components, services, and more. To install it with npm<\/code>, run the following command:<\/p>\n

npm i -g @angular\/cli@6.0.8<\/pre>\n
Note<\/strong>: I\u2019m including version numbers used at the time of writing to help ensure this tutorial works in the future. It\u2019s possible that newer versions may still work, but some adjustments might be necessary.<\/p><\/blockquote>\n
You should now have the CLI installed as a command called ng<\/code>. To bootstrap a new app, type the following:<\/p>\n
ng new okta-node-angular-example\r\ncd okta-node-angular-example<\/pre>\n
Angular CLI will automatically install packages for you after creating the folder with the bare project. It will also initialize a git repository for you with an initial commit ready to go, so you can start tracking changes very easily.<\/p>\n
To start the app, run the following:<\/p>\n
npm start<\/pre>\n
You should now be able to access a very simple default app at http:\/\/localhost:4200<\/code>. When you make changes to the code, the page will automatically refresh with the latest changes.<\/p>\n
\"Single<\/a><\/p>\n
Create a Basic Homepage with Material UI<\/h2>\n
To keep things looking nice without writing a lot of extra CSS, you can use a UI framework. The Angular team at Google maintains Angular Material<\/a>, a great framework for Angular that implements Google\u2019s Material Design<\/a> principles.<\/p>\n
To add the dependencies needed for Angular Material, run the following command:<\/p>\n
npm i @angular\/material@6.4.1 @angular\/cdk@6.4.1 hammerjs@2.0.8<\/pre>\n
The idea here will be to make an app bar across the top of the page that will be used for navigation. This will stay consistent throughout the app. The part that will change will be below and will vary from page to page. For now, create a very basic homepage component.<\/p>\n
ng generate component home-page<\/pre>\n
This creates a few new files: one for the component\u2019s TypeScript logic, one for the CSS, one for the HTML template, and one for testing the component.<\/p>\n
To keep this super simple, just change the template to look like this:<\/p>\n
src\/app\/home-page\/home-page.component.html<\/strong><\/p>\n
<h1><\/span>Welcome Home!<\/h1><\/span><\/pre>\n
You can leave the other generated files the same.<\/p>\n
In Angular, you need to add new components to your app\u2019s module. This was done automatically for you with the HomePageComponent<\/code>, but you\u2019ll need to add a few more to set up Angular Material.<\/p>\n
Right now, just add the Toolbar module and the animations module (the following diff also shows you the HomePageComponent<\/code> that should have been added for you already):<\/p>\n
src\/app\/app.module.ts<\/strong><\/p>\n
@@ -1,14 +1,20 @@\r\n import { BrowserModule } from '@angular\/platform-browser';\r\n+import { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\r\n import { NgModule } from '@angular\/core';\r\n+import { MatToolbarModule } from '@angular\/material';\r\n\r\n import { AppComponent } from '.\/app.component';\r\n+import { HomePageComponent } from '.\/home-page\/home-page.component';\r\n\r\n @NgModule({\r\n   declarations: [\r\n-    AppComponent\r\n+    AppComponent,\r\n+    HomePageComponent\r\n   ],\r\n   imports: [\r\n-    BrowserModule\r\n+    BrowserModule,\r\n+    BrowserAnimationsModule,\r\n+    MatToolbarModule,\r\n   ],\r\n   providers: [],\r\n   bootstrap: [AppComponent]<\/pre>\n
Angular Material uses Hammer.JS<\/a> for better touchscreen support. You already added the dependency earlier, so to add it to the page all you need to do is import it at the top of the app\u2019s entry script.<\/p>\n
src\/main.ts<\/strong><\/p>\n
import<\/span> 'hammerjs'<\/span>;<\/span><\/pre>\n
For the CSS, the default entry point is src\/styles.css<\/code>, but each component also has its own CSS file for styles specific to that component. To finish setting up Angular Material and set some decent defaults to your page, add these styles:<\/p>\n
src\/styles.css<\/strong><\/p>\n
@import \"~@angular\/material\/prebuilt-themes\/indigo-pink.css\";\r\n@import \"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\";\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: Roboto, sans-serif;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}<\/pre>\n
I went with indigo-pink<\/code>, but there are a couple other prebuilt themes if you want something a little different. Here are the other prebuilt options at the time of this writing:<\/p>\n