git (v2.14.1 or higher)<\/li>\n<\/ul>\n\n\n\nEnsure you have an AWS account with which you can sign in. Create an account if you don\u2019t have one.<\/p>\n\n\n\n
Install AWS Amplify CLI<\/h4>\n\n\n\n
To install and configure AWS Amplify:<\/strong><\/p>\n\n\n\n\n- Go to the terminal and use the following command to install Amplify CLI:<\/li>\n<\/ol>\n\n\n
npm<\/span> install<\/span> -g<\/span> @aws-amplify<\/span>\/cli<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n- Use the following command to configure AWS Amplify for this demo:<\/li>\n<\/ol>\n\n\n
amplify configure<\/code><\/span><\/pre>\n\n\nThe terminal will ask for the preferred AWS region and the username for a new IAM user. <\/p>\n\n\n\n
\n- Head to the AWS Console to complete the IAM user creation process through the Add User <\/strong>option. Copy down the Access Key ID<\/strong> and Secret Access Key<\/strong> once the user is created.<\/li>\n<\/ol>\n\n\n\n
\n- When the prompt asks, put in Access Key ID and Secret Access Key.<\/li>\n<\/ol>\n\n\n\n
Set up the Angular App and Its AWS Amplify Backend<\/h4>\n\n\n\n
To create a demo Angular app:<\/strong><\/p>\n\n\n\n\n- Use the following command to bootstrap a new Angular app in Amplify CLI and go to the main directory:<\/li>\n<\/ol>\n\n\n
npx -p @angular\/cli ng new<\/span> amplify-app\ncd amplify-app\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWhen prompted, type Y to the question about adding Angular routing.<\/p>\n\n\n\n
\n- This tutorial creates an Angular demo app that stores a to-do list of tasks. Add the following module imports and declarations for the Angular app in src\/app\/app.module.ts:<\/li>\n<\/ol>\n\n\n
import<\/span> { BrowserModule } from<\/span> '@angular\/platform-browser'<\/span>;\nimport<\/span> { NgModule } from<\/span> '@angular\/core'<\/span>;\nimport<\/span> { AmplifyUIAngularModule } from<\/span> '@aws-amplify\/ui-angular'<\/span>;\n\nimport<\/span> { FormsModule, ReactiveFormsModule } from<\/span> '@angular\/forms'<\/span>;\n\nimport<\/span> { AppRoutingModule } from<\/span> '.\/app-routing.module'<\/span>;\nimport<\/span> { DemoAppComponent } from<\/span> '.\/app.component'<\/span>;\n\n@NgModule({\n declarations<\/span>: [DemoAppComponent],\n imports<\/span>: [\n BrowserModule,\n AppRoutingModule,\n AmplifyUIAngularModule,\n FormsModule,\n ReactiveFormsModule\n ],\n providers<\/span>: [],\n bootstrap<\/span>: [DemoAppComponent]\n})\nexport<\/span> class<\/span> DemoAppModule<\/span> <\/span>{}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n- Add the following Amplify imports for the Angular app in src\/main.ts:<\/li>\n<\/ol>\n\n\n
import<\/span> { Amplify } from<\/span> 'aws-amplify'<\/span>;\nimport<\/span> aws_exports from<\/span> '.\/aws-exports'<\/span>;\nAmplify.configure(aws_exports);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n- Add the following Amplify imports for the Angular app in tsconfig.app.json:<\/li>\n<\/ol>\n\n\n
\"compilerOptions\"<\/span>: {\n \"types\"<\/span> : [\"node\"<\/span>]\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n 5. Add the following code for the demo Angular app\u2019s functionality to
<\/p>\n\n\n
src\/app\/app.component.ts:\n\nimport<\/span> { Component, OnInit, OnDestroy } from<\/span> \"@angular\/core\"<\/span>;\nimport<\/span> { FormBuilder, FormGroup, Validators } from<\/span> \"@angular\/forms\"<\/span>;\nimport<\/span> { APIService, Task } from<\/span> \".\/API.service\"<\/span>;\n\n@Component({\n selector<\/span>: \"demo-app-root\"<\/span>,\n templateUrl<\/span>: \".\/app.component.html\"<\/span>,\n styleUrls<\/span>: [\".\/app.component.css\"<\/span>],\n})\nexport<\/span> class<\/span> DemoAppComponent<\/span> implements<\/span> OnInit<\/span>, OnDestroy<\/span> <\/span>{\n title = \"demo-angular\u2013amplify-app\"<\/span>;\n public createForm: FormGroup;\n\n public tasks: Array<\/span><Task> = [];\n\n ngOnDestroy() {\n if<\/span> (this<\/span>.subscription) {\n this<\/span>.subscription.unsubscribe();\n }\n this<\/span>.subscription = null<\/span>;\n }\n\n constructor<\/span>(private api: APIService, private fb: FormBuilder) {\n this<\/span>.createForm = this<\/span>.fb.group({\n taskName<\/span>: [\"\"<\/span>, Validators.required],\n });\n }\n\n private appSubscription: Subscription | null<\/span> = null<\/span>;\n\n async<\/span> ngOnInit() {\n this<\/span>.api.ListTasks().then((event<\/span>) =><\/span> {\n this<\/span>.tasks = event.items;\n });\n\n this<\/span>.appSubscription = <Subscription<\/span>><\/span>(\n this.api.OnCreateTaskListener.subscribe((event: any) => {\n const newTask = event.value.data.onCreateTask;\n this.tasks = [newTask, ...this.tasks];\n })\n );\n }\n\n public onCreate(task: Task) {\n this.api\n .CreateTask(task)\n .then((event) => {\n console.log(\"task created!\");\n this.createForm.reset();\n })\n .catch((e) => {\n console.log(\"error creating task...\", e);\n });\n }\n}\n<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n6. Add the following HTML code for the frontend in the src\/app\/app.component.html file:<\/p>\n\n\n
<div class<\/span><\/span>=\"form-body\"<\/span>>\n\t<form<\/span> autocomplete<\/span>=\"off\"<\/span> [formGroup<\/span>]=\"createForm\"<\/span> (ngSubmit<\/span>)=\"onCreateTask(createForm.value)\"<\/span>><\/span>\n\t\t<div<\/span>><\/span>\n\t\t\t<label<\/span>><\/span>Task Name: <\/label<\/span>><\/span>\n\t\t\t<input<\/span> type<\/span>=\"text\"<\/span> formControlName<\/span>=\"name\"<\/span> autocomplete<\/span>=\"off\"<\/span> \/><\/span> <\/div<\/span>><\/span>\n\t\t<div<\/span>><\/span>\n\t<\/form<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n<div<\/span> *ngFor<\/span>=\"let task of tasks\"<\/span>><\/span>\n\t<div<\/span>><\/span>{{ task.name }}<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nTo create a backend on AWS Amplify for the demo Angular app:<\/strong><\/p>\n\n\n\n\n- From the root directory, put in the following command and initialize Amplify:<\/li>\n<\/ol>\n\n\n