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?
Related
I am building a custom angular app in Grails, but sticking as much as possible to the default Grails Controller View behaviour.
What I'm trying to do is: using the scaffolding controller. Get the same behaviour but by ading a #/ to the start of the url. So that after you save a Record, you'd be redirected to:
http://localhost:8080/#/country/show/5
instead of
http://localhost:8080/country/show/5
So that Angular kicks in again. I know this isn't the standard Angular behaviour but I'm trying to use as few angular files as possible since I have very little knowledge in angular.
The default scaffolding redirect is:
redirect country
And I tried using:
redirect base: "#/", country
redirect country, [base: "#/"]
redirect country, base: "#/"
redirect absolute: "#/", country
But they all throw 500 error when called.
This is my current app config in angular:
app.config(function($routeProvider) {
$routeProvider.when("/:controller/:action",{
templateUrl:function(params){
return '/'+params.controller+'/'+params.action;
}
})
.when("/:controller/:action/:param",{
templateUrl:function(params){
return '/'+params.controller+'/'+params.action+'/'+params.param;
}
});
});
Have you tried this?
class SomeController {
LinkGenerator linkGenerator
def action() {
redirect uri: linkGenerator.link(
controller: 'country', action: 'show', id: 5, base: '/#')
}
}
UPDATE: Given the requirement to support multiple formats, teaching angular to work with "pretty" URLs might be the only way. Here is an example posting that has the following code:
angular.module('scotchy', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
I ended up giving up on angular entirely. To show the views inside a dialog I just extract the html segment from the response returned from the server and I get all the default behaviour that Grails includes out of the box.
Since grails is a full stack framework and it's front end is highly customizable. Unless you want to build an entire angular app it's not worth replacing the front end with angular just for it's single view capabilities.
The server responses may be slightly bigger than what I need to show inside a dialog, but it doesn't hurt performance. And the controllers don't know if their views are being rendered inside a dialog or as a full web page, which is what I wanted in the first place.
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 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' } )
I'm totally new to AngularJS. Just wanted to try out relative URLs with $routeProvider.
Here is the scenario:
I have a "Edit" page, the ASP.NET MVC link to the page would be:
http://localhost/Workflow/Edit
So the ASP.NET MVC Controller is "WorkflowController" and the action is "Edit". For the Partials I have Controller actions that each return a Partial View like this:
public ActionResult WorkflowTransition()
{
return PartialView("WorkflowTransition");
}
public ActionResult WorkflowTransitionApprovers()
{
return PartialView("WorkflowTransitionApprovers");
}
Following is the AngularJS module configuration - note: a PartialView (as mentioned above) is called for each of the routes (this could be incorrect):
$routeProvider.when('Workflow/WorkflowTransition', {
templateUrl: '/Workflow/WorkflowTransition',
controller: 'transitionCtrl',
});
$routeProvider.when('Workflow/WorkflowTransitionApprovers', {
templateUrl: '/Workflow/WorkflowTransitionApprovers',
controller: 'approversCtrl'
$routeProvider.otherwise({
redirectTo: '/'
});
Note: I have not specified either of the following:
$locationProvider.html5Mode(false);
OR
$locationProvider.html5Mode(false).hashPrefix('!');
The href links are specified like this:
{{workflow.Identifier}}
This generates links of this form:
http://localhost/Workflow/Edit#/Workflow/WorkflowTransition
This is obviously wrong (and clicking the link doesn't do anything probably because the browser tried to navigate to the hash), so I have tried the leading '/', but no luck there too:
{{workflow.Identifier}}
If I navigate the partial directly i.e. http://localhost/Workflow/WorkflowTransition, the browser renders the html as-is (along with the angularjs curly braces {{}}).
My question is: How does AngularJS treat the '#' or '#!' when it comes to determining relative URLs? For e.g. does this route (assuming I knock off the /Edit part from the URL in the anchor tag):
$routeProvider.when('Workflow/WorkflowTransition', match the URL:
http://localhost/Workflow/#WorkflowTransition ?
Does it remove the '#' from the URL and then check it against the URL pattern in $routeProvider.when() ?
Can someone please suggest correct routes for the relative URLs?
From my observation, the hash has to be removed when matching routes. I have a link like
<a href="#Objects">
resulting in the URL
http://localhost:55033/#/Objects
My route Setup is
$routeProvider.when("/Objects", {
templateUrl: "objects.html",
controller: ObjectCtrl
});
And this works as expected, pulling in the correct partial. Note that I am not Rendering partials through ASP.NET MVC Controllers in this case. Instead I have objects.html lying around as plain html file and I am using the hash in the href so the ASP.NET MVC Routing does not kick in.
Routeprovide should be setup like below.
$routeProvider.when('/Workflow/WorkflowTransition', {
templateUrl: "WorkflowTransition.html",
controller: WorkflowTransitionCtrl
});
and URL should be enter in below formate.
http://localhost/#/Workflow/WorkflowTransition ?