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 #.
Related
I am using Rails, angular-rails-templates gem, Angular 1.4.8 and http://likeastore.github.io/ngDialog/.
My project structure keeps my template files in app/assets/javascripts/templates and my angular project in app/assets/javascripts/angular-app. I have set up ng-modal as:
$scope.callModal = function () {
ngDialog.open({
template: 'tickets/partials/_resolve.html',
controller: 'TicketEditController',
scope: $scope
});
};
I have a template called _resolve.html.erb inside my app/assets/javascripts/templates/partials/_resolve.html.erb. The issue is that whenever I press on the button who ng-click the function, I see a GET request to /tickets/partials/_resolve.html so it doesn't actual render the template but just makes an http request to that uri.
The modal pops up but displays the whole root page (not the template).
How can I make this work?
try moving your html file to a directory app/assets/templates/partials/_resolve.html. Unless you have your templates configured differently than angular rails templates suggests in their documentation
I have a Rails application in which I am trying to replace some views with AngularJS, but not all. In each view I replace, I want it to basically act as if it is it's own SPA. I am also trying to use ui-router to manage states within each of these SPAs.
For example, I have a Rails route that maps to a view ".../checkout/1. This triggers a Rails view in which I load the initial SPA for the flow and then let angular take over. I would like to setup ui-router states that are just specific to this checkout flow.
Where I am getting stuck is how to have states that are only specific for that flow with that base url. If I setup the states:
$stateProvider
.state('start', {
url: "/",
templateUrl: "..."
})
.state('route2', {
url: "/route2",
templateUrl: "..."
})
.state('route3', {
url: "/route3",
templateUrl: "..."
});
This works and for .../checkout/1#/, .../checkout/1#/route2, .../checkout/1#/route3.
However, it also work in my other SPA views which I do not want. So, if I do another rails view that uses another SPA, e.g. .../item/1 then the above route will also work for .../item/1#/ and .../item/1#/route2, etc.
Instead, I would like each to be it's own SPA and not conflict with each other. I am not sure how to do this. Can ui-router be somehow namespaced using the base url or can I have independent SPAs that have different stateProviders? Any thoughts on how I should go about this?
Thanks
Each SPA should have its own angular module defining an application with its own state definitions. So there can't be any conflict.
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.
Hi I am working on a SPA application using the Hot Towel template and asp.net MVC.My applications home page is curently set to point to the Home and Index controller in RouteConfig.cs.
I have to change that route to point to a Durandel view.
This link should be the one that opens my homepage:
http://localhost:61620/Home/MyCourses#/dashboard
If it was asp.net mvc I would set it in RouteConfig.cs.If that is still the case how can I do that?If not where should I set this?
Typically, in a Durandal-based SPA, there is code in the shell's activate function that uses the router to activate the "home" page. In a Hot Towel template, this code is in the shell's boot() function. This code normally looks like this:
function activate() {
return boot();
}
function boot() {
... //router setup
return router.activate('home');
}
This sets up the app so that, when the user browses to http://localhost:61620/Home/MyCourses#/, the app will load the dashboard route automatically, even though it may not be part of the literal url.
as in the title
we're firing
$('#id').load('someUrl', function(){/*some stuff*/});
But it seems to be being passed to the login form because it's not logged in?!
The user is logged in. Is this normal?
This happened to me too, but the cause was not that ajax is going crazy - which it may look like - but that the URL was not correct.
The website was initially hosted on localhost, without any alias, so I had a working URL like localhost/controller/action.
Then I moved the website under an alias - so the website's URL was localhost/alias. At this point, two strange things happaned to SOME ajax requests:
- the requests were prompted for authentication (the website was using windows authentication)
- the requests' session was different than the one of the page which launched the request
The problem was that some URLs were hardcoded in the js code. So we had code like "url: '/controller/action'" in the ajax calls code, and this URL didn't take into consideration the alias under which the website was hosted in IIS.
The solution was to declare a js variable in the page and assign it the URL built the right way, with Url.Action, and then use the variable in the ajax call:
Page:
<script type="text/javascript">
var ajaxUrl = '#Url.Action("actionname", "controllername")';
</script>
Js file:
$.ajax({
type: 'POST',
url: ajaxUrl,
...