I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.
I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.
I am trying to use Angular, Meteorjs and Ionic Framework. It went easy thanks to urigo:angular and urigo:ionic packages. Unfortunately I cannot figure out how to configure ionic links and angular routing to get it working. I have tried different combination of html5Mode on/off, base href, anchors, etc, nothing works. Every suggestion how to fix it is welcome?
app.js
angular.module('namo', ['angular-meteor', 'ui.router', 'ionic']);
function onReady() {
angular.bootstrap(document, ['namo']);
}
if (Meteor.isCordova) {
angular.element(document).on("deviceready", onReady);
}
else {
angular.element(document).ready(onReady);
}
router
angular.module("namo").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$ionicConfigProvider',
function ($urlRouterProvider, $stateProvider, $locationProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0)
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
views: {
'content' :{
templateUrl: "client/home/views/home.ng.html",
controller: 'HomeCtrl'
}
}
})
.state('user.profile', {
url: '/profile',
views: {
'content' :{
templateUrl: 'client/user/views/profile.ng.html',
controller: 'ProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
}]);
and main layout
<head>
<base href="/">
</head>
<body>
<ion-nav-view></ion-nav-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="/" class="item" menu-close>Home</a>
<a href="/profile" class="item" menu-close>Profile</a>
</ul>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="content" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
Controllers (home and profile) contains simple "hello home" and "hello profile". Unfortunately only one message is displayed and switching between links does not trigger more messages.
in the router states try to change your views names from content to
home and profile and use the ui-sref instead of href ui-sref="profile"
I have a strange problem with ion-nav-view nesting. When I load the application in a browser, I can see the URL is getting changed to /app/menu, but no contents from menu.html appear on the page. The page is blank.
Following is the code snippet
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.
state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/default.html",
controller: "AdaptiveController"
})
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
});
$urlRouterProvider.otherwise("/app/menu");
})
default.html
<ion-view>
<ion-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-content>
</ion-view>
menu.html
<ion-view>
<ion-header-bar class="bar bar-positive bar-header" align-title="center" no-tap-scroll="true">
<div class="buttons buttons-left header-item">
<span class="left-buttons"></span>
</div>
<div class="bar bar-header bar-positive header-item">Welcome</div>
<div class="buttons buttons-right header-item">
<span class="right-buttons"></span>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-icon-left">
<i class="icon ion-person"/>
<h3>Profile</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
If I change the code in default.html to following it works.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Does than mean ion-nav-view either need tab or ion-side-menus? Can't it work with ion-view?
Try change the code:
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
to
.state("app.menu", {
url: "/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
in hrefs continue write #/app/menu
I'm creating a cordova app with ionic framework, i created a blank app with CLI, in my index.html i have a slide box, in which i have a button in the last slide.
I have registered a click event in that button, in click in the button i would like to navigate to templates/projects.html.
I hope my problem is clear.
Thanks
index.html file
<body ng-app="starter" class="platform-android platform-cordova platform-webview">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">BabyLapse</h1>
</ion-header-bar>
<ion-content>
<ion-slide-box style="height:100%" on-slide-changed="slideHasChanged($index)">
<ion-slide >
<div style="height:100%" class="box blue"><h1>BLUE</h1>
<img src="img/tutorial_img1.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1>
<img src="img/tutorial_img2.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1>
<img src="img/tutorial_img3.jpg" class="image">
</div>
</ion-slide>
<ion-slide>
<div class="box blue"><h1>BLUE</h1>
<img src="img/tutorial_img4.jpg">
</div>
</ion-slide>
<ion-slide ng-controller="FirstSlideCtrl">
<div class="box yellow"><h1>YELLOW</h1>
<!-- <img src="img/tutorial_img5.jpg" >-->
<button style="z-index:1000;height:100px;width:100px" ng-click="go('app.projects');">Créer Projet</button>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-pane>
app.js file
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "index.html",
controller: 'StarterCtrl'
})
.state('app.projects', {
url: "/projects",
views: {
'projects': {
templateUrl: "templates/projects.html",
controller: 'ProjectsCtrl'
}
}
});
//$urlRouterProvider.otherwise('/projects');
})
.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);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
})
});
controllers.js
angular.module('starter.controllers', ['ui.router'])
.controller("StarterCtrl", function($scope) {
$scope.data = {
numViewableSlides: 0,
slideIndex: 0,
initialInstruction: true,
secondInstruction: false
};
$scope.slideHasChanged = function(index) {
$scope.data.slideIndex = index;
};
$scope.go = function(route) {
alert('1');
$state.go(route);
};
})
.controller("ProjectsCtrl", function($scope) {
$scope.playlists = [{
title: 'Reggae',
id: 1
}, {
title: 'Chill',
id: 2
}, {
title: 'Dubstep',
id: 3
}, {
title: 'Indie',
id: 4
}, {
title: 'Rap',
id: 5
}, {
title: 'Cowbell',
id: 6
}];
})
.controller("FirstSlideCtrl", function($scope, $state) {
$scope.go = function(route) {
alert(route);
$state.go('app.projects');
};
});
I cannot follow your code so I'll try to recreate.
In Ionic/Cordova you should have an index.html which would be your entry for the application.
This is the place where you bind your HTML with the angular app and where your reference your scripts.
It should have a body with the main nav-view <ion-nav-view>:
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
My ng-app is called app but you can easily replace it with starter.
Then you would have separate "pages" for different views. I can imagine in your situation you would have one view for the slider and the second one for the project's creation.
Each view must be defined in a <ion-view> where you're going to a have a content <ion-content>.
I imagine you're going to need to states:
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: 'mainController',
})
.state('projects', {
url: '/projects',
templateUrl: 'projects.html',
controller: 'projectsController',
});
if you want to go to projects from the slider page you simply have to:
$state.go('projects')
This is the end result in a plunker.
As you can see I got read of the abstract view cause it seems to me that you don't really need it as you're not using any base template: side-menu or tabs.
You can always add it but your abstract should never refer the index.html file.
I'm having problems using $ionicHistory on pages where ion-tabs are used. I use this to navigate to the previous view (using goBack()). When I put tabs in a view, the history is wrong, back view is two views before.
To demonstrate this I have create a demo app (plunker here) that has 4 pages/views. Page 1 -> Page 2 -> Page 3 -> Page 4. The last page has tabs on it.
angular
.module("demoapp", ['ionic'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('first', {
url: '/',
controller: 'firstController',
templateUrl: 'first.html',
})
.state('second', {
url: '/second',
controller: 'secondController',
templateUrl: 'second.html',
})
.state('third', {
url: '/third',
controller: 'thirdController',
templateUrl: 'third.html',
})
.state('fourth', {
url: '/fourth',
controller: 'fourthController',
templateUrl: 'fourth.html',
});
$urlRouterProvider.otherwise("/");
}])
.factory("historyFactory", ['$ionicHistory', function($ionicHistory){
var show = function() {
var text = "";
var vh = $ionicHistory.viewHistory();
if(vh !== null) {
text += "VIEWS=" + JSON.stringify(vh.views);
text += "BACK=" + JSON.stringify(vh.backView);
}
return text;
}
return {
show : show,
}
}])
.controller("firstController", [
'$scope',
'$location',
function($scope, $location){
$scope.next = function() {
$location.path("/second");
};
}])
.controller("secondController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/third");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("thirdController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/fourth");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("fourthController", [
'$scope',
'$ionicHistory',
'historyFactory',
function($scope, $ionicHistory, historyFactory){
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}]);
This is how the view with tabs looks like:
<ion-view>
<ion-tabs class="tabs-balanced">
<ion-tab title="Tab One">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 1</h1>
</ion-header-bar>
<ion-content class="has-header">
<h3>History</h3>
<p>{{data}}</p>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
On the second page, the view history looks like this:
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":null,"stateId":"second","stateName":"second","url":"/second"}}
BACK=
{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}
On the third page, one more view is added:
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
But on the fourth page, with the ion-tabs the view history remains the same.
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
Is this a bug with $ionicHistory when using ion-tabs or am I doing something wrong in the tabs view?
Try to wrap ion-tabs to avoid this problem
<ion-view>
<div>
<ion-tabs class="tabs-balanced">
<ion-tab title="Tab One">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 1</h1>
</ion-header-bar>
<ion-content class="has-header">
<h3>History</h3>
<p>{{data}}</p>
</ion-content>
</ion-tab>
<ion-tab title="Tab Two">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 2</h1>
</ion-header-bar>
<ion-content class="has-header">
<p>Content of tab 2.</p>
</ion-content>
</ion-tab>
</ion-tabs>
</div>
</ion-view>
http://plnkr.co/edit/pVDu9e7QZHzMt3A154i7?p=preview
The ion-tabs introduce parallel stacks to maintain history of each tab and so the $ionicHistory.goBack changes the history state in the current stack. You can solve your issue by removing the tab or adding tabs to all views. There is an excellent explanation for this in this SO post: https://stackoverflow.com/a/31385026/3878940
What worked for me was adding an empty ion-view above ion-tabs at the very top of the page.
I guess this 'tricked' the $ionicHistory into believing that my page was rendering a regular view rather than a tabbed view.