I'm trying to use angularjs routing within a Rails application but I'm having some difficulty. I've split up my page into partials (called _events.html.erb, _categories.html.erb, and _times.html.erb) and I'm set up my routing in my js file like so:
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/meetups/new/categories', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/times', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/events', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
otherwise({
redirectTo: '??'
});
}]);
My only problem is that I can't figure out what I should put as the template URLs since I can't seem to access the files from a URL in any way.
Any ideas how to make this work? Or better yet, some best practices around the issue
Related
I'm working on an plugin-based MVC application and I want to use angularjs as route provider. (I'm newbie in angular.) I have specified the necessary information in my app.js and it's working properly for those views, which are in the same project (i.e. /home):
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'Home/Index',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'Plugin.App/Home/About',
controller: 'aboutController'
})
.otherwise({
redirectTo: 'Home/SomeLocation'
});
});
app.controller('mainController', mainController);
app.controller('aboutController', aboutController);
But, when I tried to locate any partial view from my plugin, I got 404. Do you have any suggestion to solve this situation?
Thanks for any help in advance!
Craig85
i have the following routing:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/site/pages/views/Admins/index.php'
}).
otherwise({
redirectTo: '/'
});
}])
however in my console i get the following:
GET http://example.com/site/pages/views/Admins/index.php 403 (Forbidden)
Can anyone tell me why this is happening?
I can tell you that i have given rights to both the view and the folder my angular project is to both Read, Write, Delete
Have you got any authentication on server side? It seems like your php code is validating request and returning response with code 403 (probably, not authenticated). What is the result when you paste http://example.com/site/pages/views/Admins/index.php in browser?
You can try attach controller, and then in controller make $http.get request and send proper data to backend to authenticate
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'basetpl.html',
controller: 'MyController'
}).
otherwise({
redirectTo: '/'
});
}])
I am trying to start a project with express and angularjs. I was following this guide.
On first go i.e running localhost:3000, I am loading my index.jade file inside views directory successfully.
index.jade
extends layout
block content
div
ng-view
include footerjs
footerjs.jade
script(src="/javascripts/angular.min.js")
script(src="/javascripts/angular-route.js")
script(src="/javascripts/angular-resource.js")
script(src="/javascripts/app.js")
script(src="/javascripts/task.js")
views directory has a folder called partials. inside this folder I have added two templates. "task.jade" and "landing.jade".
my app.js
var mainApp = angular.module('mainApp', ['ngRoute', 'taskApp', "ngResource", 'ui.router' ]);
mainApp.config(['$routeProvider', '$locationProvider',function(routeProvider, locationProvider) {
locationProvider.html5Mode(true);
routeProvider
.when('/', {
templateUrl: 'partials/landing',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});
}]);
and I have made an express route as:
router.get('/partials/:urlName', function(req, res) {
res.render('partials/'+req.params.urlName);
});
I am not able to route any partials. I am stuck at my layout at initial and an error 404 on trying to route /task. any help would be greatly appreciated.
You should include the file extension in templateUrl:
routeProvider
.when('/', {
templateUrl: 'partials/landing.jade',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task.jade',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});
I'm on an Angular project and I'm using the default ngRoute for routing.
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'main',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'account/login',
controller: "loginController"
})
.otherwise({
redirectTo: '/'
});
});
When I redirect to the login page, the login page appears as a partial view within my index.html page. However, I want the login form to appear within its own html page (without the headers and footers that exist on the other pages). Is it possible to achieve this using ngRoute, or do I need to switch to using ui-router?
I am trying to create an Angular app in multiple languages but I have come across and issue with the routing. I found a workaround to make the necessary routes valid for 2 languages :
var app = angular.module("app", ["localization", "ngResource", "ngRoute"]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/en-US/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
when('/da-DK/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
when('/en-US/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
when('/da-DK/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
when('/en-US/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
when('/da-DK/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
otherwise({ redirectTo: '/en-US/Gameplan/Admin/Fixtures/List' });
$locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
});
However, I still have an issue with links, currently my links look like this :
<i class="glyphicon glyphicon-plus"></i>
<i class="glyphicon glyphicon-edit"></i>
I don't want to hard code the URL and I have a client side object that returns the locale (in this case either en-US or da-DK), but I have been unable to dynamically set the href values. Is there any way to do this in Angular, or a different approach altogether regarding localizing routes?
This isn't AngularJS specific, but why not set a cookie as soon as you know what language the user wants for the UI? Then both the client and server have ready access to it on every page and you don't have to shuttle it around in the URL.
This might be too late, but in case you are using Angular 2x there is a library localize-router. You can find it here.