We Keep Coding

routing "#" issue still occuring angularjs

I have added to my index.html
I have added $locationProvider to my app.js
When I click on my button it routes me localhost:20498/register correctly now. However whenever I type localhost:20498/register I still get 400 and when I change url to localhost:20498/#/register I get routed to the page correctly. How do I fix this?
my app.js:
var adminPortal = angular.module("adminPortal", [
"ui.router",
'isteven-multi-select',
"ui.bootstrap",
'ngAnimate',
'ui.mask',
]);
adminPortal.config(["$stateProvider", "$urlRouterProvider","$locationProvider", function ($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/",
templateUrl: "js/views/home.html",
controller: "HomeController"
})
.state("register", {
url: "/register",
templateUrl: "js/views/register.html",
controller: "RegisterController"
})
.state("user", {
url: "/user",
abstract: true,
templateUrl: "js/views/user.html",
controller: "UserController"
})
.state("user.settings", {
url: "/settings",
templateUrl: "js/views/user.settings.html",
controller: "UserSettingsController"
})
.state("tracking", {
url: "/tracking",
abstract: true,
templateUrl: "js/views/tracking.html",
controller: "TrackingController"
})
.state("tracking.fullMap", {
url: "/fullMap",
templateUrl: "js/views/tracking.fullMap.html",
controller: "TrackingFullMapController"
})
.state("dispatchOrder", {
url: "/dispatchOrder",
abstract: true,
templateUrl: "js/views/dispatchOrder.html",
controller: "DispatchOrderController"
})
.state("dispatchOrder.edit", {
url: "/edit/:orderId",
templateUrl: "js/views/dispatchOrder.edit.html",
controller: "DispatchOrderEditController"
})
.state("dispatchOrder.search", {
url: "/search",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.tile", {
url: "/searchTile",
templateUrl: "js/views/dispatchOrder.search.tile.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.archive", {
url: "/archive",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.available", {
url: "/available",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("dispatchOrder.queue", {
url: "/queue",
templateUrl: "js/views/dispatchOrder.search.html",
controller: "DispatchOrderSearchController"
})
.state("hauler", {
url: "/hauler",
abstract: true,
templateUrl: "js/views/hauler.html",
controller: "HaulerController"
})
.state("hauler.edit", {
url: "/edit/:haulerId",
templateUrl: "js/views/hauler.edit.html",
controller: "HaulerEditController"
})
.state("hauler.search", {
url: "/search",
templateUrl: "js/views/hauler.search.html",
controller: "HaulerSearchController"
})
.state("broker", {
url: "/broker",
abstract: true,
templateUrl: "js/views/broker.html",
controller: "BrokerController"
})
.state("broker.edit", {
url: "/edit/:brokerId",
templateUrl: "js/views/broker.edit.html",
controller: "BrokerEditController"
})
.state("broker.search", {
url: "/search",
templateUrl: "js/views/broker.search.html",
controller: "BrokerSearchController"
});
$locationProvider.html5Mode(true);
}])
please help!

Set $locationProvider.html5Mode(true);. Also for relative link set <base href="/"> in index.html.
Try to read official about location doc.

How to do login page first in angularjs

I new with angularjs and I'm trying use this generator-angular-fullstack,
I want the page login first and not the main, I play with the code and my solution is to add 'authenticate: true' in MainCtrl
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl',
authenticate: true
});
});
and comment the line 'event.preventDefault();' in app.js in the run function
.run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$stateChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
if (next.authenticate && !loggedIn) {
//event.preventDefault();
$location.path('/login');
}
});
});
But I'm not sure is this changes are good or there are other best solutions.

to do this, your code will be like this
in main.js
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
});
in account.js
angular.module('myapp')
.config(function ($stateProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'app/account/login/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'app/account/signup/signup.html',
controller: 'SignupCtrl'
})
.state('settings', {
url: '/settings',
templateUrl: 'app/account/settings/settings.html',
controller: 'SettingsCtrl',
authenticate: true
});
});
in login.controller.js
angular.module('myapp')
.controller('LoginCtrl', function ($scope, Auth, $location, $window) {
$scope.user = {};
$scope.errors = {};
$scope.login = function(form) {
$scope.submitted = true;
if(form.$valid) {
Auth.login({
email: $scope.user.email,
password: $scope.user.password
})
.then( function() {
// Logged in, redirect to home
$location.path('/main');
})
.catch( function(err) {
$scope.errors.other = err.message;
});
}
};
$scope.loginOauth = function(provider) {
$window.location.href = '/auth/' + provider;
};
});

Web API call failed in Device mode

