Route AngularJS app without changing URI - javascript

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?

Related

angular 404 does not work with otherwise templateUrl nor redirectTo

trying to add a simple 404.html template but for some reason it does not get rendered. in my app.routes.js I tried the following
$routeProvider.when('/', {
templateUrl: '/templates/index.html',
controller: 'IndexCtrl'
}).otherwise({
templateUrl: '/templates/404.html'
})
I also tried to use redirectTo as below but it does not work
.otherwise({
redirectTo: '/templates/404.html'
})
when I try to type something like http://localhost:5000/aaaaaaaaaaaaa in console I see 404 response but template is not rendered. do I need to adjust controller ?
You can create an specific route for 404 with an specific view /templates/404.html.
Than, in the otherwise() method call, you can redirect to that route /404:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
})
.when('/404', {
templateUrl: 'templates/404.html'
})
.otherwise({
redirectTo: '/404'
});
});

stateprovider on mobile phones

this is my first time asking on stackoverflow so please bear with me if I'm not clear enough with the problem. I am working on a flight booking web application as a university project. I'm using MEAN stack and the site is visible on 52.27.150.19. It used to work fine on both PC and mobile phones until I started using ui-router states instead of using ngRoute's $routeProvider. Now on phones, it doesn't even run the javascript animations or call any of the ng-click functions when I click on any buttons. Here's what my $stateProvider does:
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
templateUrl: '../partials/home.html',
controller: 'ctrl'
})
.state('away', {
templateUrl: '../partials/home.html',
controller: 'away'
})
.state('book', {
templateUrl: '/../partials/Book.html',
controller: 'bookingCtrl',
})
.state('flightStatus', {
templateUrl: '../partials/flightStatus.html',
controller: 'flightStatusCtrl'
})
.state('outgoing', {
templateUrl: '../partials/outgoingFlights.html',
controller: 'outgoingFlightsCtrl'
})
.state('myFlightResults', {
templateUrl: '../partials/myFlightResults.html',
controller: 'myFlightResultsCtrl'
})
.state('myFlights', {
templateUrl: '../partials/myFlights.html',
controller: 'myFlightsCtrl'
})
.state('flightStatusResultsDate', {
templateUrl: '../partials/flightStatusResults.html',
controller: 'flightStatusResultsDate'
})
.state('flightStatusResultsPlace', {
templateUrl: '../partials/flightStatusResults.html',
controller: 'flightStatusResultsPlace'
})
.state('payment', {
templateUrl:'../partials/payment.html',
controller: 'paymentCtrl'
})
.state('confirm', {
templateUrl:'../partials/confirmation.html',
controller: 'confirm'
})
.state('return', {
templateUrl: '../partials/outgoingFlights.html',
controller: 'returnFlightsCtrl'
});
});
and I've made sure that the home state is the inital state:
App.run(function($state){
$state.go('home');
})
It seems like the javascript just dies on phones, any idea how to fix this?
Each state needs an url attribute is my guess, so change this
.state('confirm', {
templateUrl:'../partials/confirmation.html',
controller: 'confirm'
})
to this
.state('confirm', {
url: '/confirm',
templateUrl:'../partials/confirmation.html',
controller: 'confirm'
})

Angular $routeProvider to handle different URLs differently

In angular, is there a method to load different views & controllers when the routes are basically the same, but the actual string in the route is different?
In terms of routing, if the top level route parameter is being already used, is there way to load different View & Controller based on the different route parameter?
Below is what I was trying:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "app/components/0_home/homeView.html",
controller: "HomeController"
}) // Home
.when("/about", {
templateUrl: "app/components/1_about/aboutView.html",
controller: "AboutController"
}) // About
/*(...Bunch of other .whens)*/
//Project
.when("/project/:projectId", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/HOME", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/FLOORPLAN", {
templateUrl: "app/components_project/1_floorplans/floorplanView.html",
controller: "FloorplanController"
}) // Floorplan
.when("/404", {
templateUrl: "app/components/404.html"
}) // else 404
.otherwise({
redirectTo: '/404'
});
}
]);
I wanted to load
app/components_project/0_home/homeView.html
when routeProvider is
/project/:projectId/HOME
and load
app/components_project/1_floorplans/floorplanView.html
when routeProvider is
/project/:projectId/FLOORPLAN
Or is there any better way to handle this kind of situation?

Routing in Angular JS with Multiple Slashes (1.2.x)

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

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