I am experiencing a problem when trying to test my portfolio website on my mother’s mobile (Samsung Galaxy JS 3). The images and titles of the projects get loaded onto the index page from JSON with ng-repeat and the links to the information are made from the project IDs with ui-sref. The website loads on the mobile all right and it can direct to the about page, which also uses ui-sref, but it cannot direct to the child pages – it either stays on the main page, or if I force it to go to one of the pages, it displays a blank page with a toggle menu (ng-include header).
It works fine on a Sony Xperia M4, Samsung Galaxy Young, Galaxy A5, my desktop computer (Windows 8.1) and a Mac (not sure about the operating system). I’ve followed the “Hello Solarsystem” tutorial, which also seems to have the same issue when I tried the Plunker version of it on her phone this morning (7th of June). I have ensured that the site was using the most up to date version after reading ui-sref not working in nested views, I’ve tried adding ui-view to the template that displays the project’s links as is advised on here: Ui-sref not generating clickable links/not working and I am now feeling stuck.
Sorry if my question is a bit long, but I've never had to write one before and I don't want to miss anything.
EDIT: I have now made a plunk with the exact code I'm using for the projects - Plunker and I have now removed ui-router, so it does not load the inner page as a sub page, but at least is viewable in all browsers - the plunk is using ui-router.
The code that I'm thinking has issues is being listed below.
projects.html - view
<div class="container">
<div class="wrapper">
<div class="col-xs-12 col-sm-6 col-md-4 project-block" ng-repeat="project in $ctrl.projects">
<a ui-sref="project({ projectId: project.id })" ui-sref-active="active">
<div class="grid-item university">
<div class="grid-caption">
<img ng-src="{{project.thumb}}" alt="{{project.name}} ({{project.desc}})" id="portfolio-thumb-{{project.id}}" />
<div class="titles">
<div class="grid-projects title">{{project.name}}</div>
<div class="grid-projects desc">{{project.desc}}</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<ui-view></ui-view>
index.html
<body ng-app="myPortfolio">
<div id="wrapper">
<header ng-include="'header.html'"></header>
<div id="page-content-wrapper">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
<ui-view></ui-view>
<uir-state-vis class="statevis" width="300" height="100"></uir-state-vis>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</body>
app.js
var myApp = angular.module('myPortfolio', ['ui.router', 'slick', 'ngAnimate', 'ngRoute', 'ngResource', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);
myApp.config(function ($stateProvider) {
// An array of state definitions
var states = [
{
name: 'about',
url: '/about',
component: 'about'
},
{
name: 'projects',
url: '/projects',
component: 'projects',
// It delegates to the ProjectService to HTTP fetch (async)
// The project component receives this via its `bindings: `
resolve: {
projects: function (ProjectService) {
return ProjectService.getAllProjects();
}
}
},
{
name: 'project',
// This state takes a URL parameter called projectId
url: '/project/{projectId}',
component: 'project',
// This state defines a 'project' resolve
// It delegates to the ProjectService, passing the projectId parameter
resolve: {
project: function (ProjectService, $transition$) {
return ProjectService.getProject($transition$.params().projectId);
}
}
}
]
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
});
myApp.config(function ($urlRouterProvider) {
// when there is an empty route, redirect to /index
$urlRouterProvider.when('', '/projects');
});
// preload the async data
myApp.run(function ($http) {
$http.get('data/projects.json', { cache: true });
$http.get('data/info.json', { cache: true });
});
//Make html in JSON file trusted
myApp.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
projects.js - component
angular.module('myPortfolio').service('ProjectService', function($http) {
var service = {
getAllProjects: function() {
return $http.get('data/projects.json', { cache: true }).then(function(resp) {
return resp.data;
});
},
getProject: function(id) {
function projectMatchesParam(project) {
return project.id === id;
}
return service.getAllProjects().then(function (projects) {
return projects.find(projectMatchesParam)
});
}
}
return service;
})
projects.js - service
angular.module('myPortfolio').service('ProjectService', function($http) {
var service = {
getAllProjects: function() {
return $http.get('data/projects.json', { cache: true }).then(function(resp) {
return resp.data;
});
},
getProject: function(id) {
function projectMatchesParam(project) {
return project.id === id;
}
return service.getAllProjects().then(function (projects) {
return projects.find(projectMatchesParam)
});
}
}
return service;
})
