I have module Board with routes:
#Board.config ($routeProvider, $httpProvider,$locationProvider)->
# Code
$routeProvider
.when '/boards/:board_id/topics/new', {
templateUrl: (p) -> "/boards/#{p.board_id}/topics/new"
controller: 'TopicsNewCtrl'
}
.when '/boards/:board_id', {
templateUrl: (p) -> "/boards/#{p.board_id}"
controller: 'BoardsShowCtrl'
}
.when '/boards', {
templateUrl: "/boards"
controller: 'BoardsShowCtrl'
}
When I go to /boards/common, controller BoardShowCtrl executed correctly, but when I go to /boards/common/topics/new request goes directly to my Rails backend instead of angular routing. Here is my controller:
#Board.controller 'TopicsNewCtrl', [
"$scope"
"$routeParams"
"$http"
"topicsFctr"
($scope, $routeParams, $http, topicsFctr) ->
$scope.board_id = $routeParams.board_id
]
I can't find an error in my code, it works with other controllers and templates. If you need some additional data - just ask.
Thank you for your answers!
P.S. Sorry for my English. It is so bad, I know :)
Resolved! There was another module with routing, matches my urls. It was so simple... and so stupid.
Related
I am wondering how to work angularjs ngRoute and htaccess rewrite together.
I have ngRoute working so I get URLs like these:
http://domain.com/#/something/somestring
But I would very much like this result:
http://domain.com/something/somestring
In other words, I'd like to get rid of /# in my URLs.
I've done this before with .htaccess and mod_rewrite.c and PHP, but I have no clue how to achieve the same result with AngularJS.
Any pointers, tutorial-links, articles, etc. that explains how this can be done, or simply an example would be greatly appreciated.
A few requirements:
I should still be able to do my routing the same way I've done so far:
blogApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/home',
templateUrl: './assets/templates/page.html',
controller: 'mainCtrl'
});
}]);
The URL query string, like :pagePermaLink should still be accessible from the scope:
blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var foo = $routeParams.pagePermaLink;
// ...
}]);
If you've already done your rewrites, you should just be able to set $locationProvider.html5Mode(true). See https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Also, similar stack overflow questions might be of assistance:
Angular Direct Url without hash
$location / switching between html5 and hashbang mode / link rewriting
Using Angular I have a dozen or so routes setup similar to the following example code.
Is there a way to override which template and controller is loaded based on some other criteria while keeping the URL in tact? My goal is to display a login page when... lets say $scope.isLoggedIn = false. I don't want to change the URL to /login.
SomeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/place', {
templateUrl: 'routes/place.html',
controller: 'PlaceCtrl'
})
.when('/test', {
templateUrl: 'routes/test.html',
controller: 'TestCtrl'
});
}]);
ngRoute is a very simple library that can basically only maps urls to controller/views. If you want more flexibility, try ui-router which has the ability to route based on state.
This isn't really doable with ngRoute, but with ui-router you can dynamically provide different templates based on just about anything you want.
$stateProvider.state('root',
url: '/'
controller: 'HomePageController'
templateProvider: [
'$rootScope'
'$templateCache'
'$http'
($rootScope, $templateCache, $http) ->
templateId = if $rootScope.isLoggedIn then "home-page-logged-in" else "home-page-not-logged-in"
templateId = "/templates/#{templateId}.html"
return $http.get(templateId, cache: $templateCache)
]
)
The catch is, as far as I know, you can't change the controller, only the template. Which kinda stinks.
I'm pretty new to Angular but loving it! I am trying to create a modal dialog to display a partial view. ui.bootstap.modal has an option which takes the URL to the partial view to be displayed. I have a route configured on my application module that looks like this:
angular.module('buggy').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/lists', {
templateUrl: 'views/lists/list.html'
}).
when('/lists/create', {
templateUrl: 'views/lists/create.html'
}).
when('/lists/:listId', {
templateUrl: 'views/lists/partials/view.html'
}). //more stuff
I would like to show the partial template defined as when(/lists/:listId) from the above routes. So in my controller I'm attempting to open the modal dialog like so:
$scope.showList = function (list) {
$modal.open({
templateUrl:'lists/' + list._id,
scope:$scope
});
}
The modal dialog opens but the contents are just [object]. Do I need to define the route on the server side or can I use Angular routing to return the partial?
Thanks!
My understanding of the $routeProvider was flawed. I blame years of jQuery'n ;) I've got it working now. I believe the $routeProvider was returning an instance of the controller defined in my module configuration; not the actually template. I've changed my code like so:
$scope.showList = function (list) {
$scope.currentList = list;
$modal.open({
templateUrl: 'views/lists/modals/view.html',
backdrop: false,
scope: $scope,
controller: 'modalCtrl'
});
}
If this is not a good solution.. please comment. I have a lot to learn about Angular yet.
Thanks!
I'm working on an Angular.js application. It has 7 "pages" that make up a report about backlinks. The main url looks like http://www.site.com/report/# so the first route below '/' points to that URL.
My problem is I want to have the report ID in the url. So something like this. http://www.site.com/report/#/:reportId or http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14.
I need to access that ID and store it somehow for each page. So on http://www.site.com/report/#/live I still need access to reportID.
Im sure this is a simple thing but Im an Angular noob. Can someone point me towards a tutorial for this? Here's what I have so far.
'use strict';
// Declare app level module which depends on filters, and services
var ultModule = angular.module('ultimate-report', ['ngRoute', 'ngCookies', 'ngTable', 'ultimate.filters','ultimate.services','ultimate.directives','myApp.controllers', 'ultimate.config']);
ultModule.config(['$routeProvider', function($routeProvider, $routeParams) {
$routeProvider
.when('/', {templateUrl: '../partials/report/about.html', controller: 'CtrlReport'})
.when('/live', {templateUrl: '../partials/report/links-live.html', controller: 'CtrlLinksLive'})
.when('/dead', {templateUrl: '../partials/report/links-dead.html', controller: 'CtrlReport'})
.when('/selected', {templateUrl: '../partials/report/links-selected.html', controller: 'CtrlReport'})
.when('/patterns', {templateUrl: '../partials/report/patterns.html', controller: 'CtrlReport'})
.when('/exports', {templateUrl: '../partials/report/export.html', controller: 'CtrlReport'})
.when('/help', {templateUrl: '../partials/report/help.html', controller: 'CtrlReport'})
.otherwise({redirectTo: '/'});
}]);
So do you really want the other urls (e.g. http://www.site.com/report/#/live) to not have the report id in them? It would be a lot easier/shorter if you had the parameters in each adress (e.g. http://www.site.com/report/#/12334223287/live).
Nonetheless, I would create my own service ('ReportID') that just stores the report ID. And then include both $routeParams and ReportID (your service) as dependencies in your controller.
app.controller('CtrlReport', ['$routeParams', 'ReportID', '$scope'],
function($routeParams, ReportID, $scope){
ReportID.id = $routeParams.reportID;
})
and set up your route as such
.when('/report/:reportID', ...)
Angular ui-router is a great extension to Angular.js that makes it easy to handle route parameters, nested views etc.
As others have pointed out, keeping the ID in the url for all pages is a good idea - without that people cannot bookmark the page and go straight back to viewing the same item in the same view.
I am just getting started with an angular project. We have a number of simple views and controllers, and have been using the mechanism provided by $routeProvider to map controllers to views. Upon updating to angular v1.2.0 the $routeProvider mechanism appears to be gone and replaced with something better. However, I have not been able to find a coherent code example showing how to make the switch.
What I have looks like this:
theApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})...
What has that changed to?
Thanks
It is still $routeProvider, but they moved it out into a module. You need to add it to the list of dependencies for your app by injecting 'ngRoute'.
You can get the routing module with the others for http://code.angularjs.org/1.2.0-rc.2/
here.