Right now I'm calling below code :
http://localhost:8081/cgi/#/home
And it takes me to my home page.
My app.js is :
angular.module('myModule',
['ngRoute', 'ngCookies', 'ui.bootstrap',
'angularUtils.directives.dirPagination'])
.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/index', {
controller : 'homeController',
templateUrl : './app/views/index.html',
})
.when('/', {
controller : 'homeController',
templateUrl : './app/views/home.html'
})
.otherwise({
redirectTo : '/'
});
}])
Now I need to add extra parameter "debug", which I can store in my controller and if it is there I need to call some function.
I have tried adding below to my app.js
.when('/debug', {
controller : 'homeController',
templateUrl : './app/views/home.html',
})
and below line to my controller
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
in my controller :
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
Also please include url you think would work in answer as I can understand from where to start looking for either routeProvider or $location functionality
But page has now stopped loading and I don't have any clue how can I make it work.
Please help
You need to inject the $routeParams service to the controller. Just add it as a parameter to the controller function.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $routeParams) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
--- Update ---
Path
Use $location.path() === '/debug' to check if the current path is '/debug'. You need to inject the $location service.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.path() === '/debug';
console.log($scope.debug);
}
Query Param
This will allow you to check if there is a query parameter keyed "debug" with the value of "true".
http://localhost:8081/cgi/#/home?debug=true
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.search().debug;
console.log($scope.debug);
}
Related
i want to pass parameter id with url in angularJS ,
i try in home.config :
home.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/profile",{
templateUrl : "views/home/profile.html",
controller : "profile"
})
.when('/settings',{
templateUrl : "views/home/settings.html",
controller : "Settings"
})
.when('/item',{
templateUrl : "views/home/item.html",
controller : "item"
});
}]);
in home.html :
<a href="#!item?id='+Item_id+'" >Item View</a>
and in itemController
controllers.controller("item",function ($scope,$http,$rootScope) {
var url_string = window.location.href; // home.php#!/item?id=0ae8b2fc-3ccb-11e8-952b-708bcd9109ce
var url = new URL(url_string);
var item_id = url.searchParams.get("id");
console.log(item_id);
})
but I get a null value, please help thanks in advance .
If you are using ngRoute you should use $route in the controller to get the parameters of the route.
You can see working code here:
const app = angular.module("mainapp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/profile", {
template: "<p>profile</p>",
controller: function() {}
})
.when('/settings', {
template: "<p>settings</p>",
controller: function() {}
})
.when('/item', {
template: "<p>item {{itemid}}</p>",
controller: function($route, $scope) {
$scope.itemid = $route.current.params.itemid;
}
});
}]);
I have an Angular app that takes information from few JSON files.
The first JSON file contains data about cities and managers. Like this:
[
{
"link" : "veliky_novgorod",
"city" : "Великий Новгород",
"manager" : "mr. Sminth",
},
{
"link" : "magnitogorsk",
"city" : "Магнитогорск",
"manager" : "mr. Young",
},...
I use it in order to create a page for every city.
My urls look like this: ...index.html#/cities/veliky_novgorod/, ...index.html#/cities/biisk/, ...index.html#/cities/biisk/mobile/, etc.
Everything works fine, but when I try to go from one page to another information from the other JSON (scopes) doesn't load. After changing page I've always got {{ value }}
But when I make refresh manually, everything is going back to normal.
In other words, how can I reload new page after clicking on link. I tried to use window.location.reload() But it doesn't work.
<li ng-repeat="city in cities">
{{city.manager}}
</li>
My module and controller below:
var curryApp = angular.module('CurryApp', [
'ngRoute',
'curryControllers'
]);
curryApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'link_list.html',
controller: 'CurryListCtrl'
}).
when('/cities/:cityId/', {
templateUrl: 'template-total.html',
controller: 'CurryDetailCtrl'
}).
when('/cities/:cityId/mobile/', {
templateUrl: 'template-mobile.html',
controller: 'CurryMobileCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
That's my controller:
var curryControllers = angular.module('curryControllers', []);
curryControllers.controller('CurryListCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('cities.json').success(function(data) {
$scope.cities = data;
});
}]);
curryControllers.controller('CurryDetailCtrl', ['$scope', '$routeParams', '$http', '$route',
function($scope, $routeParams, $http, $route) {
$scope.reloadRoute = function(){window.location.reload();}
$scope.cityId = $routeParams.cityId;
$http.get('cities.json').success(function(data) {
$scope.cities = data;
$http.get('paidbc.json').success(function(data2) {
$scope.paidBc = data2;
$scope.isActive = function(item) {
return item.link === $scope.cityId;
};
});
});
}]);
curryControllers.controller('CurryMobileCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.cityId = $routeParams.cityId;
}]);
It seems that is an error related with the href attribute. According to docs:
The wrong way to write it:
link1
The correct way to write it:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
In your case, use:
<a ng-href="#/cities/{{city.link}}" ng-click="reloadRoute()">{{city.manager}}</a>
instead of using only href.
I am using controller in my Angularjs which gets question one by one from server and i want on specific condition this controller should call a routeprovider that should change my current view with templateUrl and put into a directive
my question is can i call route provider in controller rather than module
here is my CreateController
var CreateController = ['$scope', '$http', function ($scope, $http) {
$scope.model = {
};
................>
.................>
$scope.NextQuestion = function () {
$http.post('/Testing/NextQuestion', {
........................>
}).success(function (newdata) {
$scope.model = newdata;
var inccomplevel = $scope.model.servercomplevel;
if (qId == 10) {
here i need the code for routeProvider and directive please provide me help
}
......................>
}];
i did the route provider in app.js file there it works
here is the code for app.js when i do like this it works and when i shift the code of route provider
to the create controller in condition if qId == 10 there it does not work
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Partials/TestCompleted.html',
controller: 'AppCtrl'
})
.otherwise({ redirectTo: '/' });
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
Instead of trying to change the value of the templateUrl on the route, you should define another route. Then you can simply switch routes.
To change the route/view, you need update the path. You can do this using the $location service.
See AngularJS : How do I switch views from a controller function?
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor-url.php',{
},{
query: {
method:'GET',
/*params: { myvar: myvarActual },*/
isArray:true
}
}
);
}]);
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
alert($routeParams.myvar);
Greeter.query(function(data) {
$scope.output = data.myvar;
});
}]);
app.controller('homeController', ['$scope', function($scope){
}])
/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
$routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
</script>
In the above code, seems the controler is not even recognize myvar that was suppose to be included in the routeProvider's myvar. As the alert will show undefined, instead of the actually value of myvar (i.e. .../appointments/1066 ... if so I expect $routeParams.myvar = 1066, and alert($routeParams.myvar) should be 1066
$routeParams is missing from the dependency declaration so currently it's looking for myvar on Greeter which doesn't exist...
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
Should be...
app
.controller('appointmentController', ['$scope', '$routeParams', 'Greeter', function($scope, $routeParams, Greeter){
I am new to angular-kendo.js. I want to call a function emailClick() from href ie.
Email
and my controller and route is as follows :
app.controller('ContactCtrl', ['$rootScope', '$scope', 'appSvc',
function($scope, $rootScope, appSvc) {
$scope.emailClick = function() {
appSvc.selectItem = 'email';
appSvc.back = true;
$rootScope.go('email', 'slideLeft');
};
}]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
}).when('/email', {
templateUrl : 'partials/email.html',
controller : 'ContactCtrl'
}).otherwise({
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
});
}]);
}());
Now on clicking Email I should go to the function emailClick() but it is not happpening. there is no error and no response. Please help.
Thanks in advance.
you need to use ng-click directive,
Email