Templates not loading in angularJS and Ionic - javascript

I set up a basic ionic app with av few views and controllers. When I load the startpage I ALWAYS end up in $urlRouterProvider.otherwise('views/error.html'); line. And no templates gets loaded either.. even for the error.html.
I have no idea why. I get no js errors in the console or anything. Any ideas?
This is my code:
the 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/controllers/LoginController.js"></script>
<script src="js/controllers/MainMenuController.js"></script>
<script src="js/controllers/SettingsController.js"></script>
</head>
<body ng-app="iou">
<ion-nav-view></ion-nav-view>
</body>
</html>
the javascript
var app = angular.module('iou', ['ionic'])
.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('index', {
url: '/',
templateUrl: 'views/login.html',
controller: 'LoginController'
});
$stateProvider.state('mainmenu', {
url: '/mainmenu',
templateUrl: 'views/mainmenu.html',
controller: 'MainMenuController'
});
$stateProvider.state('settings', {
url: '/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
});
$urlRouterProvider.otherwise('views/error.html'); // I always end up here
});

errors.html is in your views folder and has some markup to render? $urlRouteProvider.otherwise('directory/file.html') will always load first when your app starts up.

So the solution for me was to change:
$urlRouterProvider.otherwise('views/error.html');
to:
$urlRouterProvider.otherwise('/');

Related

Ionic: $urlRouterProvider.otherwise('/') not working

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

Ionic nav view won't work

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>

Ionic with angular js. the button not linked to another html

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.

Ionic/AngularJS ng-click event not firing?

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.

Uncaught ReferenceError : angular is not defined (Using testem)

Error is found in line 1 of 2 files:
- controllers.js
- app.js
Which is attached below together with html.
The app appears when I start up local server but I am unable to login or signup by clicking the sign up button after entering my details. Is it a 404 error?
I also tried to add these 2 lines into the index.html file (I thought was some items I didnt define) but did not work.
index.html file
<!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">
*<!-- ionic/angularjs js -->*
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script> <!-- firebase -->
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script> <!-- angularfire -->
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script> <!-- firebase-simple-login -->
*<!-- cordova script (this will be a 404 during development) -->*
<script src="cordova.js"></script>
<!-- app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="bucketList" animation="slide-left-right-ios7">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
controllers.js file (Error in first line)
angular.module('bucketList.controllers', [])
.controller('SignInCtrl', [
'$scope', '$rootScope', '$firebaseAuth', '$window',
app.js file (Error in first line)
angular.module('bucketList', ['ionic', 'firebase', 'bucketList.controllers'])
The error says, you are attempt to use angular before load the script. I didn't see any reference of angularjs library in your index.html file.
So add a reference for angularjs before app.js and controller.js.
App.js
angular.module('bucketList', ['ionic', 'firebase'])
.run(function($ionicPlatform, $rootScope, $firebaseAuth, $firebase, $window, $ionicLoading) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
controller.js
angular.module('bucketList', [])
.controller('SignInCtrl', [
'$scope', '$rootScope', '$firebaseAuth', '$window',
function($scope, $rootScope, $firebaseAuth, $window) {
$rootScope.checkSession();
$scope.user = {
email: "",
password: ""

Categories