routing "#" issue still occuring angularjs - javascript

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.

Related

ui-sref not respond anything

I'm using the ui-sref for making a link, but it's not respond anything
Here's the code for the ui-sref
<a class="col col-40" ng-repeat="table in tables" style="background:{{table.warna}}" ui-sref="app.go({tableID:table.fstRoomNo})">{{table.fstRoomName}}<br/>{{table.fsiStatus}}</a>
and here the app.js config section
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/auth/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
templateUrl: "views/app/home.html",
controller: 'HomeCtrl'
})
.state('app.go', {
url: "/go/:tableID",
views: {
'menuContent': {
controller: 'GoCtrl'
}
},
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
});
$urlRouterProvider.otherwise('/login');
})
Posting an answer after the comment above solved the issue.
Regarding the issue with the routing, it is probably because of the spelling error below.
resolve: {
detail_data: function(TabelService, $ionicLoading, $stateParams) {
$ionicLoading.show({
template: 'Loading table status ...'
});
//alert($stateParams.tableID);
var tableID = $stateParams.tableID;
return TabelService.getDetailTable(tableID);
}
}
Where TabelService should be spelled as TableService

Can not redirect to proper path using angular.js ui-router

i have one issue regarding redirecting path in angular.js.I am explaining my code below.
profileController.js:
if($('#addProfileData')[0].defaultValue=='Update'){
var updatedata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno,'profile_id':id};
console.log('userupdate',userdata);
$http({
method: 'POST',
url: "php/profile/updateProfileData.php",
data: updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data);
$location.path('.profile');
},function errorCallback(response) {
alert(response.data);
});
}
}
here i am setting path to profile page inside success callback function.But it is redirecting to the root page after update the data.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.state('dashboard.profile', {
url: '/profile?p_i',
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
})
.state('dashboard.dept', {
url: '/dept?d_i',
templateUrl: 'dashboardview/dept.html',
controller: 'deptController'
})
.state('dashboard.princpal', {
url: '/princpal?pr_i',
templateUrl: 'dashboardview/princpal.html',
controller: 'princpalController'
})
.state('dashboard.dept_head', {
url: '/dept_head?dh_i',
templateUrl: 'dashboardview/depthead.html',
controller: 'deptheadController'
})
})
Here after update data successfully it is redirecting to login.html page.I need after updating the data the page should redirect to profile.html page.Please help me.
Try replacing the line of code with $location.path('dashboard.profile');
That would do the need for you
You can use $state instead of $location as follows:
$state.go('dashboard.profile')
Also, don't forget to inject the $state service in your controller.
If you want to use $location.path you need to use the url instead of state.

Child view not working in angular-ui-router

Here is the code:
$stateProvider.
state('dashboard', {
url: '/dashboard/',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
}).
state('dashboard-home', {
url: '/dashboard/home/',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
I have a <div ui-view></div> element in dashboard.client.view.html
When I navigate to /dashboard/home/ nothing comes up. The goal is to have home.client.view.html get injected into dashboard.client.view.html.
There is an example as working plunker
Each Child state inherits url from its Parent. So we shoulduse just
url: '/home',
because parent will add the /dashboard.
The state definition has changed url in our child state:
.state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
.state('dashboard-home', {
//url: '/dashboard/home/',
url: '/home',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
And these links are working as expected:
<a href="#/dashboard">
<a href="#/dashboard/home">
Check it in action here
There is another working example, which shows that we can map states without parent:'', but with dot notation:
state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
//.state('dashboard-home', {
.state('dashboard.home', {
//url: '/dashboard/home/',
url: '/home',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
You can observe it here

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).

Categories