I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
Related
I am a ServiceNOW Developer. Recently, ServiceNOW replaced their Jelly based Content Management System with an AngularJS based Service Portal. This interface uses AngularJS widgets for display and data manipulation including the ability to create custom widgets. However, the fulfiller interface is still Jelly based.
ServiceNOW has constructs called UI Macros and UI Scripts that can be used within the Jelly interface to develop UI modules for which OOTB constructs are unavialable, like the widgets in the Service Portal. I tried to create an AngularJS based UI Macro that referencess the AngularJS App/Controller through an include of the UI Script that contains them. I created a mirror widget for the Service Portal that uses, essentially, the same AngularJS App/Controller.
The widget works beautifully in the Service Portal. The UI Macro works beautifully in the Service Catalog view. However, when the same UI Macro is included in a fulfillment record, it no longer functions correctly. The console logs indicate that there is a Controller conflict.
I am guessing that where ServiceNOW is inserting my UI Macro is in the middle of another AngularJS Application for which there is no expectation of another AngularJS application, only Jelly.
Therefore, my question is, is there a way to encapsulate my AngularJS Application/Controller in such a way that it will function completely on its own or if it is inserted into some other AngularJS Application/Controller i.e. that it is truly bulletproof and independent of what may be around it?
FYI: The results of a ServiceNOW HI Incident regarding this issue was that UI Macros should only be Jelly. However, the idea of having to maintain two completely different technologies for the same thing is not appealing. Therefore I am exploring all possibilities.
Thank you in advance.
Respectfully,
Robert
One option which is common in servicenow is making use of <iframe> HTML elements, it gives you the ability to have a separate page with a separate scope and a separate JS window object (will not conflict with the internal angular app)
You can encapsulate every thing in a UI page, consider it your Angular JS app main file and you can refer to this UI page like below:
<iframe src='https://<YOUR_INSTANCE>.service-now.com/<YOUR_UI_PAGE_NAME>.do'></iframe>
How do I create a popup Angular 1.6 component that accepts several parameters and will be used in several pages. One of the parameters will be dynamic -- set in the ng-click that opens the popup.
The popup scope should be a child scope of the calling page (not isolate), and it should have outputs back to the calling page.
Anyone know of a good pattern for that?
It mainly depends on what front-end framework are you using: if you go for Bootstrap than search for Bootstrap's Modal; if you are using Angular Material than it's called Dialog.
And in terms of how to set up the logic for it, well, there are quite a variety of options here as well. The simplest one I can think of would be to:
bind any variables from the popup using ng-model AND
pass it to a service and have custom logic OR in $rootScope OR in Location
This would be just a simple exammple.
Again, I think it mainly depends on what you actually want to achieve, which is not quite clear. I hope this helps.
I am trying to build an angular app on SharePoint (this question is not related to SharePoint though).
I have a page where which has a div that has angular app directive (Its a form with bunch of text boxes). The page has other components on it, which reside outside the ngapp like Ribbon control and I specifically do not have control on it.
Typically if its a jquery app, I would write document.ready function and add my custom components to the ribbon using SharePoint javascript api and wireup any events required like Save, cancel.
I would like to accomplish similar using angularjs if possible. The problem is since they reside outside ngapp I do not understand how to initialize and wire up events.
In specific I would like to know how to accomplish below.
a) Initialize ribbon buttons, which reside outside ngapp. I do not have control on specifics of html. I can only tell api to add a button on ready. In short I would like to call some code when dom is ready to initialize some UI controls that reside outside of ngapp.
b) When user clicks on that button, I would like my app to react to it.
I would like to know if its possible.
Ex:
<body>
<div>
//some area I do not have direct control over but would like to
//initialize and react to events in angular
</div>
<div ng-app="myApp">
</div>
Ok first things first.
1 initialize your ribons buttons the same way you would do it w/o the angular app, use jquery if you want, jquery and angular play well together, so no harm there
except in the buttons events add this peace of code
if using jquery
var rootScope=angular.element($('[ng-app]')[0]).scope()
this will give you the rootScope of your app and once there if you want to pass values to your app you can either attach the values to the rootScope or use
rootScope.$broadcast()
to broadcast events in any case always remember to use
rootScope.$apply()
otherwise angular will not be aware of the changes immediately.
there are other ways, using the app injector to get hold on a service or a value and make your update there,
you can also set localStorage values and have angular to watch those values. but the firs approach is the most straigt forward
I'm generating a dynamic number of Google Charts tables after receiving the content through an ajax request and I wanted to apply an accordion effect on them. I wanted to know if I could do that with directives (since if I just code render the angular tags they won't get interpreted).
I don't need a code example, just a short answer to see if I should learn directives or if I should do it in a different way (I was thinking routeParams).
Thanks!
A directive is an equivalent of a jquery plugin, it should be use when you want to create a widget which manages some user interactions or a specific templating.
In your case it's a great idea, the directive could call a service which shall return the server datas and could manage all user interactions like open and close the accordion.
Before all, think about reusability.
I've started to learn AngularJS but I need some application design hints. Of course I'm not asking about the layout but ... how to design my application and it's controllers in a proper way. I have left sidebar with a menu that is loaded from the web using JSON. That needs a controller. That's fine. It works for me. There's a content box as well in a center of my page that loads some data dynamically. In my opinion it requires another controller.
And now comes my solution, that somehow doesn't look good IMHO. When I click a menu item in my sidebar I'm loading a content. Then I'm passing this data into a Service which emits an Event afterwards to the Second controller (which is responsible for controlling my content in a center of my page). When it receives this event it simply gets previously loaded data from the Service and displays it. It generally works.... but ... I'm pretty sure that's not the proper way of doing this.
I would be grateful for any hints. AngularJS has a really poor documentation and tutorial :(
cheers
EDIT:
OK. That's my basic application using JQuery:
http://greatanubis-motoscore.rhcloud.com/index
And that's the same application I'm converting into AngularJS:
http://greatanubis-motoscore.rhcloud.com/angular/index
No worries, some text is in Polish but... I think it really doesn't matter ;)
Note for the AngularJS version: At the moment the content is a HTML but finally it will load JSON data as the other controllers.
I would go about doing this with angular ui-router. With ui-router you can achieve this in a couple of ways. You can use nested routing to have a base state (Your sidebar menu, header etc.) which will act as your shell page, this can have its own controller as well. You could then define each of those other views as child states of the base state. These child states can also have their own controller/views as well, but they will be sitting inside the base state (both visually, and also inherit $scope properties of the base state) optionally they can have separated URLs themselves, but they don't have to, you can just change states without changing the url, by leaving the URL bit empty when you define different states in your $stateProvider configs. Another way would be to use the multiple named views feature.