Calling service in $stateprovider's controller - javascript

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

Related

The right way to call http for every route AngularJs

I really new with AngularJs and I'm trying to create multiple routes with different $http requests. My problem start when the route change and the page content show later.
I figure it out in some way and i think its not the right way.
Hope someone can tell me if there is a better way.
Note: AngularJs version: 1.6 | Using ui router
main.js
var asTwl = angular.module('asTwl', ['ui.router']);
asTwl.controller('generals', function($scope, $http, $timeout){
$scope.pageLoader = false;
$scope.getPageData = function(path, postData, obj){
$scope.pageLoader = true;
$http({
method: 'post',
url: path,
data: postData,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.then(function(response) {
if (response.data) {
$scope.data[obj] = JSON.parse(response.data);
$timeout(function(){
$scope.pageLoader = false;
}, 100)
}
})
.catch(function(e) {
new Error('Error: ', e);
throw e;
})
}
});
asTwl.controller('homePage', function($scope, $http){
var postData = {
//data...
}
$scope.getPageData('path', postData, 'home')
})
asTwl.controller('singlePage', function($scope, $http, $stateParams){
var postData = $stateParams;
$scope.getPageData('path', postData, 'page')
})
asTwl.controller('categoryPage', function($scope, $http, $stateParams){
var postData = $stateParams;
$scope.getPageData('path', postData, 'category')
})
asTwl.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl : 'templates/pages/home.html',
controller : 'homePage'
})
.state('info', {
url: '/info/:id',
templateUrl : 'templates/pages/info.html',
controller : 'singlePage'
})
.state('category', {
url: '/category/:type/:id',
templateUrl : 'templates/pages/category.html',
controller : 'categoryPage'
})
});
Thank you!
First, wrap your $http calls to services. Next,try to use resolve https://github.com/angular-ui/ui-router/wiki#resolve
Edit
Ok, example is here (without wrapping to service):
$stateProvider
.state('home', {
url: '/',
templateUrl : 'templates/pages/home.html',
controller : 'homePage',
resolve: {
routeData: function($http){
return $http({
method: 'post',
url: 'path',
data: postData /* your POST data - i don't know what is it for your code*/,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
}
})
.state('info', {
url: '/info/:id',
templateUrl : 'templates/pages/info.html',
controller : 'singlePage'
})
.state('category', {
url: '/category/:type/:id',
templateUrl : 'templates/pages/category.html',
controller : 'categoryPage'
})
And in controller:
asTwl.controller('homePage', function($scope, routeData){
$scope.someData = routeData;
})
You should first create a service which will be responsible for communicating with Server/API for playing around with data. You could include that method getPageData in that, it returns a promise object.
Service
app.service('myService', function($http){
var self = this;
self.getPageData = function(path, postData){
return $http.post(path,postData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' });
.catch(function(e) {
new Error('Error: ', e);
throw e;
});
});
Then you could easily utilize the resolve option of state of ui-router will wait till your ajax promise gets resolved.
.state('info', {
url: '/info/:id',
templateUrl : 'templates/pages/info.html',
controller : 'singlePage',
resolve: {
getData: function(myService) {
return myService.getPageData('path', {}, 'info')
}
}
})
In a nutshell your routes have to be changed like this:
.state('category', {
resolve: {
data : ($stateParams, dataService) => dataService.getData('path', $stateParams, 'category')
},
url: '/category/:type/:id',
templateUrl : 'templates/pages/category.html',
controller : 'categoryPage'
})
And getData method should be refactored to the service (dataService)

Mapping dropdown selects to URL

I am new to Angular and I can't get my dropdown selectes to map to the browser URL (dynamic based on dropdown selections).
For example, the browser URL is "/home?color=Red&&size=Large". When I paste this URL in a new tab, I want the color and size dropdowns to already be selected as Red and Large. How do I do this?
My AngularJS controller code:
$scope.getResults = function() {
server.getResults($scope.myColor, $scope.mySize)
.success(function(data) {
results = data;
$scope.myColor = $location.search('color', $scope.myColor);
$scope.mySize = $location.search('size', $scope.mySize);
});
};
AngularJS service for the above function:
app.factory('server', ['$http', function($http){
return {
getResults : function(color, size) {
var req = {};
req.color = color;
req.size = size;
return $http({
method: 'GET',
url: 'results',
params : req
});
}
}
}]);
ui-router in Angular:
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl',
reloadOnSearch: false
})
Check this Solution
ui-router in Angular:
$stateProvider.state('home', {
url: '/home/:color/:size',
templateUrl: '/home.html',
controller: 'MainCtrl',
reloadOnSearch: false
})
myApp.controller('MainCtrl', function($scope, $stateParams)
{
$scope.color=$stateParams.color;
$scope.size=$stateParams.size;
});
View
var params= { size:'24', color:red };
$state.go('home', params);

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

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

$location.path() not working with Angular routes

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?

Categories