Ion-view is not displayed at all - javascript

I am facing a really weird issue. I was following this tutorial. My goal was to implement two ion-view's which have a reference to each other.
My problem is that when running the app in the browser (Firefox) the localhost-address is being called but nothing is rendered to the screen. There are also no errors, not even warnings in the console output. What is even more weird is that after posting the very same code to codepen it does work without problems, see here. The only difference to the code on my machine are the references to:
ionic.css
ionic.bundle.js
Those are generated by ionic on my machine and work fine for other projects. I am using Linux (Mint) and Firefox in developement. I will post my entire code but like I said there are no differences to the codepen.
Thanks in advance!
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</title>
<link rel="manifest" href="manifest.json">
<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>
<!-- 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.js"></script>
</head>
<body ng-app="starter" >
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content ng-controller="HomeCtrl">
<p>Lorem Ipsum bla bla bla…</p>
View my set
</ion-content>
</ion-view>
</script>
<script id="setViewer.html" type="text/ng-template">
<ion-view view-title="SetViewer">
<ion-content ng-controller="SliderCtrl">
<p>Lorem Ipsum bla bla bla…</p>
Home
</ion-content>
</ion-view>
</script>
</body>
</html>
controllers.js:
angular.module('starter',['ionic'])
.controller('SliderCtrl',['$scope',function($scope){
}])
.controller('HomeCtrl',['$scope','$state',function($scope,$state){
}]);
app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('index',{
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('setViewer',{
url:'/setViewer',
templateUrl: 'setViewer.html',
controller: 'SlideCtrl'
});
$urlRouterProvider.otherwise('/');
});

So the solution was that I mixed up the files.
As you can see in my codepen .module declaration, .config and .controller declarations took place in a single document. Compared to my local structure where those were separated between app.js and controllers.js.
Once I put all those declarations in a single file everything worked fine.

Related

AngularJS ng-view not showing view

I'm developing a web app with AngularJS for the frontend and i'm trying to set the routing and showing the views, so far even ng-include and other stuff work for me but not ng-view
I'm developing in visual studio and when i run the app it's using a local server (localhost)
here's my directory structure
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
Here's mi index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
Here's my app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
When i load the site it loads correctly and if i see the requests i can clearly see that it's requesting the home.html with 304 status code, the thing is the div with ng-view is not showing the html inside home.html, what could this be due to?
I've solved the issue by changing the <ng-include> tag with an <div ng-include="srctoview"> tag. If anyone is having this issue i'd recommend doing this, or doing it like in this answer using a controller
Thanks to #Sourabh- for leading me to an answer.
close <ng-include> directive properly as browser is wrapping ur <ng-view> inside of <ng-include>. it will solve the problem. as #pankaj has already suggested.

ion-view doesn't appear inside ion-nav-view

After having done a few tutorials, I'm getting started with my own Ionic app. I got start with ionic's blank template. My problem is that my ion-view (in cards.js, see below) doesn't show up at all inside the ion-nav-view, i.e. I don't get any child HTML tag to ion-nav-view.
I used Adam's answer to this question to make sure my routes are correctly setup, and I don't get any error, so I think they are. I'm not trying to have tabs, just one view.
If I place a breakpoint inside my controller function, the execution isn't paused so apparently that code is not executed at all, but I have trouble going deeper into the guts of the framework to figure out what's going on.
Do you have any idea what I'm missing/doing wrong here ?
My code is:
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>
<!-- libs-->
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
<script src="lib/collide/collide.js"></script>
<!-- your app's js -->
<script src="app/app.js"></script>
<script src="app/controllers/cards.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
angular.module('myApp', ['ionic'])
.run(function($ionicPlatform, $rootScope) {
$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();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('cards', {
url: '/cards',
views: {
'cards': {
templateUrl: 'app/views/cards.html',
controller: 'Cards'
}
}
});
$urlRouterProvider.otherwise('/cards');
});
cards.js
angular.module('myApp')
.controller('Cards', function($scope) {
$scope.cards = [
{title: 'Card-1'},
{title: 'Card-2'},
{title: 'Card-3'}
];
});
cards.html
<ion-view view-title="cards">
<ion-content ng-controller="Cards">
<h1> Cards view </h1>
<ion-list>
<ion-item ng-repeat="cards in cards">
{{card.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I have deleted previous post, as you pointed out that my reply was totally wrong.
Concerning your routing , here is mine. Do you see any difference with that synthax?
$urlRouterProvider.otherwise('/');
$stateProvider.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'app/views/loading/index.html'
})
I think you're meant to use one or the other. ion-nav-view is just an ion-view with slightly different behaviour.
So putting an ion-view within an ion-nav-view would be similar to putting an ion-view within an ion-view, which won't display correctly.
From docs: "and remember to replace ui-view with ion-nav-view in examples"
Reference:
http://ionicframework.com/docs/api/directive/ionNavView/

