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).
Related
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.
I want to add optional $stateParams to below $state ,Lets say currently i have processId and i want to add assessmentId as optional params. My goal is to launch same template and controller from two places in application and it will launch based on $stateParams.
How can i achieve that task ?
app.js
Add Challenge
.state('app.addPrcChallenge', {
url: '/add/prcChallenge',
params: { processId: null,assessmentId:null},
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
},
Edit Challenge
.state('app.editPrcChallenge', {
url: '/edit/prcChallenge/:challengeKey/processId?/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
Directly mention them in the url with a ? suffix for optional params:
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
}
}
});
You can ignore the params property after this change, as the params property is used to define params which do not appear as part of the URL
You URL property should be like this:
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
},
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
params: {
processId: null,
assessmentId: null
}
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
}
}
});
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
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.
I want to access inventory by id, using link /inventory/description/:{{id}} But it isnt working, nothing shows up. how can i access it by id ?
app.config(function config( $stateProvider, $urlRouterProvider) {
$stateProvider.state('inventory',{
url:'/inventory',
views: {
"main": {
controller: 'InventoryCtrl',
templateUrl: 'inventory/main.tpl.html'
}
},
data:{ pageTitle: 'Inventory' }
}
).state('inventory.detailview',{
url:'/inventory/detailview',
views: {
"detailview": {
controller: 'InventoryCtrl',
templateUrl: 'inventory/detail.tpl.html'
}
},
data:{ pageTitle: 'DetailView' }
}
).state('inventory.description',{
url:'/inventory/description/:{{id}}',
views: {
"descriptionview": {
templateUrl: 'inventory/description.tpl.html',
controller: function($scope, Inventory){
$scope.id = Inventory.query('id');
}}
},
data:{ pageTitle: 'DescriptionView'}
});
});
my factory
app.factory('Inventory', function($resource, $http) {
return $resource('http://web.lv/api/v1/inventory/:id', {id: "#id"},
{
update: {
method: 'POST',
params: {id: '#id'},
isArray: false
},
save: {
method: 'PUT'
},
query: {
method: 'GET',
params: {id: '#id'},
isArray: false
},
create: {
method: 'POST'
},
drop: {
method: 'DELETE',
params: {id: "#id"}
}
}
);
});
my controller
app.controller('InventoryCtrl', function($scope, $http, Inventory, $location) {
//getting the objects from Inventory
$scope.info = Inventory.query();
//
$scope.id = Inventory.query('id');
}
If you are using ui-router, you can use stateParams
app.controller('InventoryCtrl', function($scope,$stateParams,Inventory) {
$scope.id = $stateParams.id;
}