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.
Related
I've been reading up a more in depth about angularjs directive and controller, what should be in one and the other. The situation is this, I have multiple people with their types -> policemen, medicine, lawyers ... etc. inside the admin panel app, where the admin can manage them. In one section the admin can create, edit, delete them. The current versions controller does almost all the work: UI (bringing up the right form, hiding the other forms...), and logic (deleting, creating, updating methods for each person type). As I understand this is not good, because the controller does multiple things (no single responsibility). And even further the controller should only bind values to scope.
But does that mean, that I should only pull all the people (inside controller) and pass it some master directive which will manage it all? Or should their be more directives inside directives to divide the responsibility?
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
Without code it's hard to give a precise answer, but the general idea when working with angular is this:
Controller: The controller is responsible for keeping the views up to date with all the changes that are happening throughout your app. This means that it should not contain the business logic, this logic should instead be separated into small services. Each handling different parts of the logic for your app.
Service: As stated above, a service should contain your business logic. Meaning that heavy calculations, manipulations etc. should be put into a service. Since services are singletons you can easily inject this service anywhere and re-use the logic within it, something you cannot do if you've put your logic inside a controller.
Directives: Like controllers, directives shouldn't have any business logic in them. Directives are only there to create re-useable functionality as well as giving you a place to handle direct DOM changes. DOM changes should never be done anywhere but from within a directive.
To answer this:
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
If you have the data bound to a controller, you should not necessarily need a directive to handle the CRUD operations. Since the data is bound to the controller, you can easily create a template which reacts to the data changes automatically using ng-repeat, ng-if and so on.
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.
I would like to know when does it make sense to use multiple controllers on the same page in angularjs. Also, when should one think about separating a controller into multiple controllers?
You should largely have your functionality in providers (services or factories typically) and your controllers should have very little in them aside from getting the providers injected (and exposing models and functions for use in the view) and possibly some view specific functionality (configuration for directives used only in one place etc.). You can have multiple controllers on the page if you decide to build the views within a page to be portable.
If you have one controller that shares the functionality needed for disparate parts of a page and later decide to move one part of the view to another route/state/view then you'll need to piece apart the controller. I don't think there are any hard rules really but if your controller is more than 100 lines you're probably making it responsible for too much and should "promote" some things to be handled by providers and/or start splitting things up a bit more.
The answer would be dependent on your page requirement. Having multiple controllers can easily be done.. But issues pop-up when you wanted to have page flows.
Controllers are just a part of AngularJS.. Usage of services, factories and filters is a recommended way of splitting your code along with controllers. If multiple controllers per page becomes imperative.. try utilizing directives. Also consider using Views provider by UI router.
I use multiple controllers when my page has got multiple pop-ups with complex functionality and i want separate controllers for them so that logic behind each-pop is in its own controller.
Similarly, I create separate controllers for sidebars and header and footers on the same page.
These are few examples which comes in my mind when using multiple controllers on same page makes sense.
But as others have mentioned, you should use providers and services/factory for splitting your code.
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'm working on a really big project. The aspect I'm currently working on requires that email templates are sent to a user when they're added to a learning course by another user.
The controller that deals with the request, does a bunch of str_replace tasks to find variables in the text (which the user can edit before adding another user to the learning course) and then replaces it with some values in the DB.
I took over this project and I'm not happy with the way half the things are done but time costs dictate I rather just go along with it.
The email is sent using Cake's native email function. It uses a template to capture data and send to the user.
Here's the question:
Should I keep the logic in the controller or do you think it's safe to move it to the element view's .ctp file?
My first instinct is to leave it in the controller as per the usual MVC separation ideals.
Cheers
This is a very important question - what are you using exactly for the email? The old email component or the new CakeEmail class? Which CakePHP core version are you using?
Here are some plausible aproaches here. You can:
Set all those variables, pass them to the view and do all the "replacing" there.
Encapsulate this logic in a component, attach it to your controller(s) and use it.
Just leave it in a private function within the controller and call that function whenever needed. (not really MVC)