Valid JSON with status 200 always returns 404 on the application

I've spent hours and hours in this problem and I can't get it working.
The problem is as follows:
I have to fetch a JSON from a certain address. I have validated that server's response and it is a valid JSON. On top of that, it works just fine as far as my network is concerned.
(I'd put an image proving it if I had enough reputation hehe)
On my client-side application, though, I keep getting a 404 code.
Here is my code:
(function(){
var app = angular.module('queryApp', ['ngRoute'])
.controller('queryController', ['$scope', '$http', function ($scope, $http){
this.inputChange = function (){
$http.jsonp('http://localhost:3000/orders?callback=JSON_CALLBACK').
success(function(data, status){
console.log(status)
}).
error(function(data, status){
console.log(status)
});
};
}]);
})();
<!DOCTYPE html>
<html ng-app="queryApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Roboto Font -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Twitter Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- custom stylesheet -->
<link rel="stylesheet" href="app/css/search.css" type="text/css">
</head>
<body ng-controller="queryController as query">
<form class="form-search">
<input type="text" class="input-medium search-query" placeholder="Looking for something?" ng-model="input" ng-change="query.inputChange()">
</form>
<h1>{{input}}</h1>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- AngularJs -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<!-- Bootstrap -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Search App -->
<script src="app/app.js"></script>
</body>
</html>
The funny thing is if I change the URL of the request to, let's say, the one on the AngularJS JSONP tutorial (https://docs.angularjs.org/api/ng/service/$http#jsonp) it works just fine! I can simply fetch the data. Having said that, I repeat: the JSON I'm trying to fetch IS valid.
Any help will be much appreciated. Thanks!

Angular .config not being called

I've been beating my head against what is probably a stupid mistake for the last couple hours. My angular .config module isn't being called and I can't figure out why.
In an effort to eliminate potential sources of trouble, I've reduced my app down to only the entry point index.js file and and am not injecting any dependencies other than ngRoute.
All the files are being loaded just fine and I can trace code execution to the app.config line but breakpoints inside the passed function never get hit and neither of the console.logs ever fire. What am I doing wrong here? I've made angular apps before and never had this issue. I've probably got a typo somewhere that I'm missing but damned if I can find it.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<div class="container">
<div class="row" id="controls">
...
</div>
<div class="row" id="content">
<div ng-view></div>
</div>
<div class="row" id="footer">
...
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--<script type="text/javascript" src="static/js/services.js"></script>
<script type="text/javascript" src="static/js/controllers.js"></script>-->
<script type="text/javascript" src="static/js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
/*global angular*/
var app = angular.module('pagednaApp', ['ngRoute'/*, 'pagednaApp.services', 'pagednaApp.controllers'*/]);
app.config(function($scope, $routeProvider){
console.log('test');
console.log($scope);
$routeProvider
.when('/', {
templateUrl: 'content.html',
controller: 'mainController'
});
});
I think you've forgotten the
ng-app="pagednaApp"
put ng-app
<html lang="en" ng-app="pagednaApp">
You could do angular.bootstrap on your page. That will initialize angular on page.
Add below code to your HTML page.
CODE
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(document, ['pagednaApp']);
});
</script>
Thanks.

AngularJS routing - won't load view

I have been attempting to follow several different online tutorials, but keep keep failing on the same thing: getting AngularJS to load a HTML template file into the ng-view section in my page.
I have stripped it down as much as possible and am now essentially just copying this simple tutorial.
Please have a look at my test page here: http://inigowebdesign.co.uk/atest/ You should be able to see all the files there in the source code and confirm that they exist and are linked properly. Please, what am I doing wrong?
EDIT: Here is my code as it stands:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Shizzle!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp">
<header>
<h1>Header</h1>
</header>
<div ng-view></div>
<footer>
<h3>Footer</h3>
</footer>
</div>
<script type="text/javascript">
angular.module('myApp', ['ngRoute']).config(function($routeProvider)){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});
</script>
</body>
</html>
In console you have error: Uncaught SyntaxError: Unexpected token )
This ) was at the end of the first line.
Fixed:
angular.module('myApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});

Categories