Routing in Angular - javascript

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

AngularJS doesn't render view specified in $routeProvider

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

How to write $routeProvider.whenLoggedIn function in common place for all modules

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

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

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