going beyond basics
To make it easier for people to understand what I am trying to do I made a simple plunker with a few components namely; cList, cListItem, cAddItem, cEditItem, cPanel.
The Controller passes an array of items (that it magically received from our data store) to cList component, which in turn renders each item.
Add New Item button supposed to initialise cPanel component when clicked and destroy? itself when the panel is closed or new item is created successfully.
Each item has an edit button which will initialise a panel with the item to edit. And just like Add New Item it should destroy itself when the panel is closed or item is updated successfully.
Simple CRUD, nothing fancy.
problems
I don't quite understand how I should invoke the panels in the first place.
If panels should be invoked from the Controller.
If it is possible to initialise and destroy panels on the fly.
If I should break cAddItem and cEditItem into separate modules instead (make it easier to handle display of panels?).
If my implementation of cPanel component qualifies it as a reusable component.
Could you help me develop my example to a working prototype, please?
resources
Angular Components
Components by Todd Motto
$onInit and require by Todd Motto
ps
I am using AngularJS 1.5.8
Related
I'm having a list of a playlist using mat-card and I'm getting my data from an array list inside my PlaylistComponent
What I'm trying to do is to add another playlist that's why I added a new playlist button that will display a dialog
I've added a playlist service that contained my form group.
My problem is that I'm new and I got lost with the architecture of the program.
do I have to use two-way binding or do I have to find a way to implement it in my dialog component
if someone is familiar with this technique please give me an insight.
Your question is asking a lot and you don't give the underlying code so I am going to give an outline and point you to the documentation to follow for your specific implementation.
Basically you take the data from the form and pass it in mat-dialog-close. When you open the dialog from your playlist component you also subscribe to the afterClosed of the dialog. In this subscribe, you will get the data back from the mat-dialog-close. You then can push that data into your existing array.
The first example of mat-dialog in the documentation handles a form and returning the data Dialog | Angular Material
I am using custom Directive's approach in AngularJS for making dashboard with widgets and for widgets m using angular-gridster
(https://github.com/ManifestWebDesign/angular-gridster).
Requirements:
On right side menu created by custom directive is present.and for routing purpose UI Router in used.
1-I need to open a dashboard firstly empty.
2-when click to Menu1 one widget is opened with data from state menu1 and same for Menu2
3-when 2nd option is clicked another widget added to dashboard without affecting previously opened one and so on.
4-all the widgets have independent data.and navigation in each widget is according to the respective menu.
WorkFlow:
1-empty dashboard is opened via custom directive.
2-widgets are added by providing click event to menu1 and menu2.which will broadcast event.and against that click event a widget is added to widgets array holding information about that widget.
Problem:
problem is routing basically.till now there is no routing involved.info is passed by broadcasting a click event.and by this i have achieved this coloured area.
but the further navigation creates problem.when a state changes by clicking Menu1 or Menu2 it affects both the widgets and and ui-view portion in both widgets show same data.if Menu1 is clicked both widgets show data from Menu1 and vice versa.
Now.i have tried enough solutions but here i want an idea from ui router experts or custom directives' experts.cz i hv tried many possible ways and stuck here for almost a week.
Thanx very very much if anyone can help.
What is the best way to switch to a different view when user navigates to a different url. In angular there is ng-view that takes care of this and inserts corresponding templates and in ember its all route based.
Is it better to just hide other views elements on routing using css or destroying other views and inserting current view?
EDIT
It would be great if someone could give an example how to re-render the view on navigating back to it again and restoring its previous state.
Eg.
if you have a check-box in a view that user can select to add some item to the cart , but in the middle he/she moves to some other url and then comes back, that check-box should be checked.
I would have a main content view with subviews and call remove on it, which is responsible for cleaning up any subviews too (calling remove on them first and going up the hierarchy tree). The concept of subviews doesn't come for free with backbone but isn't hard to implement. And finally attach a new content view.
This ensures you can cleanup and the browser is using a consistent amount of resources.
I would abstract this into some kind of layout view which has a content subview and a function like setContent(view) which handles the remove of any existing content view and the attach of the new one.
Personally I would have a router with sub routers in modules, e.g. a main router which finds a route starting with "checkout" and passes it over to a sub router in the checkout module which is responsible for attaching a new content view.
In Backbone the implementation is up to you which is both good and bad, depending on how nice you do it ;)
Always remove the view as opposed to just hiding it. If you don't remove (and unbind) your views properly, all bindings, handlers and references to models/DOM elements will linger around.
Depending on the size of your app, you can have a module that handles layouts (as suggested by dominic-tobias), or have a method on the router that takes care of this for you. At its most basic, this method (let's call it _switchView) takes a view and holds onto an instance of the currentView. Upon view change, it removes the current view, sets the new view to the current view and then renders it to the DOM.
Something like this:
_switchView(view) {
this.currentView && this.currentView.remove();
this.currentView = view;
this.$rootEl.html(view.render().$el);
}
I’m very impressed with Josh's answer about ‘angular way’ and declarative style in client-side.
But can you help me to understand, how to do that:
I have a single-page app with the menubar in the left side, and div container on the right-side.
When user clicking the menu item in the left menubar, on the right side I must to open the new tab with some grid,like this:
In angular I realized the <grid> directive.
When user click menuitem, I must add dynamically this grid directive with params on the right side.
What is the angular way for doing this functionality?
Update:
I found article about dynamic tabs, and this is example how I use it in my case
Since you asked a general question, let me give you a general answer. It should be helpful :)
AngularJS is model/data driven, and if you want to make any change to the UI, the first thing you may think is how to achieve it by changing data. Given this idea, we can implement it like this:
Define a ng-repeater, which should render tabs for a list of Tab objects called MyTabs, for instance.
When you want to add a new tab, then create a tab object and add/push it to MyTabs.
AngularJS will magically render it on the UI, thanks to the 2-way data binding.
I need to build a dialog to be used with any item on a list of items. The dialog is pretty much the same regardless of the item except for the values of the fields which are obviously item dependent.
The directive I am building is reading the template from a file, compiles it with $compile and then binds (links) it to the scope of the item. The result of the binding is a DOM tree. To make the dialog visible I need to append this tree to some element in the existing DOM. The nature of my dialog is such that it makes sense to append it directly to the body tag. The dialog will be used many times in combination with different items on the list
So here is my question: How much of this process (compile, bind, append) can be done in advance? I certainly can run compile once. I can also bind the compilation result to the $rootscope and append (hidden) it to the body tag. This way I can later just turn on visibility and show the dialog.
But if it is already bound and attached to DOM, is it kosher to re-bind it to some other scope, if so - what's the right way to do it? Another question is is it even worth it? might be just re-insert it every time it is needed?
If you're only ever going to display one dialog like that at a time and you will use it frequently, you don't have to re-bind it to another scope, just change the data on the scope. Something like this:
Create a service for your dialog
Create the directive and inject your service into it. When the linking function executes, pass something like $scope.dialogData to the service so that the service can update the data.
Create a controller that gets the service injected. Set the dialog data through the service to display the dialog. Since you're modifying data in your controller that's on the directives scope, Angular notices that and updates your dialog.
Add ng-show on your dialogs wrapper to make it simple to implement open()/close() methods on your service.
Now you have a dialog that can be used from anywhere in your system, and you're just re-using the same directive without having to mess with the DOM or compilation.
This is indeed excellent question and I'm happy to see that more and more people are starting to approach dialogs as services.
Regarding your particular questions, here are some of my thoughts:
You can "cache" linking function (that is - function that is returned from the $compile call) and then call this function as needed (passing in scope variables).
Instead of inserting (hidden) compiled element you could only attach it on demand, when a dialog gets opened. On top of this I would rather attach modal element to the $rootElement instead of <body> just not to touch DOM elements above where ng-app was defined. Just not to touch parts of the DOM that AngularJS is not controlling.
IMO dialogs are really close to AngularJS routes (as they provide different "views") and as such it would be very nice to have ability to resolve promises before modal is shown (as with routes).
In fact there are number of things to consider when designing a good, generic dialog service and I hope that those advice, alongside with excellent input provided by others, will get you started. But this all is a bit theoretical so if you are looking at the implementation of what was discussed here you can have a look at this implementation. ($dialog service from http://angular-ui.github.com/bootstrap/ - it is fully customizable so can be used with CSS other than Bootstrap's. Documentation here).
It can be seen in action in this plunk: http://plnkr.co/edit/PG0iHG?p=preview
Excellent question I think. You're wondering if one can "hot swap" the scope of an element. I don't know if there's a way to do that, or even if there is, if that's the Angular way. I take it you looked at how ng-view works to get as far as you've gotten?
My advice is to do the $compile once, keep the result, the link or transclusion function or whatever it's called in Angular parlance, around somewhere. And call it for each needed instance of the dialog.