I have a rather simple Angular App for a product cataloque, pulling one big JSON file from a CMS. The JSON holds info needed in several parts of the app (menu, pagination, product list, product details), so several controllers need access to it.
They way I did it is to define
$rootScope.$on('$stateChangeStart',
function(evt, toState, toParams, fromState, fromParams){
loader.getData(toParams);
});
in app.run();. The loader factory then $broadcasts the data to all the controllers. This works fine, but the application "blinks" on every state change, since UI-Router starts the controller / loads the template without data while waiting for the async data.
I guess the correct way of doing this is to use resolve in $stateProvider.state() but I can't figure out how to $inject my loader into config or make my data availabe to all the other controllers.
Is there a way to make resolve wait for a broadcast? Or is there another approach?
This is my first angular project so please excuse if this is easy / obvious or stupid.
Thanks!
For anyone running into the same problem: Dependencies don't need to be injected into config, they go into resolve, which takes everything. So my code looks like this now:
`.state('produkte.list',{
url:':main/:sub/?p=:page&o=:order&f=:filter&b=:brand',
resolve : {
data:['$stateParams','loader',function($stateParams,loader) {
return loader.getData($stateParams);
}]
},
[...]`
The loader still broadcasts it's results to any controller interested so it's all good (meaning, it works)
Related
I'm really new in VueJS,
I use RxJS, Vue rx and Vue Resource in a mixin so i can make http calls and get observables back anywhere... awesome!
now i tried
subscriptions () {
return {
titles$: this.getHTTPObservable('https://jsonplaceholder.typicode.com/albums').flatMap(arr => Rx.Observable.from(arr).take(10).map(o => o.title).toArray())
}
The only thing i need now is to specify the end point of the server i am requesting in some configuration file like i would do in angular environments file. When launching the build by hand it should look like when i write
ng serve --env=dev
is there something similar?
Actually i found the answer on this page https://vuejs-templates.github.io/webpack/env.html
so, i can add any configuration variable and then call process.env.varname to get it back,
thanks
Vue.js normally works in conjunction with Webpack to achieve this.
https://v2.vuejs.org/v2/guide/deployment.html#With-Build-Tools
The DefinePlugin from Webpack is used for this. Outside of Webpack I think you are still able to use this:
https://www.npmjs.com/package/cross-env
I build a web app using sails.js and I have few questions about the design of the app:
Should I create controllers for each page, component, or model? I saw in the documentation and at some tutorials that they create controllers for each model. That looks nice but if I have a complex page/component and I want to create view with multi models (and data) it doesn't help me.
Where should I put the business logic part of a component or feature? I read about Serivce but I'm not sure that this is the right place.
To sum up, I saw that in sails the code is arranged like the models (you have model, controller and view for each model) but what if I want to arrange it by features or components or pages?
Thanks!
Basically you should have Controller for each Model (but if you don't need specific controller and it would be empty you don't need to create it). It's just a good practice to have a Controller for each Model.
If you use some part of code in many places and it is not connected with one specified Model it should be Service (like sending emails, notifications, logging, images processing). Read about DRY
Controller should be as simple as possible. It should contain call of Model and Service and callback with rendering output. All business logic should be in Models.
I created some additional 'helper' Models for more complex Models like Users or so to make Classes bit shorter.
To sum up. Core of your application is Model. It's not only responsible for database layer, bur also business layer of your app. Later there is Controller. It gets data from Model and it passes it to Views which is responsible for presentation of data taken from Model.
Answer to First
Sails is for REST API it has nothing to do with view.
you just need to know what MVC is and what REST is....
In one Controller you can invoke multiple models or one model can be invoked in multiple controllers.
In one page you can fetch data from two different API's which may be from different controller or Even they can be of different server.
for Example:
In the page you are getting data directly from ellasticsearchAPI(say esAPI1)
You are getting data from sails API(sAPI1).
You are getting data from other sails API(sAPI2).
Answer to Second
For neatness you should try to keep controller as clean as possible. So for the same sailsJS provide you services. Where you can write Common functionalities which are to be used in multiple controllers.
See the codes for example
Codes
here is the controller:
//TestController
module.exports = {
action1:function(req,res){
Model1.find().exec(function(err,data1){
if(err)
return res.negotiate(err);
res.ok(data1);
});
},
action2:function(req,res){
Model2.find().exec(function(err,data1){
if(err)
return res.negotiate(err);
res.ok(data2);
});
},
action3:function(req,res){
var hash=SomeService.getMeHashCode(req.query.text)
res.ok({hashedData:hash});
}
};
And this is service.
//SomeService.js
module.exports = {
getMeHashCode:function(strinToBeHashed){
var hash=doSomeThingToHash(strinToBeHashed);
return hash;
}
};
I´m developing an App that will be available for Windows Phone 8 and the Windows Store. To reduce redundancy I´m using a Portable Class Library (PCL) and on top of that I'm trying to apply the MVVM pattern with the help of the MVVM Light PCL Toolkit. The ViewModels are placed in the PCL and are bound directly in the XAML of the Apps pages.
When the data is received without an error, everything works fine. But I don´t know how to get the exceptions/error message back to the App when errors do happen.
Inside the Windows Store App errors will show as a MessageDialog while the Wp8 App will use the MessageBox class. Obviously the PCL isn´t aware of any of these classes. What I´m not getting is how to know if a ViewModel ran into an error, and how to get the message inside the App. Is this even possible when the ViewModels are bound inside the XAML?
The code in the ViewModel (inside the PCL) looks like this:
DataService.Authenticate((token, error) =>
{
if (error != null)
{
// This is, obviously, not going to work.
MessageBox.Show(error.Message);
return;
}
Token = token;
});
So I have to save the error somehow and let the App itself know the error has occurred, and then call the matching way of showing the error to the user.
Currently I´m thinking of something like defining an Error-property inside the BaseViewModel and fill it when errors in the ViewModel occur. Then, in the CodeBehind of the pages, make them aware of the current ViewModel and bind a PropertyChanged-event to this Error-property. But I was not able to implement it yet, so I don't know if this is even the right way to go.
Do I have to step down from the idea to bind the ViewModels inside the XAML, and do I instead have to initialize them inside the pages Codebehind?
Your instinct is correct, but there are more than a few ways of going about this.
First and foremost, you can use Mvvm's Messaging library, which will allow your ViewModel to send messages directly to your View. Your View can then handle it in any way it wishes, including but not limited to using a MessageDialog.
Secondly, you can also create a Function or Action (likely the former) in your ViewModelLocator for ShowMessageDialog. This Function will likely take a string and return a Task. Then, after you initialize your ViewModelLocator initially, you can inject your ShowMessageDialog code. Your ViewModels can then use whatever platform's MessageDialogs that they please.
Ex:
Note: This code uses the BCL Async libraries that are accessible in Nuget. They work in the PCL just fine.
ViewModelLocator:
public static Func<string, Task> ShowMessageDialog { get; set; }
App.xaml.cs:
ViewModelLocator.ShowMessageDialog = (message) =>
{
// For Windows Phone
return TaskFactory.StartNew(() => MessageBox.Show(message));
// For Windows 8
MessageDialog md = new MessageDialog(message);
return md.ShowAsync().AsTask();
};
ViewModel:
await ViewModelLocator.ShowMessageDialog("This is my message.");
Secondary Note: The md.ShowAsync().AsTask(); must be run on the UI Thread. This means that you will have to invoke it via the dispatcher in the case that you are running it in a task asynchronously. This is possible using a similar method of injecting the use of the app's CoreDispatcher via the RunAsync method.
This means that you can, on any platform (Windows 8 and Windows Phone shown above), inject whatever Message Dialog system you want and use it in your PCL.
I would say that it is much easier to do the first method I suggested, as that is what it is there for, but the Function method version is definitely helpful at times.
I'm After several days learning angularJS through converting my standart JS app to a ng one.
I was wondering about this simple scenario:
I have a global function called fb_connect(),
it can be used from any page (or any controller if you like) to make a facebook-based login.
This function makes a simple http call and receives a JSON object contain data to move on (display a pop up, login, etc...)
I read that I can define a Factory or a Service for my app and use it in any controller, which works fine.
So, I created a fb_connect factory function.
The problem is that now, in every page (every controller), I have to define that fb_connect in the constructor of every controller - for example :
function welcome($scope,fb_connect){});
What is the proper way to do this kind of actions using Angular without having to define these functions each and every time in every controller?
Thanks
Setting up factories and services is all part of the dependency injection system of Angular. Using that system is great when you need to create things that depend on other injected things. It's a big tree of dependencies. It's also nice for creating singletons, such that everywhere in your code end up using the same instance of some object.
It sounds to me like neither of these benefits apply in your case. I'd suggest just not using Angular's DI for it. You have some function defined globally, just call it directly and skip the DI. There's nothing wrong with that.
Of course you say it makes an Ajax call, so doesn't depend on the Angular $http service?
Your two options are:
Declare the function on the $rootScope
Inject it as a service
My advice is to go with making it a service. The whole purpose of services is explained in the Angular.js docs, just like this quote:
Angular services are singletons that carry out specific tasks common to web apps... To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service.
As you mentioned in your question, you'd prefer to not define the service in every controller you wish to use it in. With $rootScope you'll be injecting that also in every controller. So really it's a question of which you prefer, although to answer your question, the proper way of using a factory or service is to inject it into the controller you wish to use it in.
You can always put it in the $rootScope
myApp.run(function($rootScope, fb_connect){
$rootScope.welcome = function(){
};
});
i'd like to know if i can call a controller action inside a template, and inside another controller in fatFree framework (F3).
I'm not sure if i understand you corrently, but calling a Class method in Template would go like this:
{{ MyConroller->doSomething() }}
Of cause you could call one controller within another too... just use raw php
$obj = new MyController();
$obj->foo();
or use the F3 call method $f3->call('MyController->doSomething');
Also check out the new API docs.
http://fatfreeframework.com/base#call
It's still under construction, but hopefully you'll find more information about this or any other framework part very soon.
Many MVC purists would balk at the idea of a View (template) calling methods on the Controller. They would say that the controller needs to provide the data that the view needs, or at least give it the Model, so that it can retrieve data from there.
Furthermore, the View probably shouldn't be doing anything (or asking another component to do anything), other than generating the display. But can query the Model for data. But maybe by doSomething() you do mean getSomeData().
While I'm not an MVC purist I do agree with the idea of keeping logic and functionality out of the view if at all possible.