I use Phonegap 3.0 and AngularJS 1.1.5.
I want to remove the 300ms delay on touch devices. Therefore I integrated angular-mobile (see v1.1.5 angular-mobile.js).
In my app.js I have
var myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile'])
.config(function ($compileProvider) {
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/homeView.html', controller: 'HomeCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
In my partial:
<a ng-click="showTime()" >Alert</a>
My Controller:
function HomeCtrl($scope, $rootScope, $navigate) {
$scope.showTime = function () {
console.log(Date.now());
};
}
The text is printed, but you see that it is delayed by the 300ms because it does not appear right now in the log.
Can anyone help me with that?
Maybe I'm doing something really wrong ;-)
THanks!
I switched to AngularJS 1.2 and am using the ngTouch directive from the angular code their! That works!
Related
I have a situation where a third party library adds "#checkout" at the end of the URL (it's Snipcart) but Angular cannot seem to detect it and it just goes back to the /test page (localhost:3000/test).
The reason the URL is: /test is intentional as I have html5mode enabled.
This works well in a normal static HTML project (so not Angular) but when I used ui.router with Angular 1.x, it doesn't work.
My angularApp.js file:
var mainApp = angular.module('mainApp', ['ui.router']);
mainApp.config(function($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise(function(){
console.log('otherwise activated');
});
var helloState = {
name: 'root',
url: '/',
templateUrl: '/partial/main.html',
controller: 'mainController'
}
var aboutState = {
name: 'test',
url: '/test',
views: {
'#': {
templateUrl: '/partial/yamuna.html',
controller: 'testController'
}
}
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
mainApp.controller('mainController', ['$scope', '$rootScope', function($scope, $rootScope){
console.log('mainController activated');
}]);
mainApp.controller('testController', ['$scope', '$rootScope', function($scope, $rootScope){
console.log('testController activated');
}]);
So the paths below work as expected:
localhost:3000/ ##mainController activated
localhost:3000/test ##testController activated
But, Snipcart appends the path to:
localhost:3000/test#checkout - which I want to be able to go to the otherwise route and not fall back to localhost:3000/test#
Any way around this? As Angular 1 is quite old, I will have to come up with a workaround myself.
Edit
I can detect the path change with: (FYI this one below is in ngRoute as I was playing around with the various options):
mainApp.run(
['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
$rootScope.$on("$routeChangeStart",
(event, current, previous, rejection) => {
console.log($window.location.href);
})
}])
But - what do I do after that? I can filter out only that specific path where #/checkout is hit but where do I redirect the site to? Not sure if this is even worth an edit but I thought I will mention it for completeness.
My ONLY option it seems is to upgrade to Angular 8 or higher but as I am so close to the deadline, I will like to explore all the options with Angular 1.x first.
Thanks
For some reason, when I load my page with an ng-view on it, said ng-view is commented out when I inspect it in my console, and I have no idea why.
Reading other threads with a similar problem has proven fruitless. See code snippets below. Currently just console logging routeParams as I am a newbie to AngularJS and I want to make sure I get all the values I need and know what to work with. This is in a Rails project, for reference:
Show Page
<div class ="row" ng-view>
</div>
App.js
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
myApp.config(['$routeProvider', "$locationProvider", function($routeProvider, $locationProvider){
$routeProvider.when("games/:id", {
templateUrl: "timer.html",
controller: 'CountdownController'
})
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}])
controllers.js
'use strict';
myApp.controller('CountdownController', ["$scope", "$http", "$routeParams", function($scope, $http, $routeParams){
console.log($routeParams)
}])
Ah, simple syntax error. I didn't have a leading backslash for that games/:id route! It should look like /games/:id.
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7
I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
I built a simple app with angular 1.0.7 I realized that I was using old version and I wanted to change the version to latest: 1.2 or 1.3 however then my app doesn't work..
How do I know which feature is not supported or what I have to change?
App:
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/ShowOrder/:carId', {
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
}).
when('/ShowCarOrder', {
templateUrl: 'templates/list.html',
controller: 'showCarsCtrl'
});
}]);
sampleApp.controller('ShowOrderController', function($scope, $http, $routeParams) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
$scope.car_id = $routeParams.carId;
});
});
sampleApp.controller('showCarsCtrl', function($scope, $http ) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
});
});
Live: http://plnkr.co/edit/JpL8gmMJ2hsZistfNoCl?p=preview
Thanks in advance!
The router has been moved into its own ngRoute route package in Angular 1.2. You need to import that package to make your code work. See the Plunker here.
A note for future debugging: You can diagnose errors like these by following the error messages in the developer console. In this particular case, had you simply clicked the link in the error message you would have been redirected to a page that would have told you what to do.