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'
})
Related
Im writing a mobile app using Ionic framework, it has two languages: English and Spanish, I want to be able to switch the nav-view (as a template), to show in English or Spanish depending on the user selection language.
I'm trying to do this on my StateProvider definition, here is part of my code:
(function(){
'use strict';
angular
.module('app.core')
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/auth/login/login.html',
controller: 'LoginCtrl',
})
.state('loginEs', {
url: '/loginEs',
templateUrl: 'app/auth/login/loginEs.html',
controller: 'LoginCtrl',
})
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabsEs', {
url: '/tabEs',
abstract: true,
templateUrl: 'templates/tabsEs.html'
})
.state('tabs.dashboard', {
url: '/dashboard',
views: {
'tab-dash': {
templateUrl: 'app/dashboard.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabsEs.dashboardEs', {
url: '/dashboard',
views: {
'tabEs-dash': {
templateUrl: 'app/dashboardEs.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabs.adults', {
url: '/adults',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adults.html',
//controller: 'DashCtrl'
}
}
})
.state('tabs.adultsEs', {
url: '/adultsEs',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adultsEs.html',
controller: 'customersCtrl'
}
}
})
.state('passwordResetForm', {
url: '/passwordResetForm',
templateUrl: 'app/auth/login/passwordResetForm.html',
controller: 'PasswordResetCtrl',
});
$urlRouterProvider.otherwise('login');
}]);
})();
When the state is tabsEs.dashboardEs it display correctly my navbar in spanish from templates/tabsEs.html. But I have been struggling some days to do the same when state change to tabs.adultsEs, but is not working, allways shown templates/tabs.html (english).
Does anybody see the error, or give me a tip to do this?
Regards,
Victor
Don´t duplicate your templates, use a plugin like angular-translate to add internationalization to your app. Explore the docs, it's really simple.
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?
I'm looking at a web site developed by someone else and am trying to troubleshoot an issue where the back button doesn't function correctly. Because this is not my code, I'm not exactly sure where the best places to prioritize my troubleshooting would be.
I'm trying to figure this out quickly - my questions are: What are some common things that would cause this? What are some areas to check that are very likely to be the culprit?
Here is the bug in action. If you click on any of the example portfolio items and then try to use the browser's own back button, you're taken back to the same page. I believe this is an issue of the routing in Angular but I don't know that for sure. Any ideas?
To fix the back button issue, you should make all your hrefs point to #/route_name instead of #route_name in your html
for example change :
<a href="#about" .... </a>
To:
<a href="#/about" .... </a>
I tested the solution on your site and the back button worked like a charm.
I don't know much about angular but the behavior could be because of the following code in compiled.min.js file. The last 4-5 lines in this code snippet are important and which might be causing this issue. Have a look at it and probably you can figure it out:
angular.module("Site", ['ngSanitize']).config(function ($locationProvider, $routeProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = !0, delete $httpProvider.defaults.headers.common["X-Requested-With"], $locationProvider.html5Mode(false);
$httpProvider.responseInterceptors.push(function ($q, $location, $rootScope) {
return function (promise) {
//start spinner
/* $rootScope.element = $('.container')
$rootScope.element.css('visibility', 'hidden');
$rootScope.spinner = $rootScope.spinner ? $rootScope.spinner : startSpinner(); */
return promise.then(
// Success: just return the response
function (response) {
return response;
},
// Error: check the error status to get only the 401
function (response) {
if (response.status === 404) $location.url('/404');
return $q.reject(response);
});
}
});
$routeProvider.when("/", {
templateUrl: "views/homepage.html",
controller: "homeC"
}).when("/about", {
templateUrl: "views/about.html",
controller: "RouteC"
}).when("/about/our-team", {
templateUrl: "views/our-team.html",
controller: "aboutC"
}).when("/who-we-are", {
templateUrl: "views/page.html",
controller: "RouteC"
}).when("/what-we-do", {
templateUrl: "views/page.html",
controller: "RouteC"
}).when("/about/manifesto", {
templateUrl: "views/manifesto.html",
controller: "RouteC"
}).when("/about/testimonials", {
templateUrl: "views/testimonials.html",
controller: "testimonialC"
}).when("/about/awards", {
templateUrl: "views/awards.html",
controller: "RouteC"
}).when("/services", {
redirectTo: "/services/design"
}).when("/services/marketing", {
templateUrl: "views/services-marketing.html",
controller: "services_marketing"
}).when("/services/design", {
templateUrl: "views/services-design.html",
controller: "services_design"
}).when("/services/ecommerce", {
templateUrl: "views/services-ecommerce.html",
controller: "services_ecommerce"
}).when("/services/development", {
templateUrl: "views/services-development.html",
controller: "services_development"
}).when("/services/mobile", {
templateUrl: "views/services-mobile.html",
controller: "services_mobile"
}).when("/services/marketing/:slug", {
templateUrl: "views/services.html",
controller: "services_marketing_internal"
}).when("/services/:slug", {
templateUrl: "views/services.html",
controller: "services_internal"
}).when("/portfolio", {
redirectTo: "/portfolio/website"
}).when("/portfolio/:slug", {
templateUrl: "views/portfolio.php",
controller: "portfolioC"
}).when("/portfolio/:category/:slug", {
templateUrl: "views/portfolio-single.php",
controller: "portfolio_internal"
}).when("/blog-home", {
templateUrl: "views/blog-home.html",
controller: "RouteC"
}).when("/blog-post", {
templateUrl: "views/blog-post.html",
controller: "RouteC"
}).when("/contact", {
templateUrl: "views/contact.php",
controller: "contactC"
}).when("/debug", {
templateUrl: "views/qunit.html",
controller: "qunitC"
}).when("/404", {
templateUrl: "views/error-404.html"
}).when("/sitemap", {
templateUrl: "views/sitemap.php"
}).otherwise({
redirectTo: "/404"
});
//$locationProvider.hashPrefix('!'); //This seems to be the code which handles the redirect.
}).run(function ($rootScope, $location) {
$rootScope.$apply.pathTo = function (url) {
$location.path(url);
};
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?