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'
});
})
Related
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
myApp.config(function ($routeProvider) {
$routeProvider
.when("", {
templateUrl: "Views/Employee/Employees.html",
controller: "EmployeesController"
}).otherwise({ redirectTo: 'Views/Employee/Employees' });
});
It routes the URL mentioned in otherwise, not the URL mentioned in the .when
Root route of your Angular app will be "/", not "".
Then, redirectTo takes as value a route defined in your route provider.
myApp.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/Employee/Employees.html",
controller: "EmployeesController"
})
.otherwise({ redirectTo: '/' });
});
I have a config function in each module file like below
in app.js
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);
in home.js
config(['$routeProvider','ChartJsProvider',
function ($routeProvider,ChartJsProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
now I want to write a $routeProvider.whenLoggedIn function like
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.whenLoggedIn=function(){
console.log('Do something');
}
$routeProvider.otherwise({redirectTo: '/home'});
}]);
when I wrote code like code below
$routeProvider.whenLoggedIn('/profile', {
templateUrl: 'home/profile.html',
controller: 'ProfileCtrl'
});
I want to call the function whenLoggedIn. Please let me know how to write whenLoggedIn function in common place instead writing this function in every module config function
You need to add $stateProvider in app.config
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true).hashPrefix('*');
$urlRouterProvider.otherwise('/account/login');
$stateProvider
.state('account', {
abstract: true,
url: '/account',
cache: false,
template: '<div ui-view></div>',
})
//login
.state('account.login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'app/Account/login.html',
})
//forgot password
.state('account.forgotpassword', {
url: '/forgotpassword',
controller: 'ForgotPswdCtrl',
templateUrl: 'app/Account/forgotpassword.html',
})
}])
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 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
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