New post
Article
· Apr 21, 2017 3m read

Let's write an Angular 1.x app with a Caché REST backend - start here

#Best Practices #Caché #Angular #JSON #REST API #Frontend #CSP

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:

ArticleLink
Part 1- Setup and Hello Worldhttps://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 JSONhttps://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-repeathttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-3
Part 4 - Apply the UIhttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-4
Part 5 - Manipulating our Widgetshttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-5
Part 6 - Returning Persistent Datahttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-6
Part 7 - Things are going to Breakhttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-7
Part 8 - Bonus Breakagehttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-8
Part 9 - Let's get CRUDdyhttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-9
Part 10 - Getting Credit for EDIThttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-10
Part 11 - Reforming our formhttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-11
Part 12 - WWWidgetshttps://community.intersystems.com/post/lets-write-angular-1x-app-cach%C3%A9-rest-backend-part-12
Part 13 - To Create a Widgethttps://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

Discussion (11)4
Log in or sign up to continue
Chris Stewart · May 5, 2017

HI Jennifer

I started building my application quite some time ago (over a year ago), so Angular 1.x was the best choice at the time with the support of the Material UI platform, and I didn't want to have to start again since the new version of Angular isn't compatible with the old syntax, or easy to migrate to.  However, one of the nice things about structuring the application with REST is that it is pretty straightforward to bolt a new front end, or even run a new one side by side with the old one.

0 0
Chris Stewart · Jun 28, 2017

I don't think this is a great idea, to mix the technologies, as both will try to manipulate the DOM, and you would likely see strange behaviour

If you are migrating the application in a modular fashion, I've found it's best to keep the functionality seperate, and tune the navigation to switch between the appropriate technologies and migrate the existing pages as you go.  The only thing to be careful about is your %session state if you do this (I've barely used %session on my Angular code, and instead try to write everything to work in a stateless fashion)

0 0
Simcha Gershon · Jul 24, 2017

Hi Chris

You made a wonderful work, I'm enjoying studying it, thanks.

I have a problem I reach the level of inserting 'ngMaterial' into my JS code.

When doing it my page looks like it can't load the js (just the html & css appears) , even when I deleted -  module('WidgetsDirect',['']) , it still doesn't work.

I had to delete the csp & js , when writing it again worked again until I inserted the ngMaterial.

As I'm a novice to all this stuff (JS Angular etc. ) I would appreciate your help, thanks.

 

I can't attach the snap shots in this frame so could see, if it's possible can you send me your email so I'll be able to attach those snap shots.

Thanks Simcha

0 0