What is the best way to use multiple modules of Angular 4 within Asp.Net Core MVC context ?
I have an app that has couple of sections, each represented by a controller and a view. On those sections, I'd like to use Angular to implement sub-sections (so let's say - for ShopController/View, I would like to have subpages - Shop/Items Shop/Cart Shop/Details etc.).
It's a no brainer with one section, as for example - for Shop I can put <app-root> in shop's Index view, where app-root is an AppComponent with <router-outlet>, residing in main AppModule (along with it's routing), but what if I have multiple such cases - so Shop section (ShopController), then Setting section (SettingsController) etc. where each section should have their own sub-routing controlled by Angular ?
You should not create separate views on the server to correspond to sub-components of your Angular ShopComponent. One of the main purposes of using Angular is to be able to create a "single page application", where you would only return to the server for data required by the application.
You could use Angular "Child Routes" to define the the Shop/Cart and Shop/Details routes. See: https://angular-2-training-book.rangle.io/handout/routing/child_routes.html
In Angular js 4 and Asp.Net application difficult to handle routing, either you need to choose asp.net routing or angular js routing. Because it two routing handling in separate section Asp.net in Register router routing table in Angular angular routing outlet.
if you using both you definitely get routing error in page refresh
So as of now no connected routing system not implemented and not available in Asp.net Core and Angular 4 routing.
Related
I want to develop website with React front-end features and Asp.net for backend and some asp.net views for front-end. I don`t want to use React for the whole application. When I started new project, I used prepared ASP.NET React Redux Template by Visual Studio 2019. Everythink would be fine, but I cant find _Layout.cshtml.
Why do I need this file?
When I choose classic Asp.net mvc template, I can find in this file imports of css, js and also packages like bootstrap.
f.e:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
If I didn`t need classic asp.net views, the template would be helpful. How can I fix it, or where to import files/packages usable also for views?
In the ASP.NET Core + React templates by Microsoft, the Layout is not handled in the back-end with ASP but in the front-end with React. In the ClientApp/src/components folder, you will find a Layout.js file for this usage.
However, nothing stops you to create a partial view _Layout.cs and use Razor Pages / MVC as a React overlay. This way, every page should be handled with an ASP controller. Inside them you would add an empty HTML tag to place your React App if you need it.
In the ClientApp/src/index.js file, you will find the following line:
const rootElement = document.getElementById('root');
You need to replace the element ID by the one where you want to render your React application in the DOM.
But typically, when using ASP with React, the front-end is left entierly to React. ASP is only useful for API controllers handling AJAX requests coming from React, and interacting with a database using Entity Framework.
i am having a problem which i want to combine my old ASP.net website into a new web project but i want to remain my current ASP.net backend. And its mean i just want to change the front end only for this thing.
The front end that i want to try is using the Angular JS, but soon i found out that wasnt easy to setup for this project.
Because when have angular project it need to build only can work, so how do i have the project to star this new front end. I not clear what should i start as a correct way.
Or it must separate to a new project and redo the front end and backend?
Angular usually uses REST calls to communicate with the back-end. With ASP.NET the back-end renders the page and sends the complete HTML page to your browser. In Angular your browser renders the incomplete HTML page and then fill it with the result from your REST call.
In your case you will have to add a REST layer to your back-end. Then you can create an Angular project which calls this REST layer. So these are 2 seperate projects.
These are some usefull links that might help you:
https://learn.microsoft.com/en-us/aspnet/web-api/overview/older-versions/build-restful-apis-with-aspnet-web-api
https://spring.io/guides/gs/consuming-rest-angularjs/
When viewing a web application as a user, what are some reliable ways to determine if the app is a single page application (SPA)?
Depending on the framework used, the URL might make extensive use of hashtags. IF you click on navigation links, etc and the URL looks like http://somesite/#/some/route, then it is using hashtag-based routing and is a SPA. Angular 1.x did this for a while. However, newer routing engines use HTML5 features that make the route look like a normal URL: http://somesite/some/route. This URL would be indistinguishable from a non-SPA site. In that case, the only way to tell it is a SPA is to look at the javascript code (Does it use a SPA framework) and/or network traffic (when you click a link does it get the whole page, or just some JSON needed for the current view).
this is my first question on stack overflow so please be kind!
I have designed a Symfony server based application with an almost complete backend interface. Using symfony router, i can login in the backend using a url (ex. www.domain.com/admin) and see backend pages.
Based on this backend, i want to create an Angular2 application for dealing with the front end. It is quite straight forward to make it working for the front page url (www.domain.com). However, if i use any subroutes which would otherwise work in an Angular2 app (ex. www.domain.com/inner-page), Symfony router takes over and throws a 404 Not Found - NotFoundHttpException.
The question is, how can i use both routers in "parallel"? Any URL under www.domain.com/admin will be handled by Symfony router, and any other url by Angular2 router?
EDIT
Thank you for your replies!
I have something in mind. It might not be elegant, since it will require manual exclusion of angular routes from symfony, and vice versa, but it will look cleaner. I am still working on it though, so its still a theoretical concept:
For each url containing "/admin/", Symfony router will serve backend twig-php pages as it is designed to do. For any other url however, a simple controller will just serve the angular app.
On the other hand, in the front end, Angular router will work as it would normally do. However, if a url contains "/admin/", it will be handled by an Angular component that will simply change window.location.href within its OnInit function to redirect to Symfony backend.
The angular app should be built separately, Symfony is a back end framework and isn't a good choice to use for building angular apps.
I created an example of how to use the 2 together, with FOS User Bundle and FOS OAuth Server Bundle to deal with authentication.
It's a couple of years old now, but should give you a good idea of how to go about using them together.
Github is down right now, but I'll update this with a link when it comes back.
edit:
https://github.com/mbates/Symfony2-AngularJs
There is AngularUI routing framework available in AngularJS for routing purposes in your AngularJS application. You can use Angular UI-Routing framework to govern your application's frontend while Symfony2 take care of the backend of your application. Angular JS UI-Routing URL's will looks like this,
www.domain.com/#page1
instead of this,
www.domain.com/page1
After the hash (#) the url will not be a part of Symfony2. The place where you map Symfony2 urls with Angular UI-Router urls will be within states. Take a look at this tutorial. I hope AngularUI will solve your issue :)
Cheers!
I am working on this ASP.NET MVC Project to which i am very new.
I did some worked somehow on normal ASP.NET Web Forms back in days but i am really a beginner in ASP.NET. I developing projects in php for quite time and did never got a chance to try out .NET.
Back To Question:
I want to have two Sections, One for Administrators and One for Front End Users.
I want both Front End Users and Administrator(BackEnd) Users To have Different Themes Different Controller and Different Models.
In Simple PHP i did made base Controller Named My_Controller which extends the main Controller.
And after that i created two more base controllers derived from this my_controllers namely
AdminController
FrontEndController
and moved this based controllers to core directory or library directory.
But How to achieve such a thing in ASP.NET MVC, I am using ASP.NET MVC 5 at the moment.
Currently i just created new project using MVC. and Here below is the Current File Structure for my Project
Also Please Also Share what will be a better approach that making the base controllers for Admin Controller and FrontEnd Controller.
Or having Multiple MVC Projects in a project of a solution. Like HMVC.
But most importantly what is the best approach and how to achieve this admin and frontend file Structure.
Possible Solution 1:
The Good idea might be to use Area Feature of Asp.NET MVC. Area generally used for the purpose of sepration of user base, like in your case Public user and admin user.
Well explained details of area's can be found on following documentation.
http://msdn.microsoft.com/en-us/library/ee671793%28VS.100%29.aspx
Regarding the different themes for Admin and user web app, you can simply use different Layouts. Put two layout inside the View > Shared folder. Then specify layout on each view as below.
For User Views
Layout = "~/Views/Shared/_UserLayout.cshtml";
For Admin Views
Layout = "~/Views/Shared/_AdminLayout.cshtml";
Possible Solution 2:
if your project is big enough to think it will be difficult to handle the Areas later in a single project, you can also split the User and Admin project.
But you should be aware of re-usability of the source code by placing such code (such as Models) in other projects and adding reference.
I hope this solves your problem.