I have a single-page application and I have all my internal links working with ng-click, which dynamically loads data into ng-view. I'm trying to figure out how to handle inbound links from outside the app, for example a link to 'ROOT_PATH.com/#/posts/250'.
My $routeProvider catches the route and correctly loads the specific post data. From that point, when I click on the posts index ng-click link, it correctly loads and shows the posts index, but the route is still 'ROOT_PATH.com/#/posts/250'.
I'd like the app to always show the root path. Or at least always show the root path when posts index is displayed.
$routeProvider.when('/posts/:postId', { templateUrl: '../assets/mainIndex.html', controller: 'PostCtrl' } )
# Default
$routeProvider.otherwise({ templateUrl: '../assets/mainIndex.html', controller: 'IndexCtrl' } )
Related
I have a rails app with dashboard page. So the page will be http://mywebsite.com/dashboard. It has few links available which will load pages via ajax and show it in a div section inside the dashboard page. Its all working fine. So lets assume I want to use angular here and I specify code like below.
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
})
My doubt is that:
So in here if dashboard is the root url then the url generated is http://mywebsite.com/#route1
What if my dashboard page is defined like this
http://mywebsite.com/dashboard and I want to define route like http://mywebsite.com/dashboard/#route1
Note: Its not a single page application. But I want the dashboard page
to be like a single page one..
This will work fine and the route will be relative to your URL
http://mywebsite.com/dashboard.
If you were using HTML5 mode with Angular UI router if you try and interoperate the full URL. But because you are not using HTML5 mode, Angular UI router routes using #.
I just have started working on angular js . I have defined my routing as below
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider.when("/activityRegs",
{
templateUrl: "Controller/Action",
controller: "activityController"
});
$routeProvider.when("/searchActivity",
{
templateUrl: "Controller/Action2",
controller: "activityController"
});
$routeProvider.otherwise(
{
redirectTo: "/"
});
This is working pretty good . But if I press F5 to hard refresh the page it gives me resource not found which is pretty obvious . But I am not sure how I can handle this type of errors . If I am on Page2 and i hit F5 then I want my page2 to be refreshed instead of any error .r
This error is likely to happen as you are having # tag there in URL. remove it. and make sure when you refresh your page, your MVC action is called properly through MVC routes. else part will be done by angular itself.
lets say,
My MVC route is defined to HomeController and Index method (default setting).
I have loaded ng-view/ui-view within index.cshtml.
Now when I refresh page with f5, "Home" controller and "Index" method are called (Default setting).
I'm having some trouble with routing in Angular.js and MVC5. I've simplified it down to the example below.
My angular routing code is:
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
template: "<h1>index</h1>",
})
.when("/Home/About", {
template: "<h1>about</h1>",
})
.when("/Home/Contact", {
template: "<h1>contact</h1>",
})
.otherwise({
template: "<h1>Error</h1>",
});
}]);
The MVC Home controller has a method for each, and each view has a DIV with ng-view attribute.
When I browse to either about or contact the route is still mapping to Index.
If I change the index path to :
$routeProvider.when("/Home/Index", {
template: "<h1>index</h1>",
})
then Otherwise kicks in and I see Error.
The code looks identical to other angular code I've used, and examples on the web. Any suggestions?
Updated: Thanks to the answers below. I think I didn't explain my problem well last night, the result of a long day. My problem is that I'm trying to have a mini-spa on a sub page of the site, so the route for the main page would be:
.when("/userPermissions/index", {
templateUrl: "/scripts/bookApp/userPermissions/main.html",
controller: "userPermissionController",
})
And the path of "/userPermissions/index" which would be the page provided by the server isn't being matched by the routing.
Angular is by design a Single Page Application (SPA) framework. It is designed to process requests within a single server page request, and handle route changes without making subsequent calls to the server. Hence, for every page load, the page is at the "root" of the application. or /, no matter what path was used on the server to load the page.
Subsequent page loads and routing are handled using the 'hash' notation /#/someroute in order to suppress a browser reload. Thus, the actual route being matched by the angular $routeProvider is http://example.com/#/Home/About, but this is loaded from the / server route.
If you redirect the page to /Home/About on the server, but still want to get to that match in Angular, then the route would be http://example.com/Home/About#/Home/About. Quite problematic, as you can imagine.
HTML5 Routing Mode can be used to remove the #/ from your routes, Allowing you to match http://example.com/Home/About in the Angular $routeProvider. But, for Angular to really shine, you should also configure Rewrites on your server, and not handle these Routes as separate views in your ASP.Net application. Generally, you will have a much cleaner solution if you can restrict server communications to API calls, as mixing Server HTML (or Razor) with Client Side Angular gets very confusing very fast.
I would suggest you to create one base for your angular SPA.
That means you will need to create a C# controller inside your application that will have one action i.e. Index
SPAController.cs
using System.Web.Mvc;
namespace AngularApp.Controllers
{
public class SPAController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Views/SPA/Index
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div ng-view></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
Now all is set hit html ng-view will load partial view by watching route.
Hit in browser http://anything.com/spa/#/. Then your angular app will start working on page.
I would not suggest you to use html5mode() inside MVC app. That will create many problem inside your app. And it will take more time to manipulate things.
Thanks.
I have an application with various screens. Each screen is assigned a URL, such as #, mails, contacts, and so on.
In my main HTML file I have an ng-view element which updates according to the route the user selects. So far, so good.
Now some of these screens have a sub-navigation. E.g., #mails does have an inbox and a sent folder. They present themselfes with two columns: The sub-navigation on the left, the mails of the appropriate folder on the right.
When you navigate to #mails, it shall redirect you to #mails/inbox, so that basically inbox is the default sub-view for mails.
How could I set this up?
The only approach I can currently think of (I am quite new to AngularJS, hence forgive me if this question is a little bit naive) is to have two views, one for #mails/inbox, and the other for #mails/sent.
When you select a route, these views are loaded. When you select #mails it simply redirects you to #mails/inbox.
But this means that both views must use an ng-include for the sub-navigation. Somehow this feels wrong to me.
What I'd like more is to have nested views: The top one switches between screens such as mails, contacts, and so on, and the bottom one changes between sub-views such as inbox, sent, and so on.
How would I solve this?
AngularJS ui-router solved my issues :-)
Another library to check out: http://angular-route-segment.com
You can use it instead of built-in ng-view and $route.
Sample route config looks like this one:
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
Hi have an angluar route that looks like this
app.config ($routeProvider, $locationProvider) ->
$locationProvider.html5Mode(true);
$routeProvider.when("/",
{
templateUrl: "assets/pages/partials/home_controls.html"
controller: MapCtrl
}
).when("/products/business",
{
templateUrl: "../assets/pages/partials/business_controls.html"
controller: MapCtrl
}
).when("/products/search",
{
templateUrl: "../assets/pages/partials/search_controls.html"
controller: MapCtrl
}
)
Its works really well. And loads the partials inside an
When these pages load from the address input or page refresh they load fine
However if I have a link controlled by a Rails view for example, it only loads the AngularJS Partial and does not change the Rails page. For example:
<%= render :partial => "pages/partials/map"%>
The Angular code is loading inside that partrial, other surrounding layouts control the Nav's etc...
Its odd because a link to a page only loads Angular but a fresh address loads everything okay
Maybe it happens because of
$locationProvider.html5Mode(true);
Are you sure your browser realy asks your rails server to give it the page?