I realize there are several posts on here regarding this issue. I have tried them all at this point and is probably why code looks pretty bad at this point. What I am trying to do appears quite simple. On submit of a form, I want to redirect to another view via Angular's routing.
THIS IS CALLED FROM THE FORM SUBMIT FUNCTION
$http.post('/api/brackets', jsonData, { headers: headers })
.success(function(data, status, headers, config) {
$scope.brackets = data;
$scope.$on('$routeChangeStart', function(next, current) {
$console.log('$routeChangeStart', arguments);
});
$location.path('/leaderboard').replace(); ///this is where I am trying to redirecto to
$scope.apply().replace();
$location.path('');
})
**THIS IS IN THE ROUTE PROVIDER**
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
// Enable pushState in routes.
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
// home page
.when('/', {
templateUrl: 'views/signin.html',
controller: 'authController'
})
.when('/signin', {
templateUrl: 'views/signin.html',
controller: 'authController'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'authController'
})
.when('/dash', {
templateUrl: 'views/dashboard.html',
controller: 'dashController'
})
.when('/test', {
templateUrl: 'views/test.html',
controller: IndexCtrl
})
.when('/profile', {
templateUrl: 'views/profile.ejs',
controller: IndexCtrl
})
.when('/leaderboard', {
templateUrl: 'views/leaderboard.html',
controller: 'leaderboardController' // we might want to make this a partial
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
}]);
Any help would be greatly appreciated. Thanks.
$http.post('/api/brackets', jsonData, { headers: headers })
.success(function(data, status, headers, config) {
$scope.brackets = data;
$scope.$on('$routeChangeStart', function(next, current) {
$console.log('$routeChangeStart', arguments);
});
$location.path('/leaderboard').replace(); ///this is where I am trying to redirecto to
$scope.apply().replace();
$location.path('');
})
This looks really off to me, first you're telling the $location.path to go to /leaderboard, but then two lines later you're telling it to go to nowhere. Do you instead mean to do this:
$http.post('/api/brackets', jsonData, { headers: headers })
.success(function(data, status, headers, config) {
$scope.brackets = data;
$scope.$on('$routeChangeStart', function(next, current) {
$console.log('$routeChangeStart', arguments);
});
$location.path('/leaderboard');
})
Why are you doing an $apply? Also, why are you doing a .replace?
Related
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 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;
};
});
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.
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.
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;
}
}]);