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.
Related
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.
Sometimes forms has some logic: some additional data requested with ajax, it reads cookie or has a special filter. I would like to separate this logic from controller. I also would like to have forms' html in a separate file. How to achieve this?
Is it possible to make factory or service work with form?
I have an idea about implementing each form as directive. Would it be good solution?
EDIT:
The main goal is not to move HTML to separate file but to move the form logic out of main route controller. Is it possible to write some provider that takes care of the form so that all data queries for the form select elements (and other logic) is happening in this provider and it calls controller's function just at the end to save validated data?
I also would like to have forms' html in a separate file. How to achive this?
You can use ready made directives like ng-include to include external HTML fragments, or you can have your own template-expanding directive.
Is it possible to make factory or service work with form?
You can create any provider whose operation is dedicated to handle form(s). This is your model than an angular technique.
I have an idea about implementing each form as directive. Would it be good solution?
If you have many forms in your application and they are playing a pivotal role, yes - having directives for forms could be termed as a specific solution. The pros and cons cannot be explicitly judged here since the rest of the application's character is unknown.
Probably this is one of the places you should start your research from.
Your question is too broad. If you would like to separate the form from the controller, you need to put that form into a directive, which would allow you to put the html and javascript for the form in a separate file.
Another way to put the form html in a separate file is to use ng-include, however, this simply lets you move the html, whereas the first method will allow you to have a separate controller for the form html.
I have an idea about implementing each form as directive. Would it be good solution?
I believe that is THE solution you are looking for.
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.
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.