We Keep Coding

How can i add another one route in this code?

i need to add admin user. I read that i need to separate routes in my app.js file. But i can't find example that i need to done this. May be someone can help me to fix this problem ?
(function () {
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'login/login.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'register/register.view.html',
controllerAs: 'vm'
})
.when('/admin', {
controller: 'AdminController',
templateUrl: 'admin/admin.view.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
}
run.$inject = ['$rootScope', '$location', '$cookies', '$http'];
function run($rootScope, $location, $cookies, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookies.getObject('globals') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata;
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();

Take a look at this gist
Basically what you need is attach some restriction related data to your route and check on page transition if you are authorized and redirect if not.
Dedicated AuthService can contain currentUser and authorization data instead of chaotic data in the run block.

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

$location is not working in Angular

I have an rest api, in which the api is sending instruction to redirect (301 is being sent).
And I have my angular js code like this:
var request = $http.post(LOGIN_URL,{username:'tes',password:'test'})
request.success(function(html)
{
if(html.failure) {
console.log("failure")
$scope.errorMessage = html.failure.message
}
else {
console.log("Success here....")
$location.path("route")
}
})
I can see in the browser log that it is coming in the else part ( Success here..... is being printed). But the url is not changed. $location.path doesnt do anything; I have also tried $location.url which also results the same thing.
And also I'm injecting the $location to my controller.
Where I'm making mistake?
Thanks in advance.

Try something like this
$location.path("/myroute")
You have to have a ng-view on the page as well.

Also make sure you have a corresponding view with that name
and when you're registering your controller you have the '$location' var being injected in the declaration of your controller like this example:
controllers.controller('MyCtrl', ['$scope', '$route', '$location', 'MYService',
function($scope, $route, $location, MyService) {
// ... controller code
}])
also you might want to debug your route changing to see what is happening with a location change listener, like in this example:
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'MyCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
when('/error/:errorId', {
templateUrl: 'partials/error.html',
controller: 'ErrorCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]).run(function($rootScope, $injector, $location) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
console.log('current=' + current.toString());
console.log('next=' + next.toString());
});
});
});

When I click the back button, it takes me to the same page I'm currently on

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);
};

Route AngularJS app without changing URI

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?