Develop Reference

Why is $routeParams not working? Undefined

I'm triyng to build simple applications on Angular and Django rest framework.
I have a next root app:
app.js
angular
.module('sharePhotoApp', [
'ngRoute',
'sharePhotoApp.controllers',
'sharePhotoApp.services'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/',
controller: 'PostListController'
})
.when('/:username', {
templateUrl: '/user/',
controller: 'UserDetailController'
})
.otherwise({
redirectTo: '/'
});
}]);
And the next controller:
angular
.module('sharePhotoApp.controllers')
.controller('UserDetailController', UserDetailController)
UserDetailController.$inject = ['$scope','$routeParams','userService'];
function UserDetailController($scope, $routeParams, userService){
alert($routeParams.username);
$scope.user = userService.get({ username: $routeParams.username });
}
I tried to follow the next URL in browser: http://127.0.0.1:8000/user/#/admin
I suppose in this case should triggered route with username parameter.
But I've gotten undefined.
Could anyone explain where I done mistake?

"Note that the $routeParams are only updated after a route change
completes successfully. This means that you cannot rely on
$routeParams being correct in route resolve functions. Instead you can
use $route.current.params to access the new route's parameters."
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Have you also installed ngRoute module?
As the description says, the route is not finished in your controller, so the params are also undefined.
$scope.$on('$routeChangeSuccess', function() {
// $routeParams should be populated here
});
should do the work.

How to use angularjs routeProvider with MVC plugins

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

routing with angular js and expressjs

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: '/'});

Redirecting outside of ng-view in Angular using ngRoute

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?

AngularJS Routes with Rails

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