Having trouble with Angular.js routes - javascript

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

Related

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

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

Angular router is not working but there is no errors aswell

I am new to angularjs. I have two router files auth_router.js and teacher_router.js. the auth_router.js is working fine but the teacher_router.js is not working. the code is below:
app.js file
angular.module("learn_mart", ['ngRoute', 'ngCookies'])
.run(function($rootScope, $cookies) {
$rootScope.baseurl = "http://localhost/lm/auth.html#";
$rootScope.userrole = $cookies.get('userrolecookie');
$rootScope.activetab = $cookies.get('activetabcookie');
$rootScope.redirectologin = function(role) {
$cookies.put('activetabcookie', 1);
$cookies.put('userrolecookie', role);
window.location = $rootScope.baseurl + '/' + role + "_login";
};
});
auth_router.js file
angular.module("learn_mart")
.config(function($routeProvider) {
$routeProvider
.when("/sub_login", {
controller: "subscriber_login",
templateUrl: 'views/auth/subscriber_login.html'
})
.when("/sub_register", {
controller: "subscriber_registration",
templateUrl: 'views/auth/subscriber_registration.html'
})
.when("/tech_login", {
controller: "teacher_login",
templateUrl: 'views/auth/teacher_login.html'
})
.when("/tech_register", {
controller: "teacher_registration",
templateUrl: 'views/auth/teacher_registration.html'
})
.when("/shop_login", {
controller: "shop_login",
templateUrl: 'views/auth/shop_login.html'
})
.when("/shop_register", {
controller: "shop_registration",
templateUrl: 'views/auth/shop_registration.html'
})
});
teacher_router.js
angular.module("learn_mart")
.config(function($routeProvider) {
$routeProvider
.when("/teacher_course", {
controller: "show_courses_teacher",
templateUrl: "views/auth/shop_login.html"
})
});
There is no issue's with the file inclution. Also there is no errors shown in the developer console.

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

How to test routing with AngularJS and Karma

My routing looks like:
angular.module('mean').config(['$routeProvider', '$translateProvider', '$locationProvider',
function($routeProvider, $translateProvider, $locationProvider) {
$routeProvider.
when('/items', {
templateUrl: '/views/main.html',
controller: 'ItemsController'
}).
when('/items/create', {
templateUrl: '/views/main.html',
controller: 'ItemsController'
}).
when('/articles/create', {
templateUrl: 'views/articles/create.html'
}).
when('/articles/:articleId/edit', {
templateUrl: 'views/articles/edit.html'
}).
when('/articles/:articleId', {
templateUrl: 'views/articles/view.html'
}).
when('/', {
templateUrl: '/views/index.html'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$translateProvider.useStaticFilesLoader({
prefix: '/lang/',
suffix: '.json'
});
$translateProvider.fallbackLanguage('en-US');
$translateProvider.useCookieStorage();
$translateProvider.preferredLanguage('en-US');
}
]);
Basically, I want to write tests to ensure that every route has a template and a controller.

You shouldn't need to test that routing works, the angular codebase already does, for some useful tests you could look at this example:
AngularJS Test Controller Containing routeChangeSuccess

Categories