I'm developing a very simple app using Ionic, in order to learn how to use the tool. It implies tabs, I followed the tutorial about tabs given in the official documentation. It works very well on my browser, but I have the "blank screen of death" on my Android device when compiling.
Here is my simplified code:
Index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Home</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Menu Principal">
<ion-content class="padding">
<img class="popphoto" src="b_menu1.png">
</ion-content>
</ion-view>
</script>
</body>
JS part:
<script>
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.sceneTest', {
url: "/sceneTest",
views: {
'home-tab': {
templateUrl: "sceneTest.html"
}
}
})
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
});
</script>
</html>
The "sceneTest.html" file is in the same path as index.html. I don't think it causes the bug, because its content is very simple so far (just a text wrapped in a ion-view).
Any idea of what may be causing the blank screen on mobile phones only? I have heard that it could be because of some inclusions I didn't do properly. However, I am very new to both Ionic and Angular (jQuery fan trying to open his mind) so it's hard to find the precise cause.
Thanks a lot for your help.
Call the files with in the App's www folder
Wrong way
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
Good Way
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
Related
I have set up a basic AngularJS page, and I've set up a couple of extra pages, a home page and a login page.
My index.html looks like this.
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
</head>
<body ng-app="votee">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
View Login
View Home
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
My app.js looks like this
var votee = angular.module('votee', ['ionic', 'ngRoute']);
votee.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
})
.otherwise({
redirectTo: '/login'
});
});
votee.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.Keyboard) {
window.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
votee.controller('loginController', function ($scope) {
});
votee.controller('homeController', function ($scope) {
})
The HTML pages for Home and Login are in the same directory as index.html, and when clicking on one of the links, it will say http://localhost:8100/#/login, which implies to me that the routing is at least partially correct, however the pages don't load.
Any suggestions would be greatly appreciated.
I created a blank project for ionic v1 and added a controller inside app.js file:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.Keyboard) {
window.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider){
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'main.html',
controller: 'AppCtrl',
})
})
.controller('AppCtrl',function($scope){
console.log("test");
})
Also I added main.html file, which is just a blank file with "TEST" text
After executing ionic serve command and navigating to http://localhost:8100/#/app console command is not executed, and text isn't shown. I receive no error messages.
UPDATE: 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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content name="content">
</ion-content>
</ion-pane>
</body>
</html>
UPDATE: Found a solution
index.html was missing ion-nav-view tags
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
Added it and everything started to work.
Found a solution
index.html was missing ion-nav-view tags
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
Added it and everything started to work.
I have an issue with this chunk of code, when I click on the button, nothing happened...
Normally, the template inside "news.html" should display.
I've checked on internet but nothing for help me... So what is going wrong, please ?
"app.js"
var nameApp = angular.module('starter', ['ionic']);
nameApp.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html'
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.news', {
url: '/news',
views: {
'News': {
templateUrl: 'news.html',
controller: 'HomeCtrl'
}
}
})
$urlRouterProvider.otherwise('/tab/home');
}]);
nameApp.controller('HomeCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.goNews = function () {
$state.go("tab.news");
};
}]);
"index.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>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
</html>
"tabs.html"
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<!-- Login Tab -->
<ion-tab title="Login" icon-off="ion-ios-locked-outline" icon-on="ion-ios-locked" href="#/tab/login">
<ion-nav-view name="login"></ion-nav-view>
</ion-tab>
</ion-tabs>
"home.html"
<ion-view title="Home">
<ion-content class="padding">
<button type="submit" class="button button-block button-positive" ng-click="goNews()"> News </button>
</ion-content>
</ion-view>
"news.html"
<ion-view title="News">
<ion-content class="padding">
<div class="padding">
<h1> News </h1>
</div>
</ion-content>
</ion-view>
The problem is the name of your view.
.state('tab.news', {
url: '/news',
views: {
'News': { //<= this is the name of the ui-view in which this state loads.
templateUrl: 'news.html',
controller: 'HomeCtrl'
}
}
})
Your tabs have two views:
<!-- Home Tab -->
<ion-nav-view name="home"></ion-nav-view>
<!-- Login Tab -->
<ion-nav-view name="login"></ion-nav-view>
"home" and "login". You are trying to load your view in "News" which doesn't exist. If you change that "News" => "home" it will work.
I'm trying to create a portfolio in angular, and can't seem to get the routing correct. I double checked with an app I had made previously, and can't seem to find anything. When I compile, there are no errors logged in the console. Could someone check if my code is properly laid out?
the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css"> -->
</head>
<body np-app="myPort">
<div id="navigation-bar">
<ul>
<li>Home</li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</div>
<div ui-view></div>
<!-- loading angular frameworks -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- app js stuff -->
<script src="app.js"></script>
</body>
</html>
the module
angular.module('myPort', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/bio/index.html',
})
.state('projects', {
url: '/projects',
templateUrl: 'partials/projects/index.html',
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact/index.html',
})
$urlRouterProvider.otherwise('/home');
}]);
//no controllers linked for troubleshooting
There is a spelling mistake while defining ng-app.
Change <body np-app="myPort>" to <body ng-app="myPort>"
I am new to angular and trying to create new login app, i want to maintain separate controller but when separate the controllers from controllers.js I am getting function got undefined error.
here is My code:
app.js
<!-- begin snippet: js hide: false -->
// MainCtrl.js
angular.module('myapp.controllers', [])
.controller('MainCtrl',
function($scope, $state) {
console.info("inside main ctrl");
});
//
//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/services.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<!-- <script src="js/controllers.js"></script> -->
</head>
<body ng-app="starter" ng-controller = "MainCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
got this error:
ionic.bundle.js:26771 Error: [ng:areq] Argument 'LoginCtrl' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=LoginCtrl&p1=not%20a%20function%2C%20got%20undefined
at ionic.bundle.js:13415
at assertArg (ionic.bundle.js:15191)
at assertArgFn (ionic.bundle.js:15201)
at $controller (ionic.bundle.js:23350)
at self.appendViewElement (ionic.bundle.js:59763)
at Object.switcher.render (ionic.bundle.js:57874)
at Object.switcher.init (ionic.bundle.js:57794)
at self.render (ionic.bundle.js:59623)
at self.register (ionic.bundle.js:59581)
at updateView (ionic.bundle.js:65261)
The code works as expected if I replace the myapp.controller with starter.controller in LoginCtrl.js and adding starter.controller along with myapp.controller in app.js.
angular.module('starter', ['ionic', 'myapp.controllers', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
cache:false,
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
// LoginCtrl.js
angular.module('starter.controllers',[])
.controller('LoginCtrl', function($scope, $state){
$scope.login = function() {
console.log("LOGIN user");
// $state.go('app.home')
}
});