Hi I'm trying to develop (using ionic, so also angular) a feature in which users can see all events, and see all attending participants. Of all these participants there is information available, so I tried making a master-detail pattern within the master-detail (so basically master-detail-detail).
Problem is, it is returning a 404 while the link is http://localhost:8100/evenement/1/deelnemers/1 and the http function should return a JSON object but I couldn't test it since the page or url wasn't found.
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('newsApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('detail',{
url: '/evenement/:eventId',
templateUrl: 'detail.html',
controller: 'DetailCtrl'
})
.state('deelnemer', {
url: '/evenement/:eventId/deelnemers/:deelnemerId',
templateUrl: 'deelnemer.html',
controller: 'DeelnemerCtrl'
})
;
$urlRouterProvider.otherwise("/");
});
app.factory('Evenementen', function($http){
var cachedData;
function getData(callback){
var url = "http://localhost:8080/evenementen";
$http.get(url).success(function(data){
cachedData = data;
callback(data);
});
}
return {
list: getData,
find: function(pid, callback){
$http.get("http://localhost:8080/evenement/"+pid).success(function(data){
console.log("greater succes");
console.log(data);
callback(data);
});
callback(event);
}
};
});
app.controller('ListCtrl', function($scope, $http, Evenementen){
$scope.news = [];
$scope.getMovieDB = function(){
Evenementen.list(function(evenementen){
$scope.evenementen = evenementen;
});
};
$scope.getMovieDB();
});
app.controller('DetailCtrl', function($scope, $http, $stateParams, Evenementen){
Evenementen.find($stateParams.eventId, function(evenement){
$scope.evenement = evenement;
$scope.deelnemers = evenement.alleDeelnemers;
});
});
app.controller('DeelnemerCtrl', function($scope, $http, $stateParams){
$http.get("http://localhost:8080/evenementen/"+ $stateParams.eventId+"/deelnemers/"+$stateParams.deelnemerId)
.success(function(data){
$scope.deelnemer = data;
});
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Urls in Angular and ionic use hash, so your url should be:
http://localhost:8100/#/evenement/1/deelnemers/1
Related
I have userAccess flag in controller if it returns false i want hide all the application from user and redirect user to access.html with some access required form So with below code it throws error transition superseded, Any idea how to achieve this task with angularjs ui.router ?
mainCtrl.js
$scope.cookie = $cookies.get(jklHr');
var parts = $scope.cookie.split("|");
var uidParts = parts[7].split(",");
$scope.newUser._id = uidParts[0];
var userAccess = AuthService.getCurrentUser($scope.newUser._id);
if(!userAccess) {
console.log("Access Deinied");
$state.go('app.access');
}
app.js
angular.module('App', [
'ui.router',
'ui.bootstrap',
'ui.bootstrap.pagination',
'ngSanitize',
'timer',
'toastr',
'ngCookies',
]).config(function($stateProvider, $httpProvider, $urlRouterProvider) {
'use strict'
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('app.home');
});
$stateProvider
.state('app', {
abstract: true,
url: '',
templateUrl: 'web/global/main.html',
controller: 'MainCtrl'
})
.state('app.home', {
url: '/',
templateUrl: 'view/home.html',
controller: 'MainCtrl'
})
.state('app.dit', {
url: '/dit',
templateUrl: 'view/partials/logs.html',
controller: 'LogsCtrl',
resolve: {
changeStateData: function(LogsFactory) {
var env = 'dit';
return LogsFactory.resolveData(env)
.then(function(response) {
return response.data
});
}
}
})
.state('app.access', {
url: '/access',
templateUrl: 'view/partials/access.html',
controller: 'AccessCtrl'
});
});
Create an interceptor, all http class will go thrown the interceptor. Once the "resolve" piece is executed and return 401 you can redirect to the login screen or 403 to the forbidden view.
https://docs.angularjs.org/api/ng/service/$http
The problem is that you are trying to change a state while a previous state change is still in course.
The ui-router has events for when a state change starts and ends.
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
});
So your redirect should be in there. Anyway I recommend you move that user check to a higher level in your app, like .run(), with some exception for the login states. That way you won't have to check in every controller individually.
Make sure you've most updated version of angularjs & angular-ui. If you're using older version then check compatibility of angular-ui version with your angular version. https://github.com/angular-ui/ui-router/issues/3246
If that doesn't work, add following line inside app.config
$qProvider.errorOnUnhandledRejections(false)
don't forget add dependency $qProvider in config function.
I wan't to be able to change pages based on url. My url's look like this http://todolist.com/#/1 where last number is page number. So far my pagination is working (angular ui bootstrap). If i try to change page with numbers or buttons in pagination row the pages will change based on response. But url are not changing in url bar and if i change url manually the pages won't change.
This is my controller
controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $routeParams) {
if($routeParams.pageNumber == undefined || $routeParams.pageNumber == null){
$scope.currentPage = 1;
} else {
$scope.currentPage = $routeParams.pageNumber;
}
getData();
//get another portions of data on page changed
$scope.pageChanged = function () {
getData();
};
/**
* Get list of todos with pagination
*/
function getData() {
todoFactory.index($scope.currentPage).then(function (data) {
$scope.totalItems = data.paging.count;
$scope.itemsPerPage = data.paging.limit;
$scope.todos = data.Todos;
});
}
My routes
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/templates/todolists.html',
controller: 'todoCtrl'
}).when('/:pageNumber', {
templateUrl: 'app/templates/todolists.html',
controller: 'todoCtrl'
}).otherwise({ redirectTo: '/'});
What do i have to do to make pagination based on url working. If you need any additional information, please let me know and i will provide. Thank you
you can use the updateParams function of $route to update the url.
So your code would look like this:
//get another portions of data on page changed
$scope.pageChanged = function () {
//getData();
$route.updateParams({pageNumber: $scope.currentPage});
};
This will cause the url to change. However keep in mind that this will destroy and recreate your controller.
Personally I avoid using the build in Angular router and prefer to use UI-Router instead. UI-Router uses a state base approach with a nice clean interface
So in order to use UI-Router you have to grab it from here or install it with your favorite package manager.
Your routes would be configured like this:
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider.state('home', {
url: '/',
templateUrl: 'app/templates/todolists.html',
controller: 'todoCtrl'
})
.state("details", {
url: '/:pageNumber',
templateUrl: 'app/templates/todolists.html',
controller: 'todoCtrl'
});
});
As you can see in the above sample, states get names with UI-Router. You can use those names later in your controllers and templates to reference the states. In addition to that you can have nested states.
Example in your controller:
controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $state, $stateParams) {
if(!$stateParams.pageNumber){
$scope.currentPage = 1;
} else {
$scope.currentPage = $stateParams.pageNumber;
}
getData();
//get another portions of data on page changed
$scope.pageChanged = function () {
$state.go("details", {pageNumber: $scope.currentPage });
};
/**
* Get list of todos with pagination
*/
function getData() {
todoFactory.index($scope.currentPage).then(function (data) {
$scope.totalItems = data.paging.count;
$scope.itemsPerPage = data.paging.limit;
$scope.todos = data.Todos;
});
}
I'm developing an app and after the login the should redirects the user from the login page to the homepage, I'm doing the login through an API file on the server (in this moment the localhost) with http.post method and if the login is correct the server return the string "T" then in my app I control if the string is equal to "T" and if it is equals the app should redirects the user to the homepage.
I've only one problem, which is proper use of the function state.go(); because I don't see any errors in the console but the page doesn't change but the url (I'm testing with ionic serve) change in exactly way.
This is my code:
APP.JS:
angular.module('starter', ['ionic', 'ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
//abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
templateUrl: '/login.html',
controller: "LoginCtrl"
})
.state('main', {
url: "main.html",
templateUrl: "/main.html",
})
}])
.controller('LoginCtrl', function($scope, $http, $state, $ionicHistory) {
$scope.data = {};
$scope.data.funzione = "login";
$scope.submit = function(){
//console.clear();
console.log("Dentro funzione");
console.log($scope.data.funzione);
var link = 'http://localhost/<path>/api.php';
$http.post(link, {mail : $scope.data.mail}, {pwd : $scope.data.pwd}, {funzione : $scope.data.funzione})
.then(function (res){
console.log("Dentro http.post");
$scope.response = res.data;
console.log($scope.response);
if ($scope.response != "F"){
console.log("Dentro if");
$state.go('main');
} else {
console.log("Dentro else");
}
});
};
});
THIS IS MY FOLDER: (www)
AND THIS IS THE URL AFTER STATE.GO():
http://localhost:8100/login.html#/main.html
But it should be:
http://localhost:8100/main.html
Ionic uses ui-router. You make a correct use with:
$state.go('main');
This will only work if the condition you check for is true. What do the console.log() statements print?
********* UPDATED with fallback state **********
Also, define a fallback state:
You define the url and templateUrl incorrectly. The url should be the address of the state you see in address bar, the templateUrl is the HTML file that should be displayed on hitting that url.
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
//abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
templateUrl: 'login.html',
controller: "LoginCtrl"
})
.state('main', {
url: "/main",
templateUrl: "main.html",
});
$urlRouterProvider.otherwise('/login');
}])
AND THIS IS THE URL AFTER STATE.GO():
http://localhost:8100/login.html#/main.html
But it should be:
http://localhost:8100/main.html
Answer:-
Actually what am understand from your question is, You have a login screen separately and once you login completed then it will be go to main screen. You have used ng-view in login.html page instead of your main.html page. So now your login.html is a master page, that's why you getting that URL structure.
okay let's do. kindly checkout the flowing details,
did you call your all scripts in login.html?
and please check which one is your master page?
I am trying to create a pagination using Angularjs in Ionic Framework. Please help me to write code of pagination. I am getting data form this json url.
controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', function($scope, $http, $log) {
$http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
.then(function(response)
{
$scope.data = response.data;
});
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
playlists.html
<ion-view view-title="Playlists">
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in data | firstPage:currentPage*pageSize | limitTo:pageSize" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<< 1/2/3/4/5 >>
You need to set pageSize to the total number of movies returned as the response does not contain any meta data about the response:
.controller('PlaylistsCtrl', function($scope, $http, $log) {
$http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
.then(function(response)
{
// populate data with the array of movies
$scope.data = response.data;
// set the page size to the total number of movies
$scope.pageSize = $scope.data.length;
});
});
I have an angular app with three views. When it loads it runs some code to populate the $scope variables. When I change views and then go back to the controller I want the initial code to run again but it doesn't. It seems it is cached and the $scope variables are not updated based on what happened.
How can I force the controller to run the initialisation code every time the view is loaded?
My routes:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home.html'
})
.when('/teach', {
controller: 'TeachController',
templateUrl: 'teach.html'
})
.otherwise({
redirectTo: '/'
});
});
The code I want to run every time the '/' route is clicked:
getSubPools.success(function(data) {
$scope.userPools = data;
});
Controller in full:
app.controller('HomeController', ['$scope', '$filter', 'stream', 'removeDroplet', 'qrecords', 'helps', 'get_user', 'updateRecords', 'getSubPools', function($scope, $filter, stream, removeDroplet, qrecords, helps, get_user, updateRecords, getSubPools) {
get_user.success(function(data) { //get current user
$scope.user = data;
});
getSubPools.success(function(data) {
$scope.userPools = data;
});
stream.success(function(data) {
$scope.stream = data;
if ($scope.stream.length === 0) { //determine if user has stream
$scope.noStream = true;
} else {
$scope.noStream = false;
}
$scope.getNumberReady(); //determine if any droplets are ready
if ($scope.numberReady === 0){
$scope.noneReady = true;
} else {
$scope.noneReady = false;
$scope.stream = $filter('orderBy')($scope.stream, 'next_ready'); //orders droplets by next ready
}
});
$scope.showEditStream = true;
$scope.showStream = false;
$scope.rightAnswer = false;
$scope.wrongAnswer = true;
$scope.noneReady = false;
$scope.subbedDroplets = [];
$scope.focusInput = false;
}]);
You can use the $routeChangeStart and $routeChangeSuccess events to reload the data into the controller:
https://docs.angularjs.org/api/ngRoute/service/$route
Edit:
As mohan said as this will work for every route change, you can make a service to catch these events and for each route broadcast a special event.
And in the relevant controller/service listen to this event and reload data
If you want to force reload, then add an click function like follows,
Note: This will work only if you use $stateProvider
Home
and in controller ,
$scope.goToHome = function(){
$state.transitionTo('home', {}, {reload:true});
}
The issue here was that on clicking the link to '/' not all of the initialisation code was rerunning. Rather than making calls to the database to get fresh data, angular was just returning old data. The way I fixed this was to rewrite my factories. The factories that were failing were written:
app.factory('stream', ['$http', function($http) {
return $http.get('/stream/')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
The factory that worked every time was written:
app.factory('stream', ['$http', function($http) {
return {
fetch: function () {
return $http.get('/stream/');
}
}
}]);
Now it runs every time. I am not sure why though.