I'm new with Angular. I follow a tutorial from this link, and i tried to do/add something that doesn't part of that tutorial. I added a providers :[EmployeeService] line to employee-list.component.ts and empployee.component.ts inside #component, and it returns error that said TypeError: Cannot read property 'push' of undefined. So realize that adding providers :[EmployeeService] to some components are unnecessary. I read about Dependency Injection from this link but i do not really get what i wanted to know. So can anyone give me a simple explanation how/when/where to use/put providers and how that error happens?
Thank you very much in advance.
providers array tells Angular what services it should instantiate. You can define it on two places:
component
module
When you use providers in component the service will be available to that and all it's children.
When you use it in module the service will be available for all pipes, directives, components and services in given module.
But you can define it in both if you want - in that case Angular will create two instances of the same service.
For beginning provide your services on the module level.
Related
I had my working project written in asp.net core 2.1 for a long time, but yesterday, I was forced to upgrade it to .net core 3.0 (due to 2.1 cannot call Dll' s which are written in 3.0 already).
With that, a lot of functions were obsolete or already removed. I fixed almost all of it, but one problem with CORS.
Like many people before me, I used:
app.UseCors(x => x
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
in Configure function. And services.AddCors() in ConfigureServices function.
I was able to fixed this quite easily with setting WithOrigins() or .SetIsOriginAllowed(_ => true) instead of AllowAnyOrigin() which does not work anymore with AllowCredentials().
After that, I was able to start the application and I thought everything is fine, but then I get stuck until now with problem I do not know, how to fix.
I have DB relation N:N and relation table which handle that, that means I have Admin entity with AdminProject list property, then I have AdminProject entity with Admin list and Project list properties and Project entity with AdminProject list property once again.
When I am listing my projects of certain admin, I am returning in Controller this return Ok(projects), where I just use getAll on AdminProject entity and then with Select return only project.
For that, I have to use[JsonIgnore] in project/admin for properties which I do not need to avoid cycling when creating json.
With that said: NOW IN .NET CORE 3.0 AND CORS SETTINGS IT DOES NOT WORK.
I am getting an error:
System.Text.Json.JsonException: A possible object cycle was detected which is not supported. This can either be due to a cycle or if the object depth is larger than the maximum allowed depth of 32.
when debugging in console and error Access to XMLHttpRequest at 'http://localhost:5000/api/project/adminlist/1' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. in WEB browser
I think I tried almost everything with Cors settings etc and I do not know why is this happening now. I also tried to JsonConvert.SerializeObject() before return it ---> return Ok(JsonConvert.SerializeObject(projects)) and this is working, but I am not able (mentally) to do this in every single controllers functions.
Please help! Thanks a lot!
The problem was occurring because in .NET Core 3 they change little bit the JSON politics. Json.Net is not longer supported and if you want to used all Json options, you have to download this Nuget: Microsoft.AspNetCore.Mvc.NewtonsoftJson.
After that in your Startup.cs file change/fix/add line where you are adding MVC (in the ConfigureServices method.
So: here is what I did and what fixed my issue:
services.AddMvc(option => option.EnableEndpointRouting = false)
.SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
.AddNewtonsoftJson(opt => opt.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore);
I hope it will help somebody else.
Cheers!
A couple other things have changed in .net core 3 and now instead of using addMVC you can use addControllers. So your code might look like the follow:
services.AddControllers().AddNewtonsoftJson(x => x.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore);
I'm building a suite of REST micro-services using .Net Core 3.0 Preview 6. All these services will have the same start up logic. So, I'm trying to place all the code in a .Net Standard library.
The goal is to have the IHostBuilder:CreateHostBuilder method, as well as the Startup:Configure and Startup:ConfigureServices class and methods in the library. The library will also contain error handling logic, customized http response messages, etc.
However, I can't seem to find the correct package that contains the ConfigureWebHostDefaults method. I tried adding the Microsoft.AspNetCore package 2.2.0, but that didn't resolve the issue.
I added the Microsoft.Extensions.Hosting (3.0.0-preview-6) package, that also doesn't resolve the issue.
Is what I'm attempting even possible?
Thanks
-marc
I resolved it, not the best way, but it works. I decided to make the library targeted specifically for .NET Core 3.0. So, I changed the targetframework in the project file. That change automatically resolved my other issue.
Import the Microsoft.AspNetCore package, and use WebHost.CreateDefaultBuilder() instead. According to the code it is built from, both CreateDefaultBuilder() and ConfigureWebHostDefaults() call the same internal method: ConfigureWebDefaults().
The only downside of this is that the returned host will be an IWebHost instead of an IHost.
Does there exists a build in function that keeps on reloading the whole component until a boolean gets true. Bacause now before I can get some data I need to wait until a user has clicked a button in another component. But there is no relationship between those 2 components.
Does someone knows a way how to do this.
thx!
you can make use of Event Emitters in components to share information so that you need not wait for a user dependent action . Also make use of Service classes in order to pass information between components.
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
Also if you are getting information from a http call try and use observables or promises and then use ngIf or a elvus operator to get info into the component.
More on Angular Concepts https://rahulrsingh09.github.io/AngularConcepts/
I solved it by using a service where is create a subject/observable.
Check the link:
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
check the: Parent and children communicate via a service
I have created a new solution for my MvvmCross app that supported Windows Store and I want to support UWP on Windows 10. I have moved over the PCL successfully, but I am having problems getting the basic UWP app working using a sample provided by MS (NavigationMenu) which uses the SplitView and the AppShell pattern they are recommending for the new navigation/command model. I referenced a helpful blog post (http://stephanvs.com/implementing-a-multi-region-presenter-for-windows-10-uwp-and-mvvmcross/), which gave me some guidance on how to integrate mvvmcross into the AppShell, but startup is failing because the AppShell does not have a valid Frame defined. Frame is a read-only property, and I have been unable to see where this is being set up.
I am using the standard AppShell implementation from the NavigationMenu with the following changes as recommended in the blog post:
public sealed partial class AppShell : MvxWindowsPage // was Page
public Frame AppFrame { get { return this.Frame; } } // was this.frame
Except for code after the error, there are no differences in the setup. In looking at the MvxWindowsPage implementation, there doesn't seem to be anything special as it still invokes the Page initialization. Is there something obvious I am missing?
So the link to the blogpost is correct, in other words you'll need to use MultiRegions from MvvmCross to get this working.
But what the blogpost doesn't show is a complete working version...
I've added one on my github here:
https://github.com/Depechie/MvvmCrossUWPSplitView
Some pointers to take away, like I said in the comments.
Your view where the SplitView will be present, needs to have a property to return a valid Frame to look for while injecting new views. This can be returned like this return (Frame)this.WrappedFrame.UnderlyingControl; found in the code here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/FirstView.xaml.cs#L13
Than all views you want to load up in the SplitView will need to reference to the region you defined in that SplitView, in my case I named it FrameContent as seen here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/FirstView.xaml#L48
So use that name for the region attribute in all to be loaded views like so [MvxRegion("FrameContent")] example here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/SecondView.xaml.cs#L7
I see what you're trying to do with the SplitView template that's provided by Microsoft. There is however a mismatch between things managed by MvvmCross and UWP.
By default MvvmCross maps ViewModels to Views based on naming conventions. What you are trying to do is use a view 'AppShell' (which is derived of Windows.UI.Xaml.Controls.Page) that doesn't adhere to the default MvvmCross convention.
The way I choose to implement this SplitView (Hamburger) functionality is by deleting the provided AppShell class entirely. I then created a new view named HomeView (since I have a ViewModel with the name HomeViewModel) and added the SplitView control there as described in the post you mentioned above.
For completeness I've created a Gist with the App.xaml.cs and HomeView.xaml as you requested. You can find them here: https://gist.github.com/Stephanvs/7bb2cdc9dbf15cb7a90f
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(){
};
});