#Angular

The Widgets Direct sample application highlights many aspects of how to use InterSystems technologies to build a modern web application.  Features include:

• Angular Material + AngularJS + JSON + REST based interactive application with Step by Step instructions on how it was built
• Example scripts for server-side source control configuration with Perforce
• %UnitTest logic for automated regression testing
• %Installer class for automated instance installation from source control 
• Scripts for Continuous Integration (CI) with Jenkins
• Docker Manifest for automated provisioning of an instance

We

Hi guys,

I'm curious about the development processes of those of you using Angular. 

The starting point is that, somewhere, there lives an Angular project full of (mostly) typescript files.  Eventually, those files need to be built, and the resulting built files served up to a browser.

Given that, let's say I want to go change one of the typescript files. What are some clean ways to, during development, see that change reflected on the active webpage in the development environment.

Users of analytical applications often need to generate and send out PDF reports comprised of elements of the analytical panel. In the InterSystems stack, this task is solved using the DSW Reports project that is an extension of DeepSeeWeb. In this article, we will explain how to use DSW Reports for generating PDF reports and emailing them.

Hi, 

    private _loginUrl =

or "Bonus Breakage"

In our last lesson, we added a relationship between 2 persistent classes.  We are clearly going to need to start creating REST Services to expose CRUD operations for each of these classes, but before we do that, we should really finish defining our linkages.  We added code to our Widget toJSON to spool off related Accessory data, so we should really do the reciprocal and allow Accessories to return all Widgets that are compatible.

The code we can use is essentially the same as we used on the Widget side.

Hi, Community!

I’m sure you are using Developer Community analytics built with InterSystems Analytics technology DeepSee:

You can find DC analytics n InterSystems->Analytics menu.

DC Analytics shows interactive dashboards on key figures of DC entities: Posts, Comments, and Members. 

Since the last week, this analytics project is available for everyone with source code and data on DC Github!

or "Didn't you say you would cover Persistent Objects in Part 5, Chris?"

Yes, that was the plan.  This is a pretty important topic, so it get's its own Article

Up until now, we've display widget JSON that has been created by a basic loop.  Clearly this isn't of much value.  Now we have our stack connected together, and we can see that the data is flowing to the Welcome page, it's time to complete the stack and start feeding our service from "real" data.

Let's start with our (very basic) Persistent class for Widgets. We have 4 properties to hold Name, Description, Price and current Quantity.

To the moderators.....

Can you add ANGULAR2 as a tag for posts please

Peter

In our last lesson, we implemented a new REST Service to allow us to perform CRU operations on Widgets, and refactored our Controllers to allow the page setup to be decouple from the content.

When we created our Widget Services, we did not implement a Deletion operation, which the HTTP Delete verb provides. As this is a base table for other parts of the Widgets Direct empire, we don't want to be able to do a hard Delete of the WIdget values, as this could cause issues with our ordering and billing modules.

Hi, Community! 

This is the 3rd part of DeepSee Web story - Angular base UI for DeepSee Dashboards, see the beginning here.

​

By design, DSW provides an implementation for every widget in DeepSee library. But there are some extra features in DSW which make solutions built with DSW dashboards more functional.  This article describes it.

Hi All,

Does anybody has experience with Angular application and have implemented some solution in order to track and record pageviews?

We are interested in to know how to capture those pageviews information and call a Caché REST Api in order to store those data.

Thanks.

Hello, evrybody, I'm writing one project using CSP("OnPreHTTP"), and also REST angular. At the beginning I wrote purely on csp, then I decided to use angular for the flexibility of the client part. Now I can not design logging, I created a table App.Log with properties

/// Type of eventProperty EventType As %String(MAXLEN = 10, VALUELIST = ",NONE,FATAL,ERROR,WARN,INFO,STAT,DEBUG,RAW") [ InitialExpression = "INFO" ];/// Name of class, where event happenedProperty ClassName As %String(MAXLEN = 256);/// Name of method, where event happenedProperty MethodName As %String(MAXLEN = 128);

Hi Community! 

Check a new  session recording from Global Summit 2017:

Angular, JSON, and REST – Oh My!

Hi everyone! My company has a Zen ERP application with CSP delegated authentication. Now, we're developing a separated BI application, using Angular, which consumes DeepSee REST API services. Both applications access the same Caché database.

How to implement single sign-on strategy in order to allow an already authenticated ERP user to access DeepSee REST services? Has anyone already implemented something like that?

Thanks in advanced.

Hi, 

I am a beginner on intersystems technologies ! and i want implements Oauth2 for our projects ( Angular 2 + Caché REST  Backend). 

i read the article that the link  is below : 

https://community.intersystems.com/post/cach%C3%A9-open-authorization-framework-oauth-20-implementation-part-1

But : i need to create  all servers ( Auth and Resource ) on Caché and dont' to use google server.

Also, i need   to be able to consume Oauth from my web services as caché REST application (whitout csp ui) .

An Idea  Please ?

Thank you

Yani

a.k.a..  "The World of Widgets Returns!" or "Paternity leave damages Instructional Series momentum"

