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

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/

Related

Angular MVC View only Structure problems

I'm geting problems with angularjs structure. I pretend to have a translation controller or service or wathever and one controller per group of pages (I will explauin that point).
The idea is an index page that loads all the .js files and .css (that are global on the entire web site). That page will load the login file (in it´s body), with its angular controller. Then it will load a template with nav, header, footer, etc... templates, and in the article section I pretend to load diferent pages (links in the nav menu) each page (or group) with its controller. I'm starting with angularjs and it doesn't works. The idea will be similar at next code:
index (reduced for the example):
<!DOCTYPE html>
<html **ng-app="app" ng-controller="translationsCtrl"**>
<head>
<title>something</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--GLOBAL STYLES (WILL BE MORE, ONLY EXAMPLE)-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="loginCtrl" ng-include="'views/login.html'"></div>
<!--GLOBAL SCRIPTS (WILL BE MORE, ONLY EXAMPLE)-->
<script src="assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="controllers/translationsCtrl.js"></script>
</body>
</html>
in login.html it will be like this:
<!--STUFF-->
<script src="controllers/loginCtrl.js"></script>
controllers will be:
loginCtrl.js:
angular
.module('app', [])
.controller('loginCtrl', function($scope) {
$scope.login = 'login';
})
translationsCtrl.js
angular
.module('app', [])
.controller('translationsCtrl', function($scope) {
$scope.text = 'text';
});
how can I do something similar working? Are there any better method for doing it? The web app is to huge so I can't use requirejs or simplepage angular.

Ion-view is not displayed at all

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.

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.

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.js routing only on webserver

I'm new to Angular.js so bear with me. I found Angular's routing pretty neat which is why I want to try my first Webpage with it. My approach is the following:
<!doctype html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>testrouting</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="inject" ng-view></div>
</body>
</html>
and the an app.js
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/index.html'
});
});
problem is, that index.html is not shown. Inside index.html I have a plain <p> element with some text. But no text is showing on my root index. As far as I know angular is a front-end framework, so is there any Webserver neccessary which causes the problem?
Thanks
I've seen places that say that routing requires a server:
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

Categories