I have to develop an Angular 2 application in which I have an HTTP service whose response is a JSON object like that:
plan = {ID: 'planID', installmentsNumber: 10, rate: 5}
I need these data to be shared between more components and every update to be caught by every component.
Which is the best way?
UPDATE (Nov 23, 2016)
I developed my app using Observable, like you can see in the plunk below:
https://plnkr.co/edit/0k0jr8KrJfFKeNkIV6So?p=info
Solved. Thanks to all.
You should use RxJs Observable library for that matter.
As your questions is broad and you haven't shared a working example I propose to you to read the following blog articles:
How to build Angular 2 apps using Observable Data Services
http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/
Angular 2 HTTP Requests with Observables
https://scotch.io/tutorials/angular-2-http-requests-with-observables
I prefer BehaviourSubject because you can initialise it easily and set a default state.
Related
I have an API with two clients: OldClient and newClient. I currently have this in Startup.cs so my json responses are serialized as PascalCase, i.e. as per all my .net objects which have first letter capitalized.
services.AddControllers().AddJsonOptions(jsonOptions =>
{
// So json output is like 'SomeId' instead of 'someId':
jsonOptions.JsonSerializerOptions.PropertyNamingPolicy = null;
...
}
OldClient loves this format. However, newClient would really prefer camelCase.
Is there a way I can configure my app to respond with camelCase for newClient requests and PascalCase for OldClient requests? newClient can send a header to indicate that it wants camelCase.
You can check out this issue on aspnetcore's github page
The possibility of using specific JSON Serializer Options on a per-controller basis hasn't been implemented yet. It has been moved to ".NET 8 planning", which means it's still a ways-away.
Meanwhile, you could work around this issue by:
For data reception and model-binding, you could create a Custom ModelBinder by implementing IModelBinder interface in a ModelBinderAttribute in order to utilize your specific JSON Serialization options. Then, you could simply add the attribute to the endpoints where you need it.
For data responses, you could simply use:
return new JsonResult([object], [CustomJSONSerializationSettings]);
It's quite annoying to have to modify these per-endpoint, but it seems like it's the only way until the feature is added in .net 8 (if we're lucky).
So there are several parts to this question.
The 2 example endpoints (in simplest form):
user/{id}/profile
movie/{id}/info
I expect to create 2 controllers (UserController & MovieController).
How do I implement a view area before controller name?
Both of these are what I would consider a view. Therefore I would like to append a "view" in the url before the controller, as both controllers ONLY supply views. I later expect to also have a user controller in a different place that does NOT return views.
However, ALL my endpoints should start with /api/.
i.e. I want this:
api/view/user/{id}/profile
api/view/movie/{id}/info
But how do I register an area (/view/) while using "custom routing" (i.e.: httpConfiguration.MapHttpAttributeRoutes())? Any examples of this I couldn't find?
Where should I put versioning?
The client is an app, and will require versioning, so that we can make changes to the methods without breaking old versions of the app.
We are unsure where it would be best to place the versioning, and how the placement affects the development of new versions (if it does so at all?).
Possibilities:
1. api/v1/view/user/{id}/profile
2. api/view/v1/user/{id}/profile
3. api/view/user/{id}/profile/v1
version the whole API. This would upgrade the whole API to a new version, even if we only required a single method/endpoint to make an app-breaking change.
Are there any advantages to this that I am not seeing?
version the area. Same as above, just slightly fewer controllers affected.
version the method. Seems like the simplest, as only the single changed method is affected. But the url is very ugly.
Does anyone have an example of versioning in an MVC or Web Api structure that doesn't upgrade the whole API, but still keeps a somewhat nice structure in their URLs?
I ended up using https://github.com/Microsoft/aspnet-api-versioning as suggested by NightOwl888.
1.
Made my 2 controllers extend another controller with a const field that defined the routeprefix that they should share:
protected const string RoutePrefix = "api/view/v{version:apiVersion}";
...
[RoutePrefix(RoutePrefix + "/user")]
2.
The placement of the /v1/ doesn't matter with this Library. And allowed for either updating the controller or individuals methods, as seen fit per case basis.
I am in reference to the router-store ngrx project (https://github.com/ngrx/router-store).
I am not clear how to use this project...
For instance let's take the following sample from the project documentation:
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
Is this meant to be use as a replacement to the angular 2 router: router.navigate(['/path...?
...or should I use the ngrx router-store only in certain circumstances? (if so which ones?)
Also what happens to the ngrx router-store when a angular 2 router html link e.g. <a routerLink="/heroes" is clicked?
More generally, can someone please explain what is achieved by the ngrx router-store project as compared to using the plain angular 2 router?
Or to rephrase, what does ngrx router-store brings in addition to the angular 2 router?
Edit: An interesting source of information and samples about ngrx is of course the ngrx example-app (https://github.com/ngrx/example-app).
I found a dependency to the router-store there but I have not been able to find where the router-store is used within the app...
FYI, here is the comment to be found in the example app about the router store:
#ngrx/router-store keeps router state up-to-date in the store and
uses the store as the single source of truth for the router's state.
The #ngrx/router-store exists so that it's possible for the store to be the single source of truth for an application's routing state.
Without it, there would be application state - the current route - not represented in the store. That means time-travel debugging using the DevTools would not be possible, as there would be no state in the store representing the route and there would be no actions representing route changes.
The router-store does not replace the Angular router; it just wires up listeners for routing actions and for the router itself.
When you emit a routing action using the go action creator, a "[Router] Go" action containing the specifed path is heard by the router-store which then calls the corresponding router method. When the router-store hears - from the router - that the route has changed it emits a "[Router] Update Location" action representing the route change and that action sees the router state in the store updated.
If, instead of using the go action creator, a routerLink is used to effect a route change, router-store will hear the change and will emit a "[Router] Update Location" action that will see the store's router state updated.
So, whether the route is changed via actions or more traditional links, the store always contains the router state.
With the "[Router] Update Location" actions representing route changes, you can undo said route changes via the DevTools - something that would not be possible if the router state were not represented in the store.
If you've not used the Redux DevTools, I would recommend you check them out:
Redux DevTools Extension
#ngrx/store-devtools
#ngrx/store-log-monitor
An example.
Say you have a selected id that you pass in the router state. That id references a customer.
Your url looks something like this: myapp.com/customers/7755664
When you route to the customer edit view, you can write a selector that gets the customer entity using the id from the router state. Say you want to scroll through the customers. You navigate to myapp.com/customers/7755653. The selector returns the customer, the select call emits and your view rerenders with the new customer.
It simplifies selectors and replaces the need to have a selectedcustomer property in your state.
I am using angular2-meteor.
When I try to pass a value between two components (when the value change in the first component, create an event in second component and use this new value), I have two ways right now:
One way is meteor way: using this.autorun and Session.get.
Another way is angular2 way: using Injectable service with EventEmitter.
Which way should be prior? Or is there any other better way? Thanks
Now I used angular2-meteor a while.
Although the angular2-meteor tutorial has no example so far about using or choosing Angular 2 service or Meteor Session.
But I feel angular 2 takes the lead in the front end, while meteor makes reactivity easier and also handle all back end things.
So I went with angular2 way using service to share between components. And service is very powerful like #todd-w-crone said.
If anyone has better answer, I will switch to accept that one.
I find it practical to create a new service called App.states.ts which is accessed globally and mimics Session (get / set).
I commonly import this service to all necessary components to get or set new value such as User.status, company.profile, lastProduct, etc.
Since this service is #injectable it can also make use of other services, in case a value hasn't been set already.
This allows me to ask for a variable in a component appState.getLastModifiedItem(), then in app.states.ts I'll write this function to pass this.modifiedItem or either:
Request another service item.service.ts to fetch data
Call another function with itemCollection.findOne({...}) and return such value.
You can configure Mongo queries as you want and either store static data in appState or keep subscription items in appState.
Do take into consideration that all subscriptions handled by an #injectable within a component are imported by such component. Be wary of conflicting subscriptions between components/services.
Has anyone used ADO.NET Data Services as a data source for Adobe Flex applications? If so, any success stories or tragedies to avoid? If you did use it, how did you handle security?
I use WebORB for .NET to do Flex remoting and then use DLINQ on the server. One tricky thing about using LINQ with WebORB is that WebORB uses Reflection to automatically retrieve all the relationships of the object(s) you return to Flex. This causes severe time penalties as LINQ uses lazy loading to load relationships. To prevent this from happening, I do something like the following:
Override your DataContext's constructor and add the following code:
this.DeferredLoadingEnabled = false;
DataLoadOptions dlo = new DataLoadOptions();
dlo.LoadWith<Order>(q => q.Payments);
dlo.LoadWith<Order>(q => q.Customer);
this.LoadOptions = dlo;
This tells the DataContext to disable deferred loading of relationships and specifically instructs it to load just the relationships you want, without lazy loading. That way, WebORB isn't causing any lazy loading to happen through Reflection and the number of relationships being transferred to Flex is kept at a minimum.
Hope this helps you in some way. It's definitely one of those little "gotchas" when working with Flex/WebORB and LINQ.
Yes, we use Flex with .Net web services extensively.
Flex can't handle .Net DataSets, or indeed much by way of complex xml types. We found that it was best to keep to relatively simple xml output.
However, if you do that, it can handle .Net web service output fine:
<mx:WebService id="myDataService" showBusyCursor="true">
<mx:operation name="WebMethodName"
resultFormat="object"
result="functionFiredOnComplete();">
</mx:operation>
</mx:WebService>
public function load():void
{
myDataService.loadWSDL( "web method's wsdl" );
myDataService.WebMethodName.send( params );
}
public function functionFiredOnComplete():void
{
// get data
var myData:Object = myDataService.WebMethodName.lastResult;
...
He Asked about ADO.NET Data Services not web service
Flex can only do GET and POST
Flex doesn't understand HTTP Response messages
So in order to have Flex talk to ADO.NET data services you either have to;
1. use a proxy server, but you have to find or build one yourself
2. modify the incoming requests and use $method=MERGE and so on (same as proxy)
3. use another as3 httpService client, there are some opensource initiatives
Then you have to find out how to post data, and it cost a lot of time when you want to create a new record with JSON and specify a Id wich has a link to another table. This because you can't just update the integer, but instead you have to create a link string, it's feels not really easy.
So ofcourse it can be done, but out of the box you really have to make it yourself. I know that Flash Builder 4 will come with a REST import, this could speed up things, but hve no experience for that