AngularJS routing , how to pass parameter with a url of view - javascript

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;
}
});
}]);

Related

how to change angularjs controller name

I am just beginner in angularjs I want to change angularjs controller name according name is written with templateUrl.
Here is example
.when({ templateUrl:'template.html',controller:'mycontrollername'})
and now I want to send above controller name at bellow controller name.
app.controller('6th-septemberCtrl', ['$scope','$http','filterFilter', function ($scope,$http, filterFilter) {});
I have many controllers like this so want to send controller name according which route templateUrl is click imigiatily change the controller name and should worked as written like same default way
I would create one static class which will hold the controller names per template.
Use the same class to get the names of the controller. Here is my example in code.
var app = angular.module("plunker", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.htm",
controller: getControllerName('main.htm')
})
.when("/red", {
templateUrl: "red.htm",
controller: getControllerName('red.htm')
})
.when("/green", {
templateUrl: "green.htm",
controller: getControllerName('green.htm')
});
});
function getControllerName(url) {
for(var i=0; i<templateControllers.length; i++) {
if(templateControllers[i].url === url)
return templateControllers[i].controllerName;
}
}
var templateControllers = [{
url: 'main.htm',
controllerName: 'mainController'
}, {
url: 'red.htm',
controllerName: 'redtroller'
}, {
url: 'green.htm',
controllerName: 'greenController'
}];
//create controller for main url
app.controller(getControllerName('main.htm'), function($scope) {
$scope.name = 'main';
});
//create controller for red url
app.controller(getControllerName('red.htm'), function($scope) {
$scope.name = 'red';
});
//create controller for green url
app.controller(getControllerName('green.htm'), function($scope) {
$scope.name = 'green';
});

Angularjs pass query parameter

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);
}

Dynamic route and controller with ng-class

I'm try to create dynamic framework with angularjs
here is my plan ... the user have to add the new templateUrl and controller from json file like this templates.json
{
"pages" : [
{
"name" : "home",
"tempUrls" : "views/home",
"controller" : "HomeController"
},
{
"name" : "about",
"tempUrls" : "views/about",
"controller" : "AboutController"
},
{
"name" : "contact",
"tempUrls" : "views/contact",
"controller" : "ContactController"
}
]
}
from here our job to create for hem the controller and templateUrl with the page name in angularjs like this hours.js
var hours = angular.module('hours', ['ngRoute']);
var $routeProviderReference;
var currentRoute;
hours.config(function($routeProvider){
$routeProviderReference = $routeProvider;
})
.run(['$route', '$http', '$rootScope', function($route, $http, $rootScope){
$http.get("templates.json").success(function(data){
var loop = 0, currentRoute;
for(loop = 0; loop < data.pages.length; loop++){
currentRoute = data.pages[loop];
var routeName = "/" + currentRoute.name;
$routeProviderReference.when(routeName, {
templateUrl: currentRoute.tempUrls,
controller : currentRoute.controller,
resolve: {
param: function()
{
return currentRoute.resolve;
}
}
});
}
$route.reload();
});
}]);
hours.controller(currentRoute.controller, function($scope){
$scope.pageClass = 'page-' + currentRoute.name;
});
and here is the index.html
<div ng-class="{{pageClass}}" ng-view></div>
and here is the static version from angularJS before i converted to dynamic
var hours = angular.module('hours', ['ngRoute']);
hours.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/page-home.html',
controller: 'homeController'
})
});
hours.controller('homeController', function($scope){
$scope.pageClass = 'page-home';
});
i hope really someone can help!!!
This is how I am used to working with ng-class. It does appear to have multiple formats. This style requires single curly braces.
ng-class="{ myClass: ExpressionThatResolvesTrueOrFalse }"
So if the expression resolves true, then Angular will add myClass to the element. If it resolves false, it will not add the class. It will watch the value of the expression for changes as part of the normal scope digest.
I believe the model format does not use braces at all and is more like:
ng-class="pageClass"

AngularJS Navigation between controller Index pages

I am new to AngularJs . I have 2 controllers in my MVC3 application with corresponding index pages.
Let's say the first controller is LoginController and the other one is DashboardController.
Each index page has different layouts. I want to navigate to DashboardController index.cshtml page if login is successful. How can I navigate to DashboardController index page from the current LoginController index page with the help of angularjs $routeprovider?
app.js
angular.module('testModule', ['ngRoute'])
.controller('LoginController', function ($scope, $http, $location) {
$scope.Authenticate = function () {
$scope.Login.UserId = 2;
$scope.Login.RoleId = 501;
$scope.Login.AcctPassword = 'sss';
var postform = JSON.stringify($scope.Login);
if ($scope.Login.Username != '') {
$http.post('/Login/Authenticate', postform).success(function (data) {
if (data.Status == false) {
alert(data.errorMessage);
}
else {
$location.path("/Dashboard");
}
});
}
};
})
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {templateUrl: '/Login/Index.cshtml',controller: 'LoginController' })
.when('/Temp', {templateUrl: '/Login/TempView.cshtml',controller: 'LoginController' })
.when('/Dashboard', { templateUrl: '/Dashboard/Listing', controller: 'DashboardController' })
.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true); //Remove the '#' from URL.
} ]);
The Dashboard is an Area in my Project. Listing is the controller in Dashboard Area with an index.cshtml page .
I would rather inject $window into your LoginController.
You could then define this method in the controller :
$scope.go = function(path = "#/Dashboard/") {
return $window.location = path;
};
Then use it in your template:
<ANY ng-click="go()"/>
<ANY ng-click="go('#/Temp/')"/>

How to call an angular $scope function using href in angular-kendojs

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

Categories