Can someone help me on how to fix this?
Seems like I can't get my button to link to another page.
I did some research and try to follow the demo, but it's dead end.
I don't know which part I should fix.
register.html
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="Register">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="RegistrationCtrl" class="content">
<button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
after.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="After">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="AfterCtrl" class="content">
<button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic'])
app.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();
}
});
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/',
templateUrl: 'register.html',
controller: 'RegistrationCtrl'
})
.state('after', {
url: 'after',
templateUrl: 'after.html',
controller: 'AfterCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
I could not find AfterCtrl controller in your app.js
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
Also i would suggest to use $state.go("register") and $state.go("after") and also do not forget to inject $state
function($scope, $state)
I ran into a similar issue recently. I found that using
<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button>
fixed my issue.
Related
I have searched throughout the entire web, but I cannot find anyone with an answer. I am setting up a simple front-end website using the original Angular, AngularJS. Unfortunately, I cannot determine why ng-view will not display any of my "partials" (other html pages). Can anyone lend me a second set of eyes and tell me what simple mistake I am making? Thank you in advance.
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
templateURL: 'partials/MainMenu.html',
controller: 'MainMenuCtrl'
}).
when('/reports', {
// Links to the HTML page
templateURL: "partials/Reports.html",
// Links to the controller in the controller file
controller: "ReportsCtrl"
}).
when('/StoreStatistics', {
templateURL: "partials/StoreStatistics.html",
controller: "StoreStatisticsCtrl"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<section ng-include="'partials/MainMenu'"></section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
<!-- This the MainMenu.html page -->
<!-- Main Menu -->
<div class="container is-fluid">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
<a class="button is-primary is-outlined" ng-href="/">Home</a>
<a class="button is-info is-outlined" href="#!/reports">Reports</a>
</div>
<!-- End of Main Menu -->
Nothing wrong with the syntax, just make sure the template url is correct
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
template: "<div>MENU</div>"
}).
when('/reports', {
// Links to the HTML page
template: "<div>REPORTS</div>"
}).
when('/StoreStatistics', {
template: "<div>STORE</div>"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
You have excess syntax.. remove /
Try this
<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>
I am starting an ionic project.It not works for me.I am doing a side menu for all views.i want a quick replay.in index page inside the ion-nav-view I can fill the content it also shows as output.but i want to show the contents in the menulayout.html
index page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="app/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
</body>
</html>
app.js
angular
.module('starter', ['ionic'])
.run([ '$ionicPlatform', function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
if (cordova.plugins.Keyboard.hideKeyboardAccessoryBar) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.backButton.previousTitleText(false).text('');
$stateProvider
.state('app',{
abstract:true,
url: "/app",
templateUrl:"app/layout/menulayout.html"
})
.state('app.home', {
url: "/home",
views:{
'mainContent':{
templateUrl: 'app/ast/home.html'
}
}
})
.state('app.login', {
url: "/login",
views:{
'mainContent':{
templateUrl: 'app/ast/login.html'
}
}
});
$urlRouterProvider.otherwise('/home');
});
menulayout.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-dark" align-title='center'>
<ion-nav-title align-title='center'>Home</ion-nav-title>
<ion-nav-back-button class="button-icon button-clear">
<i class="ion-arrow-left-c energized"></i>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1>Home</h1>
</header>
<ion-content class="has-header highlight sidemenu">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.home">
Home
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
ionic serve shows a white screen also no errors shows in the console.
The problem could a common one with grunt-concurrent#1.0.1. Try installing version 1.0.0 i.e.:
npm install -g grunt-concurrent#1.0.0
make sure you update your package.json file as well
I am having some trouble with Angular navigation in Ionic framework.
I have set two pages (states) and the app is supposed to show the first state when it is opened. However, the $urlRouterProvider.otherwise is not working (I think that's the problem, at least).
I have followed the oficial documentation and some tutorials but nothing made it work. Can you please help me?
var app = angular.module('famousguess', ['ionic', 'ui.router'])
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url: '/',
templateUrl: 'views/welcome.html',
controller: 'WelcomeCtrl'
})
.state('grid', {
url: '/grid/:gridid',
templateUrl: 'views/grid.html',
controller: 'GridCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller('WelcomeCtrl', function ($scope, $state) {
}
app.controller('GridCtrl', function ($scope, $stateParams, $ionicHistory) {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Famous Guess</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="famousguess" id="wrapper">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
And here goes my template (views/home.html)
<ion-view view-title="welcome">
<ion-content scroll="false" class="box-energized">
<h1 id="logo">Famous Guess?</h1>
<a nav-transition="android" href="#/grid/1">
<button class="button button-block button-royal">
Start!
</button>
</a>
<button class="button icon-left button-block button-positive ion-social-facebook">
Connect to Facebook
</button>
</ion-content>
</ion-view>
Thanks!
i think you have used a wrong template in config
$stateProvider
.state('welcome', {
url: '/',
templateUrl: 'views/home.html',
controller: 'WelcomeCtrl'
})
.state('grid', {
url: '/grid/:gridid',
templateUrl: 'views/grid.html',
controller: 'GridCtrl'
});
$urlRouterProvider.otherwise('/');
});
i think the above will work !! you have loaded the wrong template file in tempalateurl
I am facing issue. I created a blank page named "main" for testing. It works fine in ionic serve command. But when I tried to emulate. The "main" page won't load.
here are is config
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "",
abstract: true,
templateUrl: '/templates/main.html'
})
.state('main.tabs', {
url: '/tab',
abstract: true,
views : {
'main-content' : {
templateUrl: '/templates/tabs.html'
}
}
})
.state('main.tabs.page1', {
url: '/tab/page1',
views : {
'page1' : {
templateUrl: 'templates/page1.html',
controller: 'EventController'
}
}
});
$urlRouterProvider.otherwise('/tab/page1');
})
here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-calm">
<ion-nav-title>
Test
</ion-nav-title>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
Hello World!
</ion-nav-view>
</html>
and here is main.html
<ion-view name="main-content">
Hello Hello Hello Hello Hello
</ion-view>
I am just playing around withe Ionic/AngularJS. I can't get alert window to show up ? I started ionic with a blank template. The app actually launches in the browser window, but when the button is pressed, nothing happens.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var App = angular.module('freshlyPressed', ['ionic']);
App.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();
}
});
});
App.controller( 'AppCtrl' , function($scope, $log)
{
$scope.refresh = function()
{
window.alert("Hello");
}
});
<!DOCTYPE html>
<html data-ng-app="freshlyPressed" data-ng-control="AppCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Freshly Pressed</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-header-bar class="bar-balanced">
<h1 class="title">Freshly Pressed</h1>
<button type="button" class="button" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Contents</h1>
</ion-content>
</body>
</html>
Unless Ionic does something very different than Angular, you have data-ng-control and it should be data-ng-controller.