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.
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'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>
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 using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all.
Here is my code :
var route = angular.module('app', []);
route.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/about', {templateUrl: 'partials/about.html'})
.otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);
ap.controller('MainCtrl', function($scope) {
$scope.opts = {
disable: 'right'
};
});
and the HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/angular-snap.css" />
<script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
<script src="js/snap.js" type="text/javascript"></script>
<script src="js/angular-snap.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-controller="MainCtrl">
<nav snap-drawer class="nav">
Home
About us
</nav>
<snap-content snap-options="opts">
<header class="header">
<button snap-toggle>
<img src="img/icon-menu.png" width="60px" />
</button>
Test
</header>
<div ng-view>
</div>
</snap-content>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).
Don't forget to inject the ngRoute module.
var route = angular.module('app', ['ngRoute']);
You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:
AngularJS $routeProvider docs