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
Related
I don't understand why I can't get this to work.
I'll share the relevant code, let me know if you need to see more stuff.
Index.html
<div class="col-md-3">Liberals</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/liberals", {
templateUrl: "partials/liberals.html"
, controller: "LiberalsController"
});
});
app.controller('LiberalsController', function ($scope, $http) {
var url = "workingURL"; /// changed function to a simple string message to test
$scope.message = "Hello Liberals";
});
(partial view) liberals.html
<h1>Hello</h1>
{{message}}
PS: I'm not working on a political hate website for or against liberals!
As of AngularJS 1.6, the default value of the hashPrefix has been changed to !.
There's two ways to get your routing to work with AngularJS 1.6+:
Add the hashprefix (!) to your href's:
Liberals
Change (remove) the hashPrefix value using $locationProvider:
$locationProvider.hashPrefix('');
I've created a working plunkr in which I used the second approach:
https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview
The commit regarding this breaking change can be found here
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
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'
});
}])
I am running through a course at the moment on AngularJS and it has just introduced the concept of routing.
My problem is the app.config function is setup in app.js however, the function doesn't seem to ever be called and therefore the routes are not setup.
The common problem is the ngRoute not being declared however, it is. I'm not sure if there is a problem with the versions of Angular that I'm using but these were taken from the online course.
I have a public plnkr for anyone to view and have a look at http://plnkr.co/edit/L2FG4M?p=preview
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
// If we navigate to /main then the page used will be main.html and the controller
// MainController, if however something else is provided then we will
// redirect to /main as well
$routeProvider.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({
redirectTo: "/main"
});
});
}());
Any help is appreciated, I've exhausted my options now.
Thanks
Marc
In your MainController.js file, you defined a new module with same name as in app.js:
angular.module("githubViewer", []);
What you want to do is retrieve the already defined module. You can acheive that by removing the []:
angular.module("githubViewer");
Look here at the "Creation versus Retrieval" section.
I have been looking through multiple tutorials and other stack overflow posts with no success for my app.js $routeProvider. Here is github link to project https://github.com/StudentJoeyJMStudios/PetPinterest.git
Here is my code for app.js
var app = angular.module('se165PetPinterestWebApp', [
'ngAnimate',
'ngCookies',
'ngRoute'
]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/select',
{
templateUrl: '/views/categorySelection.html',
controller: 'CatSelCtrl'
}).
otherwise(
{
redirectTo: '/'
});
}]);
When I want to navigate to new page I know to injuect $location and manipulate the path using the $location dependency but it does not navigate to new page. Navigating pages this way does it reload js files such as my service file? Please help thank you in advance.
Did you remember to include the ng-view directive in your index.html?
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
https://docs.angularjs.org/api/ngRoute/directive/ngView