I want to get parameter from url in angularjs. for that i have did following.
1. in my app.js
var app = angular.module("testApp",
["ngRoute"]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/subscribe/:statusResponse', {
templateUrl: "client/subscription/statusResponse.html",
controller: "testController"
})
.otherwise({
redirectTo: "/"
});
// use the HTML5 History API
// $locationProvider.html5Mode(true);
}]);
2 in controller file:
app.controller("testController",['$routeParams',function($routeParams){
console.log($routeParams.statusResponse);}]);
in html file right now i have added simple text with define testApp.
The problem is that
when i hit url in browser
app.dev/demoapp/#/subscribe/test
it automatically grab
app.dev/demoapp/#/subscribe/:statusResponse
so what should be the problem i am not able to find that?
Related
http://jsfiddle.net/4nil/puw6huv4/
Here,
I am trying to inject ngroute dependency
var sampleApp = angular.module("sampleApp", ["ngRoute"]);
and trying to use routeprovider as below
sampleApp.config(["$routeProvider",
function($routeProvider) {
$routeProvider.
when("/addRomCom", {
templateUrl: "add_book.html",
controller: "romcomctrl"
}).
when("/addHorror", {
templateUrl: "add_book.html",
controller: "horrorctrl"
}).
otherwise({
redirectTo: "/"
});
}]);
The same code works in a standalone application, i have only one html which has script tag which has the code.
The issue with your fiddle is the loading of your js. right now you are loading it in onLoad
Go to the javascript section settings and change the load type to : No Wrap in <body>
EDIT:
if you put it on load, the code would be local to the onLoad scope, and it would not be visible outside globally, so ng-app="myApp" would not be able to recognize the module because
var myApp = angular.module("myApp", [] ) ; lives only inside the onLoad function.
I want to have on the URL of my application like this:
http://localhost:9000/#/?id=XYZ
I don't found how to configure this on angularjs app module
My implementation is like that:
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
but It doesn't work.
You do not have to specify
it will be like
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
and in your SingCtrl.
when you write $routeParam than you will have objects of params which are passed as a query parameter.
so you will get $routePara.id if you pass like ?id=anything
Do not have to worry if you want to catch the query param like ?id=abs&name=test
You can add a "url" attribute to your $routeProvider object.
Something like:
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
url: 'the Url you want to use',
controller: "SignCtrl"
});
PS.: I suggest you to use ui-router instead of ngRoute. Check it out later.
I just want to redirect a page without re-loading the page.
So I have tried the following
$location.path("/myPath");
But I doestn't redirect as expected. Since my module file is not getting hit while I do the same.
Here is my module file
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
controller: "com/app/controller/myController",
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
Just give the controller name not its path
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
**controller: "myController",**
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
angular.module("moduleName", [‘ngRoute’]); you need to mention the ngroute directive in angular 1.1.6 or later.
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7
I'm new to Angular and cannot figure out how to get a route working inside of phonegap. Here is my Angular code:
var app = angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/main.html',
controller: 'mainControl'
})
$routeProvider.when('/test' , {
templateUrl: 'app/views/test.html',
controller: 'testControl'
})
$routeProvider.otherwise({
redirectTo: '/'
});
});
app.controller('mainControl' , function(){
})
app.controller('testControl' , function(){
})
I'm trying to access '/test' with this link inside of my main.html:
<span>Click <a href='/test'>here</a> to go to the test page<span>
When I click the link inside of ripple I'm getting a 404 in the console for localhost:4400/test/
Like I said I'm new to Angular so from what I can tell both routeProviders match up but I can't get the page to load when clicked through the link.
Help is always appreciated.
I think you need a hashtag before the slash.
<span>Click <a href='#/test'>here</a> to go to the test page<span>
Hope this solves this problem.