Let's write an Angular 1.x app with a Caché REST backend - start here
Tags: fronted, beginners, tutorial, angular
Published: 2022-05-15 17:18:02

So, one day you're working away at WidgetsDirect, the leading supplier of widget and widget accessories, when your boss asks you to develop the new customer facing portal to allow the client base to access the next generation of Widgets..... and he wants you to use Angular 1.x to read into the department's Caché server.   

There's only one problem:  You've never used Angular, and don't know how to make it talk to Caché.

This guide is going to walk through the process of setting up a full Angular stack which communicates with a Caché backend using JSON over REST.  

* * *

This is a parent page for the multipart series on creating a Material-Angular1x-REST-JSON-Caché application.  The current list of articles is:

| Article                                                                                                                     | Link                                                                                                   |
| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Part 1- Setup and Hello World                                                                                               | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-1-many  |
| Part 2 - "So you just got yelled at by your boss, for sending him an unformatted Hello World webpage"  or Working with JSON | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-2       |
| Part 3 - Let's Iterate with Arrays and ng-repeat                                                                            | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-3       |
| Part 4 - Apply the UI                                                                                                       | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-4       |
| Part 5 - Manipulating our Widgets                                                                                           | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-5       |
| Part 6 - Returning Persistent Data                                                                                          | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-6       |
| Part 7 - Things are going to Break                                                                                          | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-7       |
| Part 8 - Bonus Breakage                                                                                                     | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-8       |
| Part 9 - Let's get CRUDdy                                                                                                   | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-9       |
| Part 10 - Getting Credit for EDIT                                                                                           | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-10      |
| Part 11 - Reforming our form                                                                                                | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-11      |
| Part 12 - WWWidgets                                                                                                         | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-12      |
| Part 13 - To Create a Widget                                                                                                | https://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-13      |

* * *

Prerequisites

  * These examples are using Caché 2016.2 which implemented a new syntax for dealing with JSON content.  There was preliminary JSON support in Caché 2016.1 but the syntax is different and incompatible with later versions.  The code for these examples have been written in a way to allow them to be easily adapted to 2016.1 syntax, as none of the extended JSON handling has been used
      * While there is a degree of REST and JSON support in earlier versions, I would strongly recommend 2016.1 as a minimum requirement
  * This will not be an indepth Angular tutorial.  There are many excellent Angular Fundamentals courses available online for free and these are mentioned in Parts 1 and 2.  

* * *

Links

  * The code used in these examples will be posted up to Github soon after the article is publised.  You can access this from <https://github.com/iscChris/CacheRESTStack>