AngularJS ngRoutes not always working on mobile browsers - angularjs

I am building my website based on MEAN stack and I am having trouble with angular routing on mobile browsers for which I am using client side routing with ngRoute.
The site works fine in every possible desktop browser, even the mobile design (it has a different menu than the desktop version), but on mobile browsers I have to click about 10 times before the menu responds in both versions (desktop and mobile - depends on the resolution of the browser), that goes for every link inside the website. I have tried googling but have not found anyone with similar issues.
Can anyone point me in the direction of where do I start troubleshooting this? I am using ngAnimate for ng-view animations and some css transitions for the menu borders.
The development version of the website can be found here: http://meanapp1-boilerplatesand.rhcloud.com
Excuse the foreign language, the content isn't the issue here anyway.
Routes code:
var app = angular.module('myApp', [
'ngRoute',
'angular-carousel',
'ngTouch',
'ngAnimate',
'ngResource',
'myApp.domov',
'myApp.onas',
'myApp.fotogalerija',
'myApp.fotogalerija.single',
'myApp.novice',
'myApp.novice.single',
'myApp.kontakt',
'myApp.storitve',
'myApp.version',
'myApp.admin',
'myApp.meni',
'duScroll'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/domov'});
}]);
And then for every module declared I have more or less the same code:
'use strict';
angular.module('myApp.novice', ['ngRoute', 'ngResource', 'myApp.novice.single'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/novice', {
templateUrl: 'novice/novice.html',
controller: 'noviceCtrl'
});
}])
I have declared modules that aren't acessible from the main menu as submodules of menu item modules. The routing code:
'use strict';
angular.module('myApp.fotogalerija.single', ['ngRoute', 'ngResource', 'angular-carousel'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/fotogalerija/:item/single', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
$routeProvider.when('/fotogalerija/:item/single/:index', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
}])

Related

while reloading angular page getting error as cannot GET/page.html

There is no a clear solution for my below question in stackoverflow, i have searched for many but its not suitable
note: am not using GRUNT
Actually am developing a application using Node and Angular,
while using angular-route to route a page from application its working fine, but reloading browser shows me Cannot GET /secure/home
app.js
var myApp = angular.module('Whizzrd', ['ngRoute']).
config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.
when('/secure/home', {
templateUrl: '/pages/static/home.html',
controller: 'homeController'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
}]);
moving through home.html through application is working fine, but while reloading the page using browser am getting error as
Cannot GET /secure/home
Am stuck with this for more than 2 days, Help will be appreciated really

Angular JS problems with Ng-Route, Gulp, and Json