In our last lesson, we combined 2 separate classes to appear as the same property.  We now have the ability to Update our Widget catalog, but what if we want to Create a Widget?  Thankfully, we've already done 90% of what we need, just by implementing Edits

As we mentioned when creating the REST Services for PUT and POST, the only real difference between creating and updating a record is whether we are passing in an existing ID or creating a %New record.

Hi All,

We have a application currently running on Zen framework, now business wants to use Angular JS as their front-end technology for any future release but they don't want to upgrade the existing the modules which are already there in Zen (as of now).

Hi Every Body

I'm studying AngularJS now ( looking for a substitute for my zen-mojo application ) , I would like to understand how can I connect from the client (AngularJS) with the server , passing data & invoking methods server side.

In our last lesson, we implemented a linkage to our WidgetAccessory class, and debugged some errors we encountered along the way.  We now have our data being returned by REST, but what if we want to update or add new data to our application?  

So far we have only used HTTP GET commands with our REST Services, we now have to implement PUT (which roughly corresponds to an Update) and a POST (which roughly corresponds to a Create.  Author's note: there is a lot of writing online about why this statement isn't entirely correct, I'm not going to go into the detail here).  However, before we start,

or "Things are going to break"

We left our application over the weekend, secure in the knowledge that it was returning data from our primary persistent class, User.Widget.  However, Widgets Direct are the premier supplier of both Widgets AND Widget Accessories, so we should really start working on adding these Accessories to our application. 

We should do some housekeeping first though. Our Page Controlller code is currently sitting in the widgetmaster.js file.

How to use front end angular js and back end cache.If It is possible and how to connect it.

In our last lesson, we added some formatting and validation to our Edit Widget form.  So, now we are ready to add the ability to add new Widgets to our application.  However, the great Widget Wars have come to an abrupt end, as Widget Direct has purchased its biggest competitor, WorldWideWidgets.  In order to maintain some continuity, we need to display their catalog on our new application.

So, we have good news and bad news.

In our last lesson, we added a form to Edit our existing Widgets, and save them back to the server.  However, our Form was not well structured and our Save button had no intelligence, and was not fully visible.  So today, we will apply some Material components and Angular style to make the form more useful

Let's open EditWidget.csp, and make some changes. First, we want to change the component from an md-card to an md-dialog.

We finished our last lesson with our Widgets Direct page iterating over a list of widgets, displaying an ID and a Name value. While we have been able to achieve this with only a small amount of coding, the page itself is not the most visually appealing place to be. The AngularJS framework is providing a powerful Model-View-Controller framework for our structure and logic, but it does not implement anything that will provide a nice UI experience. For that we need to implement a UI toolkit.

We are building a bunch of rest based services using Ens 2016.2 to serve our browser based application (Angular 4).

Two questions:

1. The initial authentication seems only work if credentials are placed in the url parameters.  Trying to use the Authorization header instead, the client code immediately complains about Access-Control-Allow-Origin. How can I resolve this?

2. After initial authentication, what is the proper way to send subsequent rest calls without having to include credential every time?

I have Parameter UseSession As Integer = 1 in my service class, but what else do I need to do?

t

At the end of our last lesson, we ended with our page displaying a nice (but garish) Angular Material Toolbar, and our Widget data displaying in a list of Material cards.  Our page feels a bit static, and we already know that the large number of Widgets that we will be dealing with will not be especially usable on a static list.  What can we do to help?

A filtering function would be very helpful, so let's add a text input to the top of the page.We will bind this to a variable in the $scope - widgetFilterText so that Angular has access to the value we type in.

We finished our last lesson with our Widgets Direct page receiving a Welcome message as a property of a JSON object, which was unpacked and displayed on the page. However, we are on Lesson 3, and we still haven't had any talk of displaying widgets yet.  

Let's change that.  Widgets Direct are a leader in widget and widget accessories, so we clearly have numerous items to display.   To transfer this, we will need to declare and return our first array.  Let's go back to our REST.Dispatch class, and add this data to our Service.

Adding an array is simple, but we need to set up some temporary

If you had to choose Angular 1 or 2 for a new web project using Caché/Ensemble as a backend, Which one would you choose?
I'm trying to figure this out with a short pros/cons list:

I'm currently re-engineering an application from CSP pages directly accessing COS Methods, to an Angular/Material front end accessing a REST DAL.  Both the Angular front end and REST services are hosted from the same Caché instance and the same namespace, but the REST services have their own CSP application, with all calls being routed through a Dispatch class.  

I've come across an architecture issue recently, and am trying to assess the options I have. At present, we encode a call to a class which takes in an OID and returns the Stream to the browser.

Hi all (and specifically Eduard L. ;)

The Ensemble Workflow REST API provided here:

https://github.com/intersystems-ru/EnsembleWorkflow

(and mentioned before in this Community, also as the basis of the Angular UI, also available in the same Git) 

Has some very basic documentation as to how to work with the API (which also seems to be possibly a little out-dated as I think the /login URL is deprecated, for example).

Is there somewhere a more comprehensive documentation of this API?

Some of the API calls are quite simple and straightforward but others [specifically POST /tasks/:id] require in-depth