I haven't been able to find a straightforward answer to this, which leads me to believe that it's something really really simple. Either way, here I go.
All of the calls in my $routeProvider work great, but are case sensitive. Here's a code sample:
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: 'TmpCtrl', templateUrl: '/app/home.html' }).
when('/foo', { controller: 'TmpCtrl', templateUrl: '/app/foo.html' }).
otherwise({ redirectTo: '/' });
});
What do I need to add so that '/Foo', '/fOO', '/FoO', etc, all redirect to the same path?
There is an option you can pass to $routeProvider to toggle case sensitivity:
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: 'TmpCtrl', templateUrl: '/app/home.html' }).
when('/foo', { controller: 'TmpCtrl', templateUrl: '/app/foo.html', caseInsensitiveMatch: true }).
otherwise({ redirectTo: '/' });
});
Related
I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. However the whole concept of routes is a bit blurry for me atm and i can't get this right.
My standard index.html containing an ng-view and necessary scripts.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
<script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
<script src="controller.js"></script>
<title>Test Login App</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
My controller containing module and routeprovider.
var myApp = angular.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin'
]);
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://ivproj.firebaseio.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || 'anonymous';
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls.
I think you have the syntax of the otherwise call in your config section wrong. Change what you have for this instead:
otherwise('/handler');
hope this helps...
you are missing '' in controller part. correct code should look like -
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
Make sure that you are referring the correct path in templateUrl.
and look at my earlier post to get a better idea - How to navigate in Angular App
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
The $routeProvider.when() method in the above code actually creates a route with the given configuration. And the three .when()'s are creating three different routes.
But in your $routeProvider.otherwise('/handler'), you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes.
The mistake you are doing here is, you did not define a route at /handler. So you need to first define that route and then use it in .otherwise().
Try changing your configuration to reflect the below.
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
I have injected ngRoute into my angular app, and routing works when paths are only one level deep, ie. only have a single slash.
in app.js:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.when('/guestlist', {
templateUrl: 'guestlist.html',
controller: 'guestListCtrl'
})
.when('/event/apply', {
templateUrl: 'apply-to-event.html',
controller: 'EventCtrl'
})
.when('/event/confirmation', {
templateUrl: 'apply-to-event-confirmation.html',
controller: 'EventCtrl'
})
.when('/event', {
templateUrl: 'event.html',
controller: 'EventCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
The routes that do not work are /event/apply and /event/confirmation, they just go straight to /. However, /event and /guestlist, for example, do work.
Any ideas would be much appreciated,
You are having a problem similar to one i had a few years ago.
Try adding this to your meta :
<base href="/">
source
I am trying to create an Angular API which should be able to be integrated on any webpage. I have a frontApp using AngularJS and a backend which uses Laravel 4.
The problem is that my routing look like this at the moment :
angular.module('FrontApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.when('/members', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/apinotfound', {
templateUrl: 'views/api.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
But since my App will be integrated on a webpage whose URI can not changed, I can not use this routing system. I was wondering if a trick would be possible, to keep those routes in a variable maybe, and then route my App without changing the URI of the page?
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
$routeProvider.when('/home', {
templateUrl: 'index.php/projects/projects/contact',
controller: 'home'
});
$routeProvider.otherwise({ redirectTo: '/home' });
I cannot seem to get the templateUrl to pull in the correct URL. It seems to only redirect back to /home. Does anyone know what I'm doing wrong?
Please show your working directory structure. I think templateUrl should not include index.php. Try,
$routeProvider.when('/home', {
templateUrl: 'projects/projects/contact.html',
controller: 'home'
});
$routeProvider.otherwise({ redirectTo: '/home' });
Yor Calling path, index.php/projects/projects/contact, may be wrong.
Just use projects/projects/contact/index.php.
The code can also be simplified as follows, instead of calling $routeProvider twice.
$routeProvider.
when('/home', {
templateUrl: 'projects/projects/contact/index.php',
controller: 'home'
}).
otherwise({
redirectTo: '/home'
})