Two Controller Loading on ng-click function in angular? - javascript

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

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

Routing in Angular

How can I organize the following code in a way that I can only get template.html and not the template1.html?
App.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: "template/home.html",
controller: "homeCtrl"
})
.when('/artist', {
templateUrl: "template/artist.html",
controller: "artistCtrl"
})
.when('/:collectionId', {
templateUrl: "template/template.html",
controller: "templateCtrl"
})
.when('/:trackId', {
templateUrl: "template/template1.html",
controller: "templateCtrl"
})
.otherwise({
redirectTo: "/"
});
}]);
Thank you for your help!
You should rename your routes.
.when('/collection:id', {
templateUrl: 'your/template.html',
controller: 'yourController'
});
})

On ng-click its loading different controller?

I am Working on profile page , On click on profile i am navigating to profile.html page and profilectrl, but when i click not able to load profilectrl its loading builderctrl, I used $location.path. Here is my code.
This is My click Function
$scope.profile=function(){
$location.path("/profile");
}
Here is my Routing Structure
sidemenu.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.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('/profile/', {
templateUrl: '../view/profile.html',
controller: 'profileCtrl'
})
}])
It is worked by changing the $routeProvider . Code is as below.
sidemenu.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/profile', {
templateUrl: '../view/profile.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('/filterate/:query',{
templateUrl: '../template/listpagefilter.html',
controller: 'buildersCtrl'
})
}])

controller not a function AngularJS

I have a problem. my routes do not find my controllers except /vehicules
app.js
angular.module('myApp', ['ngRoute', 'ui.grid']);
angular.module('myApp').config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/main.html',
controller: ''
})
.when('/vehicules', {
templateUrl: 'views/vehicules.html',
controller: 'VehiculeCtrl'
})
.when('/vehicule/:id', {
templateUrl: 'views/vehicule.html',
controller: 'VoirVehiculeCtrl'
})
.when('/agents', {
templateUrl: 'views/agents.html',
controller: 'AgentsCtrl'
})
.when('/agences', {
templateUrl: 'views/agences.html',
controller: 'AgencesCtrl'
})
.when('/status', {
templateUrl: 'views/status.html',
controller: 'StatusCtrl'
})
.otherwise({
redirectTo: '/'
});
});
VoirVehiculeCtrl.js
angular.module('myApp').controller('VoirVehiculeCtrl', function($scope) {});
my tree:
Javascript
controllers
VehiculeCtrl.js
VoirVehiculeCtrl.js
App.js
Views
please help me !! and sorry for my english xD

Having trouble with Angular.js routes

below is what my app.js and controllers.js files look like:
angular.module('RayAuth', ['RayAuth.filters', 'RayAuth.services', 'RayAuth.directives']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index.html',
controller: IndexCtrl
}).
when('/users', {
templateUrl: 'partials/users.html',
controller: UserCtrl
}).
when('/controlpanel', {
templateUrl: 'partials/controlpanel.html',
controller: ControlCtrl
}).
when('/modules/', {
templateUrl: 'partials/modules.html',
controller: ModuleCtrl
}).
when('/resources/', {
templateUrl: 'partials/resources.html',
controller: ResourceCtrl
}).
when('/privileges/', {
templateUrl: 'partials/privileges.html',
controller: PrivilegeCtrl
}).
when('/roles/', {
templateUrl: 'partials/roles.html',
controller: RoleCtrl
}).
when('/userroles/', {
templateUrl: 'partials/userroles.html',
controller: UserRoleCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
and this is my controllers.js:
'use strict';
function IndexCtrl() {
IndexCtrl.$inject = [];
}
function UserCtrl() {
UserCtrl.$inject = [];
}
function ControlCtrl() {
ControlCtrl.$inject = [];
}
function ModuleCtrl() {
ModuleCtrl.$inject = [];
}
function ResourceCtrl() {
ResourceCtrl.$inject = [];
}
function PrivilegeCtrl() {
PrivilegeCtrl.$inject = [];
}
function RoleCtrl() {
RoleCtrl.$inject = [];
}
function UserRoleCtrl() {
UserRoleCtrl.$inject = [];
}
i have added the ng-app and ng-view to my index file but when i load it in the browser it keeps redirecting to http://localhost/ instead of http://localhost/ray-auth/ what am i doing wrong here? can anybody help?
Try this :
angular.module('RayAuth', ['RayAuth.filters', 'RayAuth.services', 'RayAuth.directives']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index.html',
controller: IndexCtrl
}).
when('/users', {
templateUrl: 'partials/users.html',
controller: UserCtrl
}).
when('/controlpanel', {
templateUrl: 'partials/controlpanel.html',
controller: ControlCtrl
}).
when('/modules/', {
templateUrl: 'partials/modules.html',
controller: ModuleCtrl
}).
when('/resources/', {
templateUrl: 'partials/resources.html',
controller: ResourceCtrl
}).
when('/privileges/', {
templateUrl: 'partials/privileges.html',
controller: PrivilegeCtrl
}).
when('/roles/', {
templateUrl: 'partials/roles.html',
controller: RoleCtrl
}).
when('/userroles/', {
templateUrl: 'partials/userroles.html',
controller: UserRoleCtrl
});
$locationProvider.html5Mode(true);
}]);
I have removed the otherwise , which actually tells it to redirect to '/' in all other cases.
Also on a side note,
function PrivilegeCtrl() {
}
PrivilegeCtrl.$inject = [];
As shown above, the inject should be done outside the controller.
Maybe
<!doctype html>
<html lang="en" ng-app="RayAuth">

Categories