Issue in passing url parameter - javascript

Here is my Controller
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
I have a url like this
http://192.168.1.58/myapp/#/showprofile/8
When I click the link it redirect me to
http://192.168.1.58/myapp/#/showprofile/:UserID
Here is my entire app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'resources/views/layout/login.php',
controller: 'logoutCtrl'
})
.when('/signin', {
title: 'Signup',
templateUrl: 'resources/views/layout/signin.php',
controller: 'authCtrl'
})
.when('/registersuccess', {
title: 'Dashboard',
templateUrl: 'resources/views/layout/register-success.php',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboards',
templateUrl: 'resources/views/layout/dashboard.php',
controller: 'authCtrl'
})
.when('/profile', {
title: 'Profile',
templateUrl: 'resources/views/layout/profile.php',
controller: 'authCtrl'
})
.when('/contact', {
title: 'Contact',
templateUrl: 'resources/views/layout/contact.php',
controller: 'authCtrl'
})
.when('/travel', {
title: 'Travel',
templateUrl: 'resources/views/layout/travel.php',
controller: 'authCtrl'
})
.when('/subscription', {
title: 'Subscription',
templateUrl: 'resources/views/layout/subscription.php',
controller: 'authCtrl'
})
.when('/invite_friends', {
title: 'InviteFriends',
templateUrl: 'resources/views/layout/invite_friends.php',
controller: 'authCtrl'
})
.when('/liked_you', {
title: 'LikedYou',
templateUrl: 'resources/views/layout/liked_you.php',
controller: 'authCtrl'
})
.when('/favourites', {
title: 'Favourites',
templateUrl: 'resources/views/layout/favourites.php',
controller: 'authCtrl'
})
.when('/coins', {
title: 'Subscription',
templateUrl: 'resources/views/layout/coins.php',
controller: 'authCtrl'
})
.when('/forget', {
title: 'forget',
templateUrl: 'resources/views/layout/forget.php',
controller: 'authCtrl'
})
.when('/verify', {
title: 'verfiy',
templateUrl: 'resources/views/layout/verify.php',
controller: 'authCtrl'
})
.when('/verifyfb', {
title: 'verfiyfb',
templateUrl: 'resources/views/layout/verifyfb.php',
controller: 'authCtrl'
})
.when('/registration', {
title: 'verfiy',
templateUrl: 'resources/views/layout/registration.php',
controller: 'authCtrl'
})
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}])
.run(function ($rootScope, $location, Data, $http) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$http.post('CheckSession', {}).then(function (results)
{
console.log(results.data);
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/registration' || nextUrl == '/forget' || nextUrl == '/invalidtoken' || nextUrl == '/registersuccess')
{
console.log('outpages');
}
else
{
if (results.data == 1)
{
console.log('loggedin');
console.log(nextUrl);
;
console.log('to be redirect');
$location.path(nextUrl);
}
else {
console.log('not logged in');
$location.path('login');
}
}
});
});
});
app.controller('ShowOrderController', function($scope, $routeParams) {
$scope.UserIDs = $routeParams.UserIDs;
});
$scope.customNavigate=function(msg){
$location.path("/view2"+msg)
}
How can I display the parameter 8 in my view ?
Here is my authCtrl.js
Help pls
I am helping my friend question..

You can use $routeParams to get route paramaters.
In your case, your code in controller might look like:
function ctrl($scope, $routeParams) {
$scope.userId = $routeParams.UserID
}
In your view use binding expression {{userId}}

the right way is to pass the id parameter in url is
/showprofile/{UserID}

Related

Getting error while injecting $uibModal