I'm pretty new to the world of front end development and I'm working through my first project with AngularJS. I'm also using Yeoman, Gulp, Bower to set up my project, which is also bran new to me... I've kind of crafted a build from the yo generator Gulp Angular and put my own personal touches to it. I'm sure I did more harm than good :p but I'm learning.
Anyways I've been coding all day and am really stumped why my project is having trouble when I use the ng-route. The home display works correctly but when I try to click on a link to a deeper page it just refreshes back to the home. I'm using Json files rather than a server and the Gulp Angular set up has all my files compiled to another folder when launching a server. Is there any chance the issue could lie within the compiler?
I'm starting to go crazy so I think I'm gonna call it quits for the night but if anyone has the time and the generosity to look over my github repo I would be over joyed :)
Thanks
https://github.com/jleibham/BhamDesigns.git
App Module
(function() {
'use strict';
var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'mm.foundation', 'appControllers']);
bhamDesignsApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/projects', {
templateUrl: 'partials/projects.html',
controller: 'ProjectsController'
}).
when('/projects/:projectId', {
templateUrl: 'partials/gallery.html',
controller: 'GalleryController'
}).
otherwise({
redirectTo: '/projects'
});
}]);
})();
App Controller
(function() {
'use strict';
var appControllers = angular.module('appControllers', []);
appControllers.controller('ProjectsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('app/json/projects.json').success(function(data){
$scope.projects = data;
});
$scope.orderProp = '-year';
}]);
appControllers.controller('GalleryController', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.projectId = $routeParams.projectId;
}]);
})();
You are calling the wrong url and your routes do not recognize the url you do call with your href, so it redirects you. In you are going to call this:
href="#/json/galleries/(what ever the project.id is)
Then your routing should look similar to this:
when('/json/galleries/:projectId', { /// the rest of your code
You are going to want to use $routeParameters with ngRoute. here is a great example

angularjs ngdialog is not working

I am using angularjs in my application, by using ngDialog the page is not loading and shows blank page
I have used like
angular.module('pswApp', ['ngRoute', 'ngAnimate', 'ngTouch', 'ngDialog', 'ui.grid', 'myApp','newApp'])
.config(['$routeProvider',
function($routeProvider) {}]);
But the page is not loaded, when i use ngDialog in the module wherever i use it. I have used the ngDialog.js file in the common html file and i load the pages using ng route
Even i used it in another js file like this
angular.module('myApp', [ 'ngDialog' ]).controller('mainCtrl',
function($scope, ngDialog) {
});
The page is not getting loaded, is there any other way to solve this issue.
You are declaring module again while defining controller.
Injection should also be in controller.
angular.module('myApp', []).controller('mainCtrl', 'ngDialog',
function($scope, ngDialog) {
});

AngularJS RouteProvider and ExpressJS sendfile

In my Angular app, I'm trying to render partials that load into the index page when a user clicks a link. It worked fine before with the following code:
//app.js in Angular
angular.module('myApp', [
'ngSanitize',
'ngRoute',
...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
$routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/view1'});
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.url.com/**']);
$locationProvider.html5Mode(true);
}]);
But when I add Express, it doesn't work:
var express = require("express");
var logfmt = require("logfmt");
var app = express();
app.use(logfmt.requestLogger());
app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('*', function(req, res) {
res.sendfile('./app/index.html');
});
This works fine if I just want to display the index page. When I add the following code though, it displays the plain HTML (of the partial), but without the CSS or Javascript.
app.get('/partials/currentFile.html', function(req, res) {
res.render('./app/partials/currentFile.html');
});
How do I go about rendering a partial with Express in a way that works with Angular?
I've tried looking at the Express api for get(), render and sendfile, but they weren't that helpful in my situation. Other users have asked a similar question on here before, but they usually involve another file that Express routes to and I'm wondering if I can do it without adding any extra files since it's already an issue with adding just a file to include Express.
The currentFile.html doesn't load any CSS or Javascript itself. Before I added Express, it was a partial that was loaded in index.html, which loaded all the extras.
Any help is appreciated. Thank you
I didn't fix the problem directly, but I worked around it. The problem was that I wanted to render a partial onto the index page. The overarching goal of the app is a single-page application, so in the end, it's just one page that matters.
It would have been nice to have different partials to render for testing, but alas nobody seems to know either what I'm asking or I'm complicating the issue. Either way, I've found a way around it by just getting rid of all the other partials and just redirecting all URL requests to the single page app.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/file'});
...
Note that the partials view1 and view2 DO NOT work when trying to visit domain.com/view1 or /view2.

How implement swipe, snap to move page (ionic + angularjs)

I developing with Ionic framework and angularjs.
My app have about 5 menu and design like google play store
New product
Bestseller
Promotion
Store
...
How do swipe to move "New product" to Bestseller page,...(google store play - like)
This my route:
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/',
{
controller: 'NewProductController',
templateUrl: 'app/views/newproduct.html'
})
.when('/bestseller',
{
templateUrl: 'app/views/bestseller.html',
controller: 'BestsellerController'
})
.otherwise({ redirectTo: '/' });
});
I tried ng-swipe-left, ng-swipe-right:
<div ng-swipe-right=goToPage('bestseller')>
// new product page
</div>
$scope.goToPage = function (page) {
$location.url(page);
};
but not animation.
Please help solution. thank you so much.
i've got angular swipe working (not with ionic tho, but i think it's an angular matter).
1) Be sure u have the ngAnimate and ngTouch as a module (ofcourse also add them in your html file as dependencies (js files):
angular.module('cbosApp', [
'ngAnimate', //this!
'ngTouch', // and this!
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'frapontillo.bootstrap-switch'
])
2) you forgot quotes (") arround your statement
<div ng-swipe-right="goToPage('bestseller')">
// new product page
</div>
DO not forget to put $location as a parameter in your controller!
angular.module('cbosApp')
.controller('SettingsCtrl', function ($scope,$rootScope,$location) {});
Your function is correct, in every controller if you do it your way!
IMPORTANT: IF u test it, the click and release click must happen on the DOM element (div here) otherwise it will not work.
I don't think the Ionic Framework provides such a thing at the moment. However, you can come pretty close using the SlideBox view (http://ionicframework.com/docs/angularjs/views/slide-box/).
Here is a quick example: http://plnkr.co/edit/FowDzU?p=preview

Resources