I am new to AngularJS with FireBase as my data store. I have gone through the examples on their website. Now, I would like to expand on the simple concepts and create a more detailed application.
Let's say, for example, I have a recipe controller. This would contain the recipe name and a short description. But, I also want to have a list of ingredients along with their quantities.
The ingredients would be a select element with a list of available ingredients to choose from.
My question is, how do I utilize multiple controllers on a CRUD site? Or should I not use multiple controllers and somehow use the recipe controller to handle everything?
If I were doing this by creating the database schema in, say, MSSQL I would have no problem and would know exactly what to do. I think it's the fact that everything is client-side that is throwing me off.
Thanks in advance for any assistance provided.
You probably won't want to have a controller per entity. You're controller here maps to a scope object. The scope is then bound to a view - keeping them in sync.
So if your view displays a recipe (i.e name/description), it might also have a child property ingredients ($scope.recipe.ingredients).
You're controller will manage this 'recipe' object, and also provide methods to modify/retrieve/manage it. Say for example you want to save the $scope.reciepe object to your FireBase store - you can inject a service into your controller, and then make a $http call to 'put' that object into your db.
A brief conceptual overview of control
See more at https://docs.angularjs.org/guide/controller
Related
Referring to this question: https://softwareengineering.stackexchange.com/questions/218391/arrays-vs-objects-in-view-template
I was wondering what are the best practices to pass data from controller to view?
I'm currently working on php/Laravel and using service layer between controller and models. I'm not using repository layer yet, so just getting eloquent object from models and passing them to controller then view. The format is not persistent, at some location the data is being passed as eloquent object/collection and at some points it's being passed in an associative array format.
We know, the best practice is that our view should know least about the backend code/structure. If we pass an eloquent object to the view, then our view even knows the field names in models. This way, changing one model field name will break our code till the view.
If we pass array then we can definitely such kind of information? There is also some concept about DTO (Data transfer object), how it can help in hiding our data from view? I'm looking for a way through which my front-end and back-end least depend on each other.
I think the vagueness of the question is part of the problem, so my real first question is, what do you call, in Angular, the thing.
The thing I'm trying to name is the view plus the controller, over the model of a single object. I don't even know what to call it. For things I know ahead of time I'm going to need, I've been creating directives, but what do you call one instance of the thing that a directive creates?
I have several situations where all of a sudden (in response to some external event), I have a new object in the model and I want to show it on the screen. Angular seems to want me to list all the possible views ab initio in their parent view, but that isn't really reasonable in my case. How, for example, would I list all the pop-ups and tool-tips and other stuff.
I'm down in some little edge case, deep in the controller code, and it needs to add something to the current view. What's the accepted practice.
Incidentally, the $route/ng-view is one case of exactly this. The view containing the ng-view, and the ng-view DIV itself, have no idea what the $route module is going to put in the ng-view. I need the more general case of this strategy.
EDIT
People keep asking for an example. How about this: I'm making an equipment-requisition app. When a user asks that one of the 1000 different type of equipment be sent to him, I need to display a pop-up that gathers addition information specific to that type. If he asks for a screwdriver, the pop-up will ask about blade size, neck length, and handle composition; if he asks for an airplane, it will be a wizard ask him about engine size, fuel tanks, seating arrangement. All the app knows on start-up is the list of all equipment types, and the name of the UI element that gathers all subsequent information about each particular type.
I'm down in some little edge case, deep in the controller code, and it needs to add something to the current view. What's the accepted practice.
Somewhere, you need to define all of the views you'll need -- e.g., all of the equipment popups. You could put each view into a separate file and use ng-include to dynamically pull in the one you currently need to display. Define a property on your $scope (e.g., $scope.equipmentTypeViewUrl), then
<div ng-include src="equipmentTypeViewUrl"></div>
Since ng-view can only appear once per page, ng-include is probably not what you need to use if you need multiple levels of routing.
See also
create a single html view for multiple partial views in angularjs
https://groups.google.com/forum/#!topic/angular/xIIyGpW8KUk/discussion
App design using Angular js
Client Side Template with view per role
I think the problem is that you think that you need to create the "thing" in controller, but actually you don't. The way two-way data binding works is that you change some attribute value, and the view changes based on that. I've never seen a use case where that's not enough, pop-ups and tooltips notwithstanding.
However, if you really must have the controller show something, you could utilize angular's events to do that. You would need two parts: a directive responsible for showing stuff (modifying DOM), and the controller. The controller would $broadcast an event with some parameters, and the directive would listen to those events using $on and react accordingly.
I'd just make sure I had some useful code coming in as the model...
<div class="row" ng-repeat="attribute in attributes">
<div class="widget" ng-repeat="input in attribute.inputs">
<input type="{{input.type}}" ng-model="input.value" />
</div>
</div>
I'm extremely limited in my knowledge, but all I know is if you have a definite structure to your model you can build a view that reacts to it dynamically.
If all of those things are related to your original object (properties or in some way other) you could loop through the data, display the properties and if need use the keys and filters for a label. Imho it's not really an angular question, more one if your data structure. If you have a good data structure you could use a service for creating a related data-object.
For a related popup, you can use a directive and even process the model data there (only recommended if it has a consistent structure).
If you dislike this approach, you can process the data directly in the template.
But without more specific details, there will be no definite answer.
I'm really new to the MVC pattern in Ext.
I have a tabpanel with multiple instances of the same component (let's call it product), each should call the server when it's opened, with an id parameter.
Right now, in order to create these tabs - I use this in the Product controller
Which creates a new instance of a view, but I feel like it's really incorrect.
createMainView: function (opts) {
return Ext.widget("productDisplay", opts);
}
I call it from my "main" controller, like this:
var tab = this.application.getController("Products")
.createMainView({ productId : id, closable: true })
tabs.add(tab);
tabs.setActiveTab(tab);
What's the correct way to properly use multiple instances of a view, each having an instance of one store and behavior (via the controller).
Can I use one named store for them (with a js file under app/store/product.js)?
Should I manually call load on the store from the controller (to pass the productId), or is there a nicer way?
It's kind of very broad and interesting question which require big and thorough explanation (which you can find btw on the Sencha.com in their guides and manuals). I would like highlight couple points so you have something to start with:
Stores are usually global objects. You don't keep two instances of one store in general. You can use filtering (local or remote) if you need to present information from the that store in several different views. The only time you would need to clone store is if you want to present different information from that store in 2+ different views at the same time.
Controllers are usually spawned by main application object. You don't have to do anything special - just list them in the controllers: [] property. And then spawed when application is launched (before their views are created and rendered). Keep that in mind.
If you have modal view - it's ok to create it manually and either re-use it or destroy and re-create later. You can add filtering and loading to controller which creates these views. And you can re-use same view/controller objects for different tabs if you want.
If your views are presenting one instance of an object (like one product is displayed on each tab) - don't attach stores to those views. Just pass them individual model (record).
I would recommend creating the stores that relate only to that view instance inside of the view's initComponent method.
Your controller's control handlers should be coded in a way that they can differentiate which view dispatched the event. This should not be too difficult because almost all view events contain a reference to the component which fired the event. You could then use the relative query selectors, e.g.: myEventFiringComponent.up('anotherComponent') or myEventFiringComponent.down('anotherComponent') to get a handle on a different component in the same view if you need to.
Please see this post for a full explanation.
We had an outsourced engineer work on a quick feature DELETING items listed in our database. He says that the code is difficult because the "controller" is missing. Is there a pre-loaded controller for every function like that in cake, or is it weird that he is expecting a controller to be there for a feature we didn't have yet.
There is a generic AppController, but that's more of an abstract class in practice (you generally derive your other controllers from that).
It's not that weird at all that he's expecting a controller -- after all, you won't be able to call methods in the models (which is how I'm guessing you're doing delete) unless you have a point of control to call them from. In this case, the point of control is the controller.
So you can just create a controller. Here's a template to start from:
class SomeController extends AppController {
function delete() {
$this->Some->delete();
}
}
Then access /somes/delete (remember, URLs are generally /controller/action).
Now, he could be talking about the Cake Bake CLI app. That will take your DB tables, and walk you through an initial basic setup for your app. Generally it creates a basic skeleton for CRUD actions.
Either way, you need to create a controller (manually, or via Bake).
When you use the Cake bake function, it'll create all the controllers for you. When you don't use it, you'll need to create them manually. It makes no sense to make all the controllers at the begin, just make them when you really gonna write them would be good.
If you do not have a controller in CakePHP when you visit a page (http://www.youraddress.com/Newfeature) you receive a missing controller error:
Error: NewfeatureController could not be found.
Error: Create the class NewfeatureController below in file: app\controllers\newfeature_controller.php
You cannot get or delete data from the database without controllers - Understanding Model-View-Controller. You do not need the controller only for static pages in CakePHP.
Say I got two Controllers like this Table1sController, and Table2sController.
With corresponding models: Table1sModel, Table2sModel.
In the Table1sController, I got this:
$this->Table1sModel->action();
Say I want to access some data in Table2sModel.
How is it possible to do something like this in Table1sController?
I have tried this in Table1sController:
$this->Table2sModel->action();
But I received an error message like this:
Undefined property: Table1sController::$Table2sModel
There are a few ways to go here.
If your models have defined associations (hasMany, etc.), then you can access that model's methods (assuming you're in Model1Controller) with:
$this->Model1->Model2->method();
If there is no model association between the two models, but you want to be able to use the Model2's methods, you can add an entry in the $uses attribute of model1Controller. See http://book.cakephp.org/2.0/en/controllers.html#components-helpers-and-uses
Finally, if it's a transitory connection (you don't want the overhead of loading other models every time, because you're only rarely going to access model2), check out the manual's section on creating / destroying associations on the fly, at http://book.cakephp.org/2.0/en/models/associations-linking-models-together.html
Something is inherently wrong with what you are doing.
In any controller, you can specify $uses = array('Table1sModel', 'Table2sModel', 'LolModel') and use each Model you need in your controller. You are not calling another controller to access a Model. Models are for data access, you access the needed ones directly from any controller.
I understand, that many MVC examples are almost always show you one page of one controller with one model which is horribly wrong as 99% of the cases you have one site from one controller using many different parts of different models.
(If you really need to call an action, use $this-requestAction())