I'm getting error when I try to inject $uibModal to my new state.
In other states it works properly. What can be the cause of the error?
Error log
Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/$injector/unpr?p0=49d19463-4701-4df9-ba96-5053f03a665bProvider%20%3C-%2049d19463-4701-4df9-ba96-5053f03a665b
at angular.min.js:6
at angular.min.js:43
at Object.d [as get] (angular.min.js:40)
at angular.min.js:43
at Object.d [as get] (angular.min.js:40)
at ui-bootstrap-tpls.js:3656
at Object.r [as forEach] (angular.min.js:8)
at Object.resolve (ui-bootstrap-tpls.js:3652)
at Object.$modal.open (ui-bootstrap-tpls.js:4256)
at b.$scope.showNotification (NotificationsController.js:19)
My controller
angular.module('EProc.Notifications')
.controller('notificationsCtrl', ['$scope', '$http', '$uibModal',
function($scope, $http, $uibModal){
$http.get('/api/notification/lastmsg').then(function(result) {
console.log('last 10 notifications--------------------');
console.log(result);
$scope.lastNotifications = result.data.content;
$scope.newMessages = result.data.newMessages;
});
$http.get('/api/notification/messages').then(function(result) {
console.log('all notifications--------------------');
console.log(result);
$scope.allNotifications = result.data.content;
});
$scope.showNotification = function(id) {
$uibModal.open({
animation: true,
size: 'md',
templateUrl: 'client/components/notifications/tmpl/notificationModal.html',
controller: 'notificationModalCtrl',
resolve: {
id: id
}
});
}
}
])
.controller('notificationModalCtrl', ['$scope', 'id', '$uibModalInstance',
function($scope, id, $uibModalInstance){
$http.get('/api/notification/message/' + id).then(function(result) {
$scope.notification = result.data;
})
}]);
mainApp.js
var eProcApp = angular.module('EProc',
[
'ui.router',
'ui.bootstrap',
'smart-table',
'ngTagsInput',
'EProc.Common',
'EProc.Profile',
'EProc.Purchasers',
'EProc.Supply',
'EProc.Tenders',
'EProc.Notifications'
]);
eProcApp.config(['$stateProvider', '$httpProvider', '$urlRouterProvider',
function ($stateProvider, $httpProvider, $urlRouterProvider) {
$stateProvider
.state('myprofile', {
url: '/myprofile',
templateUrl: 'client/components/profile/tmpl/profileShortDetails.html',
controller: 'profileDetailsCtrl'
})
.state('main', {
url: '/main',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/annualPlans.html'
},
'itemstable#main': {
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'annualProcPlanCtrl'
}
}
})
.state('purchasers', {
url: '/purchasers/:purchaserId',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/purchasers.html',
controller: 'purchasersListCtrl'
}
}
})
.state('purchasers.procplan', {
url: "/procplan",
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'procurementPlanCtrl'
})
.state('purchasers.children', {
url: "/children",
templateUrl: 'client/components/purchase/tmpl/childrenPartiesList.html',
controller: 'childrenPurchasersCtrl'
})
.state('procplan', {
url: '/procplan/:purchaserId',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'procurementPlanCtrl'
}
}
})
.state('procitem', {
url: '/procitem/:itemId',
templateUrl: 'client/components/purchase/tmpl/procurementItem.html',
controller: 'procurementItemCtrl'
})
.state('search', {
url: '/procitem/search/:page?searchText',
params: {'filter': {}},
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/searchProcItems.html',
controller: 'searchProcItemsCtrl'
},
'search-results#search': {
templateUrl: 'client/components/purchase/tmpl/search/resultsSectionsView.html',
controller: 'procItemSearchResultsCtrl'
}
}
})
.state('favgroups', {
url: '/favgroups',
templateUrl: 'client/components/supply/tmpl/favoriteGroups.html',
controller: 'favoriteGroupsCtrl'
})
.state('favorites', {
url: '/favorites/:gswId',
templateUrl: 'client/components/supply/tmpl/favoritesList.html',
controller: 'favoritesListCtrl'
})
.state('proposals', {
url: '/proposals',
templateUrl: 'client/components/supply/tmpl/commProposalsList.html',
controller: 'commProposalListCtrl'
})
.state('proposal', {
url: '/proposal/:procItemId',
templateUrl: 'client/components/supply/tmpl/commProposal.html',
controller: 'commProposalCtrl'
})
.state('tenders', {
url: '/tenders/',
templateUrl: 'client/components/tenders/tmpl/tendersList.html',
controller: 'tendersListCtrl'
})
.state('announcement', {
url: '/announcement/:announcementId',
templateUrl: 'client/components/tenders/tmpl/singleAnnouncementView.html',
controller: 'viewAnnouncementCtrl'
})
.state('watchlist', {
url: '/watchlist/',
templateUrl: 'client/components/supply/tmpl/keywordMatchWatchList.html',
controller: 'kwMatchWatchListCtrl'
})
.state('notifications', {
url: '/notifications',
templateUrl: 'client/components/notifications/tmpl/notifications.html',
controller: 'notificationsCtrl'
});
$httpProvider.interceptors.push('loginInterceptor');
}]);
The resolve property values must be functions, ie
resolve: {
id: function() { return id }
}

Two Controller Loading on ng-click function in angular?

