I have a route with parameter like this
var app = angular.module("myapp", ["ngRoute"]);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!").html5Mode(true);
$routeProvider
.when('/sukien', { templateUrl: '/app/views/sukien/index.html' , controller: 'eventCtrl' })
.when('/sukien/:id', { templateUrl: function (params) { return '/app/views/sukien/index.html?id=' + params.id }, controller: 'eventCtrl' })
}])
why /sukien works and /sukien/:id doesn't ? indeed, angularjs seems not to understand what it is. "Uncaught TypeError: undefined is not a function"
/sukien/333 => failed to work.
You are mixing template url, state of your application and search parameters it seems.
The templateUrl tells angularjs where to look for the html file : it will very unlikely depend on the params.id and be set via a function, but will rather be a constant.
It has nothing to see with the url that the user sees in their browser.
For example : '/app/views/sukien/suiken.html'
The url the user sees will be something like :
.../suiken/1223445
And you can then access the id in your controller via $routeParams.id
Related
I'm learning AngularJs at present and I've hit a brick wall due to my lack of knowledge on it.
What I'm trying to do is pass in a Id (guid) within the URL and inside my controller I'll retrieve it and pass it to a WebApi to return some data linked to that Id.
However I'm unable to get the route correct, my currently URL looks like this:
http://localhost:15216/
When I pass in the Id it will look something like this
http://localhost:15216/573637
Quite straight forward, my page is called index.html, after browsing the web and looking at this question and basically replicating what he/she has provided I'm still unable to retrieve the value from my URL.
This is my current configuration:
var myApp = angular.module('christmasvip', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller: 'mainController' }).
otherwise({ redirectTo: '/index.html' });
}]);
And this is my Controller:
myApp.controller("mainController", function ($scope, $http, $routeParams) {
var userId = $routeParams.userId;
alert(userId);
});
I then manipulate the URL so it would look like :
http://localhost:15216/573637
But when I alert the userId it say's "underfined"
I've also included angular-route.js in my project
Any help/solution would be great.
In the documentation of ngRoute you can find an example... Try using the URL: http://localhost:15216/index.html#/573637
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
Can you try the url
http://localhost:15216/#/573637
I assume your root is http://localhost:15216/
your confusing the $routeProvider in the config you say
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller:'mainController' }).
so your telling it, "if we see any url like this '/anything' take 'anything' and supply it as a parameter to the $routeParam service
then you add
otherwise({ redirectTo: '/index.html' });
which tells it, if you get any other url redirect to "/index.html", but index.html is something so its going to want to route you to '/' with the route param as 'index.html'
also you need to make sure you have <ng-view></ng-view> inside of your index.html file for the $routeProvider to load the route correctly, that is probably your main issue, but the first thing i mentioned would probably be an error once you add it.
I am using the Angular $routeProvider service to wire-up my single-page HTML5 applciation. I am using the following routing configuration:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/show-order/:orderId', {
templateUrl: 'templates/order.html',
controller: 'ShowOrdersController'
});
}]);
Within the ShowOrdersController I need access to the RESTful URL parameter described above as :orderId. It is suggested that to best achieve this, I should use the $routeParams service in my controller:
app.controller('ShowOrderController', function($scope, $routeParams) {
$scope.order_id = $routeParams.orderId;
});
I have serious concerns about this. My routing logic has now bled through to my controller! If I want to drastically change the routing scheme, I would have to go through all my controller code and correct all the references to $routeParams.
Furthermore, if I want to re-use the ShowOrderController for multiple routes, it's going to enforce all of the routes to use the same token variable :orderId.
This just seems like poor coding to me. It would make more sense to provide some linking mechanism, so the router can specify well-known parameters to the controller.
This would be just like how a modal's resolve method works:
$modal.open({
controller: 'ShowOrderController',
resolve: {
orderId: function () {
return $routeParams.orderId;
}
}
});
app.controller("ShowOrderController", ["orderId", function (orderId, $scope) {
$scope.orderId = orderId;
}]);
Is there any way to achieve this or something similar with the out-of-the-box AngularJS routing services?
As per AngularJS - How to pass up to date $routeParams to resolve? it is possible to reference the current route's parameters in the resolve method of the $routeProvider using $route.current.params:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/show-order/:orderId', {
templateUrl: 'templates/order.html',
controller: 'ShowOrdersController',
resolve: {
orderId: function( $route ) {
return $route.current.params.orderId;
}
}
});
}]);
This will then honour the suggestion above, that the controller can declaratively specify its parameters:
app.controller("ShowOrderController", ["orderId", function (orderId, $scope) {
$scope.orderId = orderId;
}]);
In conjunction, this effectively decouples the controller from the route's parameters.
I am trying to display my first view on screen .I used all concept of angular .But it not display or load my template .I didn't get any error .but it not load on html why here is my code
http://goo.gl/VbBnqg
(function() {
'use strict';
angular.module('app.auth').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
console.log("config call")
// Default
$urlRouterProvider.otherwise('signin');
// Application
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'js/auth/template/login.html',
controller: 'authenticationCntrl'
})
}
})();
actually my login.html not load why ? why it is not loaded..
here is my project
https://dl.dropbox.com/s/x8s0xbllm270rq5/firstfroject.zip?dl=0
I'll explain the situation a bit more in answer.
According do docs (otherwise() section): https://github.com/angular-ui/ui-router/wiki/URL-Routing
You can pass string (url path) or function to otherwise(). If you would like to use state, you should pass a function that will invoke that state like this:
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('stateName'); //in you case 'signup'
}]);
It will invoke state service and go to 'signup', which has route configured to '/sign-up'. Overall effect will be the same.
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.
I'm trying to work out the best way to define a route that users will click on in the confirmation email that they receive.
I have defined a path like this.
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/app/setup/confirm/:code',{
// code is $routeParams.code
});
});
What needs to happen is:
Make a $http call to the api resource that logs the code as being
clicked and confirms email address
Log the user in for both the api and front end
Return the user to the next step of the setup process now their email is confirmed.
If the code is bogus and the $http call returns false then redirect them to the signup page.
As this route doesn't need a template, I can't work out where to put the code to do this. If I only defined a controller it never gets instantiated until I also define a template??
For example this works
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/app/setup/confirm/:code',{
controller: function($routeParams){
console.log($routeParams.code);
},
template: function(){
return '<html></html>';
}
});
});
But as soon as I remove the template or even return an empty string in the template the controller doesn't work. There must be right way to do this and this doesn't feel like it.
Can anyone give me a pointer? I'm using v1.1.2. Thanks!
You should be able to resolve the request to a controller without specifying the template. Try this pattern:
app.factory('myService', function () {
return 1;
});
app.controller('MyCtrl', function ($scope, myService) {
console.log(myService);
});
app.config(function ($routeProvider) {
$routeProvider.when('/app/setup/confirm/:code', {
resolve: {
redirect: 'MainCtrl'
}
});
})