Angular

Syndicate content 6 

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.  For something like a .cls or .csp file, after you save and compile a changed file in Studio/Atelier, the IDE handles that entire build process for you, and from the developer's perspective it's just: compile, reload the webpage, and your changes are there

Last answer 10 April 2019 Last comment 5 days ago
+ 3   1 5
127

views

+ 3

rating

This article is translation of one from Habrahabr InterSystems blog (Russian).
The original post can be found here: https://habrahabr.ru/company/intersystems/blog/251611/
 

Everyone familiar with InterSystems Ensemble, an integration and application development platform, knows what the Ensemble Workflow subsystem is and how useful it can be for automating human interaction. For those who don’t know Ensemble (and/or Workflow), I will briefly describe its capabilities (others may skip this part and learn how they can use the Workflow interface in Angular.js)

Last comment 10 April 2019
+ 5   0 2
1585

views

+ 5

rating

There are several options how to deliver user interface(UI) for DeepSee BI solutions. The most common approaches are:

  • use native DeepSee Dashboards, get web UI in Zen and deliver it in your web apps.

  • use DeepSee REST API, get and build your own UI widgets and dashboards.

The 1st approach is good because of the possibility to build BI dashboards without coding relatively fast, but you are limited with preset widgets library which is expandable but with a lot of development efforts.

The 2nd provides you the way to use any comprehensive js framework (D3, Highcharts, etc) to visualize your DeepSee data, but you need to code widgets and dashboards on your own.

Today I want to tell you about yet another approach which combines both listed above and provides Angular based web UI for DeepSee Dashboards -  DeepSee Web library.

Last comment 8 January 2019
+ 2   2 7
793

views

+ 2

rating

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

Last comment 13 December 2018
+ 16   3 10
3166

views

+ 16

rating

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.

+ 1   1 3
0

comments

142

views

+ 1

rating

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.  We will iterate over the bridging class and return the toJSON of all referenced widgets.  We are definitely sure we have a toJSON for the Widget class, so we shouldn't be expecting any errors.  We add the code to WidgetAccessory and compile, before loading our service in the REST debugger to make sure everything is spooling OK

Last comment 24 September 2018
+ 3   1 2
462

views

+ 3

rating

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!

Last comment 6 August 2018
+ 2   1 1
196

views

+ 2

rating

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.  We would like to expose all of these on our page.

Last comment 4 July 2018
+ 2   0 3
714

views

+ 2

rating

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.  

Part 1 - Setup

To start fresh, we will create a Namespace for our new application - WIDGETDIRECT, and set this up with Code and Data databases, and appropriate Security roles.  

Our next step is to set up 2 Applications to serve web content; one for the Angular web content and one to serve the REST conten

Last comment 3 July 2018
+ 14   0 6
2348

views

+ 14

rating

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.  So, we will add a "Deleted" property to the class, and have the Delete operation set this Boolean flag instead.  We will adjust our GetAllWidgets method to ignore any records which are marked as "Deleted"

REST.Widget

Last comment 2 March 2018
+ 3   0 6
513

views

+ 3

rating

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.

+ 2   1 1
0

comments

262

views

+ 2

rating

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.

Last answer 7 February 2018 Last comment 9 February 2018
0   0 4
199

views

0

rating

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 propertie

Last answer 6 November 2017 Last comment 7 November 2017
0   0 1
248

views

0

rating

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 will be adding articles which discuss the above list of features to drill down in more detail on each topic (feel free to  comment if there is something you want to see done sooner rather than later)

Last comment 23 October 2017
+ 5   0 6
817

views

+ 5

rating

Hi, Community! 

Check a new  session recording from Global Summit 2017:

Angular, JSON, and REST – Oh My!

 

0   0 1
0

comments

298

views

0

rating

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.

Last answer 10 October 2017 Last comment 11 October 2017
0   0 3
277

views

0

rating

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

Last comment 26 September 2017
0   0 4
0

answers

410

views

0

rating

Hi, Community!

Please welcome the first session recording from Global Summit 2017:

Building Modern Web Applications

 

+ 2   0 2
0

comments

185

views

+ 2

rating

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.  The actual content of the Widget JSON is exactly the same, so this allows us to be a little lazy and reuse the form and controller code we have previously written, with just some minor edits to allow it to work for New Widget

0   0 1
0

comments

333

views

0

rating

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).

Last answer 25 July 2017 Last comment 27 June 2017
0   0 1
245

views

0

rating

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.  As we start to build up our application and use multiple controllers, this will make the PageController hard to find, so we should refactor it into a sensible location and file name.  So let's create modules/page/PageController.js under our web application, and paste the code in there.  We can then remove the controller code from widgetmaster.j

Last comment 5 June 2017
+ 2   0 0
577

views

+ 2

rating

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.  The good news is at that WorldWideWidgets also use Caché, but the bad news is that their Widget table has different properties with different names than our Widget class, and we need to keep the catalogs seperate for the time being.  WorldWideWidgets don't have a WidgetAccessory catalog (and they wonder why they lost the Widget War), so we don't need to worry about Accessories for no

+ 2   0 2
0

comments

307

views

+ 2

rating

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 then want to wrap the content in a div so we can set the layout to "column" so the controls display in a vertical list, and also a Form which enables Angular to verify the state of the form

+ 2   0 4
0

comments

306

views

+ 2

rating

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 have numerous options here; the leading toolkits are BootStrap from Twitter and Angular Material from Google.  There are advantages and drawbacks to each choice.  It is well worth exploring demos of each toolkit to see which would fit your need

Last comment 25 April 2017
+ 6   0 5
752

views

+ 6

rating