I am navigating to profile page which has profileCtrl and ng-click function is in hmplController, When I click on ng-click both controller will load I mean hmplController and profileCtrl, This will happen only first time. After clearing cache again on ng-click both controller.
Here is my code.
homepal.controller('hmplController', function ($scope, $cookies,$mdSidenav) {
$scope.profile=function(){
$location.path("/profile/index");
}
$scope.myShortlists=function(){
$location.path("/profile/myShortlists");
}
$scope.recentlyViewed=function(){
$location.path("/profile/recentlyViewed");
}
$scope.enquiredProperties=function(){
$location.path("/profile/enquiredProperties");
}
$scope.accountSettings=function(){
$location.path("/profile/accountSettings");
}
});
My routeProvider as below
sidemenu.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/profile/index', {
templateUrl: '../view/profile.html',
controller: 'profileCtrl'
})
.when('/propCountry/:cityName',{
templateUrl: '../view/propertyInCity.html',
controller: 'cityController'
})
.when('/profile/myShortlists',{
templateUrl: '../template/myshortlist.html',
controller: 'profileCtrl'
})
.when('/profile/recentlyViewed',{
templateUrl: '../template/recentlyViewed.html',
controller: 'profileCtrl'
})
.when('/profile/enquiredProperties',{
templateUrl: '../template/EnqProperties.html',
controller: 'profileCtrl'
})
.when('/profile/accountSettings',{
templateUrl: '../template/AccSettings.html',
controller: 'profileCtrl'
})
.when('/builders/:id', {
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/builders/:id/property/:property_id', {
templateUrl: '../view/property-details.html',
controller: 'unitTypeCtrl'
})
.when('/property/:property_id', {
templateUrl: '../view/property-details.html',
controller: 'unitTypeCtrl'
})
.when('/location/:city_name/:location_id', {
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/:city_id', {
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/sublocation/:sub_location_id', {
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/nearby/:neighbourhood_id',{
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/filterate/:query',{
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
.when('/quicklinks/homeloan', {
templateUrl: '../view/homeloan.html',
controller: 'profileCtrl'
})
.when('/quicklinks/docHome', {
templateUrl: '../view/quickdoc.html',
controller: 'profileCtrl'
})
.when('/quicklinks/emiCal', {
templateUrl: '../view/emiCalculator.html',
controller: 'profileCtrl'
})
.when('/quicklinks/buyingSteps', {
templateUrl: '../view/property_buying.html',
controller: 'profileCtrl'
})
.when('/quicklinks/vaastuTips', {
templateUrl: '../view/vaastu.html',
controller: 'profileCtrl'
})
.when('/quicklinks/nriService', {
templateUrl: '../view/nri.html',
controller: 'profileCtrl'
})
.when('/quicklinks/homepalmedia', {
templateUrl: '../view/homepal_media.html',
controller: 'profileCtrl'
})
.when('/quicklinks/aboutus', {
templateUrl: '../view/homepal_aboutus.html',
controller: 'profileCtrl'
})
.when('/quicklinks/homebuilders', {
templateUrl: '../view/homepal_builders.html',
controller: 'profileCtrl'
})
.when('/quicklinks/services', {
templateUrl: '../view/homepal_ourservices.html',
controller: 'profileCtrl'
})
.when('/quicklinks/contact', {
templateUrl: '../view/homepal_contactus.html',
controller: 'profileCtrl'
})
}])
Profile Controller
sidemenu.controller('profileCtrl', ['$scope', '$rootScope', '$location', '$http',
'allServices', '$document', 'PropertyDetails', '$routeParams', '$window', '$location',
'$anchorScroll', 'customVariables','$mdDialog','raisedEnquiryDetails','$anchorScroll', function(a, b, c, d, e, f, h, r, w, l, s, cust,v,rse,scrl) {
e.getProjectwishlist().then(function(result) {
alert(JSON.stringify(result));
}, function(error) {
alert("error");
});
var srchCls_Element = angular.element(document.querySelector('.navbar-affixed-top'));
if (srchCls_Element) {
srchCls_Element.addClass('listing-navbar');
}
a.$on('$routeChangeStart', function(scope, next, current) {
b.homepage = true;
b.filter = false;
b.innerHeader = "";
b.searchFilter = false;
srchCls_Element.removeClass('listing-navbar');
});
a.homeloan=function(){
c.path('/quicklinks/homeloan');
}
a.docHome=function(){
c.path('/quicklinks/docHome');
}
}]);

