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
Related
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'
});
})
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'
})
}])
I am new to AngularJS and trying to implement infinite scrolling using https://github.com/sroze/ngInfiniteScroll.
However my code gives me the following error on console on the browser. What is confusing me is that it is pointing to the code in the library I am using and not my code. IS this a bug from my side or in the some linking error?
Has anyone else used this and faced a similar issue. I cannot really post my source code since its quite big at this point and I am using the infinite-scroll when I am using the ng-repeat directive to list results. Thank you
ng-infinite-scroll.js:42 Uncaught ReferenceError: app is not defined
Here is my app.js
'use strict';
/**
* #ngdoc overview
* #name angularSocketNodeApp
* #description
* # angularSocketNodeApp
*
* Main module of the application.
*/
// Added 'ngInfiniteScroll' below
angular.module('angularSocketNodeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'btford.socket-io',
'angular-md5',
'ngInfiniteScroll'
])
.factory('theSocket', function(socketFactory) {
var myIoSocket = io.connect('/');
var theSocket = socketFactory({
ioSocket: myIoSocket
});
return theSocket;
})
.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/search', {
templateUrl: 'views/search.html',
controller: 'SearchCtrl'
})
.when('/search/:query', {
templateUrl: 'views/search.html',
controller: 'SearchCtrl'
})
.when('/teacher', {
templateUrl: 'views/teacher.html',
controller: 'TeacherCtrl'
})
.when('/class/:id', {
templateUrl: 'views/class.html',
controller: 'ClassCtrl'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.when('/login/teacher', {
templateUrl: 'views/loginteacher.html',
controller: 'LogInTeacherCtrl'
})
.when('/login/student', {
templateUrl: 'views/loginstudent.html',
controller: 'LogInStudentCtrl'
})
.when('/u/:username/:classname', {
templateUrl: 'views/class.html',
controller: 'ClassCtrl'
})
.otherwise({
redirectTo: '/search'
});
});
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
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">