I am trying to load a yeoman angular app only once the user hits a specific page inside of express (e.g. '/dashboad').
The end goal is to have multiple static front pages on express without using angular. Then I would use the angular routes/ application once a user has logged in.
I have successfully followed Yeoman inside ExpressJS
but this boots up angular right from the start and does not allow routing to any express html pages.
We already chatted about this in person, but the answer here is to not have your Angular app be the base route in Express. You would have separate routes in Express for each of the static pages and finally one route for the Angular page. For example:
/ => /index.html
/dashboard/ => /dashboard.html (this is the Angular app)
/faq/ => faq.html
As long as the Angular app script is not loaded outside the one Angular route, everything will work as you expect.
Related
I have an AngularJS application, which I'm in the process of converting to a hybrid Angular/AngularJS application using ngUpgrade. The AngularJS application is unusual in that it doesn't use the AngularJS or Angular UI router - instead it has its own hand-rolled navigation solution, which doesn't update the URL displayed in the browser, or interact with the browser's history API. So far, so good.
I want to start using the Angular Router in the hybrid application, but initially only for new pages.
To get the 2 parts of the application - Angular and AngularJS - interoperating with each other, I have downgraded the Angular Router service and injected it into one of my AngularJS services, so that I can call Router.navigateByUrl() to navigate to a new Angular page component, from my AngularJS code.
This works correctly - the Angular page component is added to my <router-outlet> and is displayed in the browser as expected.
Strangely though, the browser URL does not change. When I enable tracing for the Router, I can see the new route being correctly processed, and the new page is displayed in the browser, but the browser URL still shows the old route. Also, if I look at the browser history, the new route has not been added to it.
I've tried injecting NgZone into my AngularJS service and calling Router.navigateByUrl() inside NgZone.run(), but it doesn't make any difference.
When I call Router.navigateByUrl() from my Angular code, everything works fine - except when I do this after I've done it from AngularJS, when I then see the same symptoms. It's as if calling the Router directly from AngularJS is somehow breaking the link between the route and the browser URL bar.
Can anyone help please...?
So the issue was that the AngularJS $location service wasn't being updated when the route changed, leaving a disparity between its value and the value being displayed in the browser. There was also a watch in this service which was being triggered in every digest cycle, that was then resetting the browser url from the value in the $location service!
Turns out this was because I needed to configure the Unified Angular Location Service in my AppModule viz:
imports: [
LocationUpgradeModule.config()
]
and downgrade the $locationShim service for injection into AngularJS viz:
angularJS.module('my-app')
.factory('$location', downgradeInjectable($locationShim));
I have an MVC Razor app that I have just converted to a Single Page Application using AngularJS and Angular UI Router.
I have a problem in that when I go to a URL (via a refresh) such as /settings/options MVC attempts to look for the Options() method on the Settings controller. Once the page has finished loading the Angular routing takes over and shows the correct page.
Because my layout page HAS to have a RenderBody() call (else an exception is thrown) I end up with my page looking correct but having a 404 page at the bottom. The 404 is rendered into RenderBody because it cannot find the Options() method on the Settings controller
How can I fix this? I presume using some kind of MVC Routing but not sure where to start. Here is my current route
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
}
This question has a similar problem except they use WebAPI and I have my endpoints within a normal controller. If I use the solution here all my AJAX requests get redirected too
I feel like this question (How to use ASP.NET MVC and AngularJS routing?) might help you. They're using different "Areas" of the site, but it's the same concept for the routing.
You could also look into the URL Rewriter for IIS config and use that to make rules to always route your SPA requests to the angular app...
How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?
I am doing an ASP.NET MVC 5 website with AngularJS.
I want to have a web site (SEO) and a web application site (AngularJS).
I want to switch to the SPA via "Go to SPA" link.
I want to switch back to the website via click on the home/house icon on the SPA.
When I do this switching I want to exchange the whole layout.
How would I do this with asp.net mvc?
Write your website as you would a standard MVC app. Then write an MVC controller that returns the .cshtml file of your angular app and set Layout = null; at the top. With this approach you can access everything through the .NET MVC routing and controllers and your angular app doesn't have any of your MVC layout in it.
Just create two main .cshtml files. One cshtml for the regular app, and the second for the angular app with ng-view.
Now about swithcing from one file to another use window.location.href = 'your-cshtml-file'.
Routing functionality is defined in both ExpressJS thru app.get('/*') and in AngularJS thru
$routeProvider.
when('/*
What is the case scenario for needing to define routes thru both?
Part 2.
Server and Client Communication in AngularJS takes place thru REST API ? ( can it be handled thru socket.io?)
Part 1
Angular is only on the front end, so if you need to make calls to your database (getting data or posting data), it'll likely go through a route that the backend (Express) created (app.get, app.post).
If all your data is coming from someone else's site (API) and you don't need to store anything, then in that case you might not need any routes on the back end.
It really depends on what you're building. If I build a 'to do' list, I can have a 'Tasks' and 'Completed Tasks' page using Angular routes and then post and get routes in ExpressJS. You can also have multiple SPA (single page applications) on Express in turn you may need another Angular module that will have it's own routes.
Answer to your Part 2.
AngularJS using SocketIO
AngularJS is an SPA (Single Page Application) framework. For SPAs which need pages to be loaded can be used to route thru Angular so
when('SPA1/...
to define particular SPA which may be subset of your total app can be routed thru Angular. Where as your regular routes app.get('/home ... can be done thru ExpressJS.
I'm having trouble with the routing, it's all works fine when I route between pages using
<a href="/someurl"> on the page.
When I input the link directly into the browser with the # like http://localhost/#/someurl it works fine also.
But if I enter it without the # like http://localhost/someurl I get Cannot GET /task/2
I'm using the HTML5 mode in angular $locationProvider.html5Mode(true); The backend is Web API build with MVC4 C# so only routing is controlled with app.js (angular)
If you want to use the $locationProvider's html5Mode, you'll have to couple it with some server tweaks so that your web server knows to serve up the same content regardless of path.
If you're using Apache for example, you can use mod_rewrite.