Angular flickers when authenticating user

I need help eliminating a flicker with Angular. I am getting a flicker every time a new route is passed through. I have a login and logout button outside the ng-view which uses ng-if="authenticated". The problem is any time a menu item is clicked and a new view is displayed the logout or login button flickers. Is there a way to eliminate this? Below is the module, config and run function.
PS. I am very new to Angular. This was a script from a tutorial on using Angular, php and mysql for a login system.
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'toaster']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
title: 'Login',
templateUrl: 'views/login.html',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'views/login.html',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'views/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'views/dashboard.html',
controller: 'authCtrl'
})
.when('/posts', {
title: 'Posts',
templateUrl: 'views/posts.html',
controller: 'authCtrl'
})
.when('/stats', {
title: 'Stats',
templateUrl: 'views/stats.html',
controller: 'authCtrl'
})
.when('/ambas', {
title: 'Ambassadors',
templateUrl: 'views/ambassadors.html',
controller: 'authCtrl'
})
.when('/images', {
title: 'Images',
templateUrl: 'views/images.html',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'views/login.html',
controller: 'authCtrl'
})
.otherwise({
redirectTo: '/posts'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
You are setting the authenticated value to false on every route change start. So every time a user clicks to change the route you set it to false, and then a few moments later you set it to true if authentication is fine. That will cause a flicker.
So, remove the $rootScope.authenticated = false; from the $routeChangeStart callback.
$rootScope.$on("$routeChangeStart", function (event, next, current) {
//$rootScope.authenticated = false; <--- *remove this*
Data.get('session').then(function (results) {
...........

Possible to dynamically load controllers in Angular

When I go to a specific view in my Angular project, every controller code is being load.
I understand that it's possible to prevent this. But is it possible in the following situation?
App.js config:
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
$stateProvider.state('home', {
url: "/home",
templateUrl: 'views/Home.html',
controller: "MainController",
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('challenge');
}
}]
}).state('login', {
url: '/login',
templateUrl: 'views/Login.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
} else {
//console.log("Niet ingelogd")
}
}]
}).state('register', {
url: '/register',
templateUrl: 'views/Register.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
}).state('challenge', {
url: '/challenges',
templateUrl: 'views/Challenges.html',
controller: 'ChallengeCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('profile', {
url: '/profile',
templateUrl: 'views/Profile.html',
controller: "ProfileCtrl",
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('policy', {
url: '/policy',
templateUrl: 'views/Policy.html',
controller: 'AppCtrl'
}).state('cookie', {
url: '/cookie',
templateUrl: 'views/Cookie.html',
controller: 'AppCtrl'
}).state('challengesdone', {
url: '/challengesdone',
templateUrl: 'views/Challengesdone.html',
controller: 'ChallengesDoneCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('forgot', {
url: '/forgot',
templateUrl: 'views/Forgot.html',
controller: 'UserCtrl'
}).state('reset', {
url: '/reset?sptoken',
templateUrl: 'views/Reset.html',
controller: 'UserCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
Can this be accomplished without the use of external libraries and are there alot of adjustments needed?
You need to use $controllerProvider in your config.
app._controller = app.controller
app.controller = function (name, constructor){
$controllerProvider.register(name, constructor);
return (this);
};
And then resolve this method in your route.
.state('reset', {
url: '/reset?sptoken',
controller: 'UserCtrl',
resolve: {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
require(["js/userCtrl"], function (tt) {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
});
return deferred.promise;
}
},
templateUrl: 'views/Reset.html'
});
I have put together a CodePen for your.

Removing `{{` in angular

I am using Laravel framework..
I can't able to use {{ symbol inside (As laravel consider's its as outputing )
I tried this code use interpolateProvider.. ie., to use <% instead of {{ in angularjs in single angualr js file. but how can i do this in my .run function or config file ?
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
Here is my app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login-ang.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}
])
.run(function($rootScope, $location, Data, $http) {
$rootScope.$on("$routeChangeStart", function(event, next, current) {
$http.post('resources/views/layout/calls/checkSession.php', {}).then(function(results) {
function($rootScope, $location) {
$rootScope.this_route = function() {
return $location.path().replace('/', '');
};
};
});
});
});
Within the config function of angular in app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
// inject interpolateProvider into config
app.config(['$routeProvider', '$interpolateProvider',
function ($routeProvider, $interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login-ang.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}
]);
Then within your template you use:
<h1><% my_angular_expression %></h1>

Categories