I have implemented the small mobile application in Cordova (VS2015). In my application I'm getting all the required data using asp.net wep api. My mobile solution working fine in ripple emulator. But not working in device mode (Andorid). I have published my web service and local IIS server and I use local IP address and port no to access it. Also I have enable cross domain call in my web api too.
bellow is my app.js find and service That I have implement using angularJS.
var app = angular.module('RandBApp', ['ionic', 'RandBApp.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($compileProvider, $stateProvider, $urlRouterProvider, $httpProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|x-wmapp0):|data:image\//);
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/menu.html",
controller: 'RandBAppCtrl'
})
.state('app.products', {
url: "/products",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/products/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
})
.state('app.signup', {
url: "/signup",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/signup.html",
controller: 'SignUpCtrl'
}
}
})
.state('app.reservations', {
url: "/reservations",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/reservations.html",
controller: 'ReservationsCtrl'
}
}
})
.state('app.reservationdetail', {
url: "/reservations/:reservationid",
views: {
'menuContent': {
templateUrl: "app/views/reservationdetail.html",
controller: 'ReservationDetailCtrl'
}
}
})
.state('app.orders', {
url: "/orders",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/orders.html",
controller: 'OrdersCtrl'
}
}
})
.state('app.orderdetail', {
url: "/orders/:orderid",
views: {
'menuContent': {
templateUrl: "app/views/orderdetail.html",
controller: 'OrderDetailCtrl'
}
}
})
.state('app.loyaltyhistory', {
url: "/loyaltyhistory",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/loyaltyhistory.html",
controller: 'LoyaltyHistoryCtrl'
}
}
})
.state('app.notifications', {
url: "/notifications",
cache: false,
views: {
'menuContent': {
templateUrl: "app/views/notifications.html",
controller: 'NotificationsCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/products');
});
var serviceUrl = 'http://localhost:6787/';
app.constant('ngAuthSettings', {
apiServiceBaseUri: serviceUrl,
clientId: 'ngAuthApp',
loginCredentail: 'loginCredentail'
});
Here is my Service
app.factory('loyaltyservice', ['$http', '$q', '$log', 'ngAuthSettings', function ($http, $q, $log, ngAuthSettings) {
var loyaltyFactory = {};
var webAPIbase = ngAuthSettings.apiServiceBaseUri;
var loginCredentailKey = ngAuthSettings.loginCredentail;
var getLoyaltyTransactionDetails = function (userId) {
var deferred = $q.defer();
$http({
method: 'GET',
url: webAPIbase + "api/Loyalty/GetLoyaltyTransactionDetails",
params: {
userId: userId
}
}).success(function (response) {
deferred.resolve(response);
}).error(function (err, status, header, config) {
deferred.reject(err);
});
return deferred.promise;
};
loyaltyFactory.getLoyaltyTransactionDetails = getLoyaltyTransactionDetails;
return loyaltyFactory;
}]);
Any Help really appreciate.

Sorry Guys. I forgot to enable to port in firewall. After enabaling it is started to work.

angular controller called only in the first time the state load

part of myApp.js:
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html"
}
}
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl',
resolve : {
myCurrentUser : function(myCurrentUserServ) {
return myCurrentUserServ.promiseToHaveMyCurrentUser();
}
},
})
.state('app.list', {
url: "/lists/:listId",
views: {
'menuContent': {
templateUrl: "templates/listDashboard.html",
controller: 'listDashboardCtrl',
resolve : {
currentList : function(currentListServ, $stateParams) {
return currentListServ.promiseToHaveList($stateParams.listId);
}
},
}
}
})
.state('app.createWordsList', {
url: "/create-list",
views: {
'menuContent': {
templateUrl: "templates/createWordsList.html",
controller: 'createWordsListCtrl'
}
}
});
'createWordsListCtrl' controller :
.controller('createWordsListCtrl', function($scope,myCurrentUserServ , $ionicModal, $timeout,$firebaseAuth,$state,$q) {
console.log("gg");
});
when I goes to app.createWordsList at the first time, the createWordsListCtrl is running , but if I change state (for example to 'app.home') and then return back, the createWordsListCtrl not run at all.
it's happen to all states besides those with state params(aor example app.list).

Calling service in $stateprovider's controller

For now I can execute my service in my AppCtrl but this is not right. Because the service is needed only when the user nagivated to page2. How can I execute my service when the page2 state is active? I tried resolve but couldn't get it work properly.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html'
})
$stateProvider.state('page2', {
url: '/page2/:topicId',
templateUrl: 'page2.html'
// call my service here?
});
});
app.controller('AppCtrl', ['$scope', 'getTopicContent', function($scope,getTopicContent){
getTopicContent.request().success(function(data){
$scope.myList = data;
});
}]);
app.factory('getTopicContent', ['$http', function($http){
var query = function() {
return $http({
url: "http://www.corsproxy.com/mydata.me/level1/list.php",
method: "GET"
})
}
return {
request : function(){
return query();
}
}
}]);

You can create a controller for your page and inject service there.
$stateProvider.state('page2', {
url: '/page2/:topicId',
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
});
Then your controller would look like
app.controller('Page2Ctrl', ['$scope', 'getTopicContent', function($scope,getTopicContent){
getTopicContent.request().success(function(data){
$scope.myList = data;
});
}]);
if you want to try resolve, You can do something like this
$stateProvider.state('page2', {
url: '/page2/:topicId',
templateUrl: 'page2.html',
controller: 'Page2Ctrl',
resolve: {
content: getTopicContent.request().success(function(data){
return $scope.myList = data;
});
}
});
Then in your Page2Ctrl you can verify this content
app.controller('Page2Ctrl', ['$scope', 'getTopicContent', function($scope, content){
if (content) {
$scope.content = content;
}
}]);