Onsen-ui Carrousel var attribute not working with Tabbar - onsen-ui

I have been working around onsen-ui recently and got stuck when I was trying to reference a Carrousel var (var="carousel") within a Tabbar and Navigator components.
The code works until I try to use Tabs. I get the following error:
Uncaught (in promise) TypeError: Cannot read property of undefined
I have tired the ‘pageinit’ solution but it doesn’t seem to work.
Here under the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/onsenui.min.js"></script>
<script src="lib/onsen/js/angular-onsenui.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
And app.js
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('AppCtrl',['$scope', function($scope) {
}]);
module.controller('carouselCtrl',['$scope', function($scope) {
ons.ready(function() {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply();
$scope.carousel.on('postchange', function (event) {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply()
});
});
}]);
Do you have any idea where the issue comes from?
Many thanks for your time.


I added a tab to your HTML and put it on codepen. It seems to work? Can you specify what happens when you get the error?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="home2.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="home2.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">3</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">4</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
https://codepen.io/grailly/pen/wWLavb?&editors=101

Related

Node-Red dashboard template UI - AngularJS Bootstrap Carousel with ng-repeat

I've been scratching my head to make a Bootstrap Carousel with AngularJS inside a Node-Red Dashboard template node. I have even found several tips here, but the presented solutions are not working for me... here is the complete code inside Node-Red dashboard template: (any help is much appretiatted!)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spotify UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab md-on-select="send({getFeatured: true})" ng-click="send({getFeatured: true})">
<md-tab-label><md-icon ng-md-icon icon="stars" style="fill: LIGHTGREEN"></md-icon></md-tab-label>
<md-tab-body>
<md-content>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in featured track by $index">
<img class="d-block w-100" src="{{item.images[0].url}}" alt="missing">
<p>{{$index}}</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.playlists.items) {
scope.featured = msg.payload.playlists.items;
};
});
})(scope);
</script>
</body>
</html>
Update 01.10.2018 - I finally managed to make it work after changing the class from class="item"to class="carousel-item".

Uncaught (in promise) Error: "html" must be one wrapper element onsenui

I am trying to write a small Cordova App. Fortunatly found OnSenUI and now working on it. But I am facing this erorr:
Uncaught (in promise) Error: "html" must be one wrapper element.
at Object.util.createElement (util.js:147)
at page-loader.js:23
I searched for many solutions, but nothing worked for me.
My whole code:
<!DOCTYPE html>
<html>
<head>
<title>New App</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
<ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Main </div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>
<!-- Inputs-->
<h2 style="text-align: center; opacity: 0.6;">Just H2</h2>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">
<ons-button id="btnClickMe">Click Me!</ons-button>
</p>
<section style="padding: 8px">
<ons-button modifier="quiet">Forgot Password</ons-button>
</section>
</div>
<!-- eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
</ons-page>
</ons-template>
<!-- fetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
</body>
</html>

OMG Its too simple.
I was declaring <div id="divFtechHere"> outside <ons-page>
Wrong Code:
<!-- FetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
Correct Code:
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-page>
</ons-template>

Using Onsenui cant push between pages

I have an app that has multipe .html pages instead of 1 page which holds all the pages. I am trying to use ons.navigator.pushPage("path/to/page.html", {foo: "bar"}); but it doesnt work
However, doing this works:
<p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>
But this doesnt work:
<p align="center"><ons-button modifier="large--cta" ng-click="ons.navigator.pushPage('activity.html', {foo: 'bar'})">view</ons-button></p>
timeline.html
<ons-page ng-controller="CircularActivity">
<div style="text-align: center" >
<ons-row style="margin-top: 0px; padding:20px;text-align: center;">
<ons-col >
<p> Test History</p>
<ul ng-if="corttimeline.length" class="cbp_tmtimeline">
<li ng-repeat="cortisolx in corttimeline" ng-show="corttimeline.length" style="margin-left:0px;padding-left:10px; list-style:none;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#333;font-size:12px">
<time class="cbp_tmtime" datetime="2013-04-10 18:30"> <span style="color:#b6b6b6">{{cortisolx.date_created_2 || ""}}</span> <span>{{cortisolx.day_name || "" }}</span></time>
<!--<div class="cbp_tmicon"><ons-icon icon="ion-android-open" fixed-width="false" style="vertical-align: -4px;color:#fff"></ons-icon></div>-->
<div class="cbp_tmlabel" ng-click=" ons.screen.presentPage( activity.html, { animation: 'fade' });">
<h2>{{cortisolx.cortisol || "0" }} <span style="font-size:12px;color:#555"> ng/ml</span></h2>
<p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>
</div>
</li>
</ul>
</ons-col>
</ons-row>
</div>
</ons-page>
Index.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script src="js/roundProgress.js"></script>
<script>
var app = ons.bootstrap('app', ['onsen','angular-svg-round-progress']);
</script>
<script src="js/jquery.js"></script>
<script src="js/cortisol.js"></script>
<script src="js/circular.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.sparkline.min.js"></script>
</head>
<body>
<ons-page>
<ons-tabbar position="top" >
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</body>
</html>

Implemented node in angular app gives Syntaxerror and referencerror

I have an angular app and I have implemented node into it later on.
Now when I try to run the node app I receive this kind of errors:
SyntaxError: expected expression, got '<'
jquery.min.js (regel 1)
ReferenceError: angular is not defined
angular.module('controllers').controller('ChallengeCtrl', ['$scope',
'auth',
This is my index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="eva">
<head>
<meta charset="UTF-8" name="viewport" content="initial-scale=1"/>
<title>EVA - eet plantaardig!</title>
<link rel="shortcut icon" type="image/x-icon" href="../styles/favicon.ico">
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="../styles/animate.min.css" >
<link rel="stylesheet" type="text/css" href="../styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body layout="column" ng-controller="AppCtrl" layout-fill>
<!-- ANGULAR MATERIAL LOADING -->
<md-toolbar layout="row">
<div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
<md-button ng-click="toggleSidenav('left')" class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
aria-label="sidebar menu">
<!--<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>-->
<md-tooltip md-direction="bottom">Gebruikers Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
<span>
<md-button md-no-ink href="#/index" aria-label="logo">
<img src="../styles/images/logo/48x48.png" alt="logo" >
</md-button>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-fab-speed-dial md-open="demo.isOpen" md-direction="left" ng-class="md-fling"
ng-mouseenter="demo.isOpen = true" ng-mouseleave="demo.isOpen = false">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<md-tooltip md-direction="bottom">Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Login" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/login">
<md-tooltip md-direction="bottom">Log in</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Registreer" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/register">
<md-tooltip md-direction="bottom">Registreer</md-tooltip>
<span class="glyphicon glyphicon-plus"></span>
</md-button>
<md-button aria-label="Profiel" class="md-fab md-raised md-mini" ng-show="isLoggedIn()" href="#/profile">
<md-tooltip md-direction="bottom">Profiel</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Logout" class="md-fab md-raised md-mini" ng-show="isLoggedIn()"
ng-click="logOut()">
<md-tooltip md-direction="bottom">Log out</md-tooltip>
<span class="glyphicon glyphicon-off"></span>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
<div layout="row" flex>
<!-- SIDENAV -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 md-closed ng-scope ng-isolated-scope" md-component-id="left"
ui-view="sidebarLeft" ng-controller="NavCtrl" layout-fill>
<md-toolbar class="sidebar-left-toolbar ng-scope ">
<div class="md-toolbar-tools layout-align-start-center layout-row">
<div class="sidebar-left-logo">
<img src="../styles/images/logo/32x32.png" alt="logo" width="24px">
</div>
<span flex></span>
<div>
{{ currentUser() }}
</div>
</div>
</md-toolbar>
<div layout="row" flex id="contentSideNav">
<div layout="column" flex>
<md-content layout="column" flex class="md-padding">
<ul>
<li>
<md-button href="#/profile" layout-fill>
Profiel
</md-button>
</li>
<md-divider></md-divider>
<li>
<md-button href="#/challenges" layout-fill>
Challenges
</md-button>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</div>
</div>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ui-view></ui-view>
</md-content>
</div>
</div>
<!-- homepage -->
<script type="text/ng-template" id="/home.html"></script>
<!-- loginpage -->
<script type="text/ng-template" id="/login.html" ng-controller="UserCtrl"></script>
<!-- register page -->
<script type="text/ng-template" id="/register.html" ng-controller="UserCtrl"></script>
<!-- challengespage -->
<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl"></script>
<!-- profiel page -->
<script type="text/ng-template" id="/profile.html" ng-controller="ProfileCtrl" ></script>
<!-- footer -->
<footer>
<div layout="row" layout-align="space-around center">
<div id="social" layout="row" layout-align="space-around center">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest-p"></i>
</div>
<div>
<p class="text-center">© Copyright 2015 - Projecten Groep 6</p>
</div>
</div>
</footer>
<!-- JS files integration -->
<script type="text/javascript" src="../styles/public/js/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="../styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controllers/bootstrap.js"></script>
<script type="text/javascript" src="js/controllers/ChallengeController.js"></script>
<script type="text/javascript" src="js/controllers/AppController.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<script type="text/javascript" src="js/controllers/NavController.js"></script>
<script type="text/javascript" src="js/controllers/UserController.js"></script>
<script type="text/javascript" src="js/controllers/ProfileController.js"></script>
<script type="text/javascript" src="js/factories/bootstrap.js"></script>
<script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
<script type="text/javascript" src="js/factories/AuthFactory.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
At first I thought that the links to all the files were incorrect from the index.html, but they seem fine so I don't know what the problem is.
Additional info screen:

I think the issue is you have mention wrong reference path for angular libraries.
Like it should point to /js/lib rather than pointing to /styles(which has css)
<script type="text/javascript" src="../js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/lib/angular/angular-ui-router.min.js"></script>
Addtional note is you can't have ng-controller="ProfileCtrl" on script with type="text/ng-template", that wouldn't add controller on that template, you need to specify that ng-controller in the template.

Error: Page is not found: favo.html

I have 4 files
index.html
page1.html
page2.html
page3.html
Here's my code...
page3.html
<ons-page>
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="favo.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorite</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-social-twitter"></ons-icon>
<span style="font-size: 14px">Bird</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
<p> Alice, {{greetings}} </p>
<p> Jessica, {{greetings}} </p>
<p> {{2+8}} </p>
</div>
</div>
</ons-template>
</ons-page>
Why do i get this error?
Error: Page is not found: favo.html
Then i swapped into this...
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="afternoon">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="evening">
<p> Cindy, {{greetings}} </p>
</div>
</div>
</ons-template>
Now im getting this error...
Page is not found: home.html
The 2nd position seems cursed.
...............................................
...............................................
...............................................
Here's the other files.
index.html
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
//ons.bootstrap();
var magic_land = ons.bootstrap('magic_land', ['onsen']);
magic_land.controller
(
"morning" ,
function($scope)
{
$scope.greetings = "Rise and shine!" ;
}
) ;
magic_land.controller
(
"afternoon" ,
function($scope)
{
$scope.greetings = "Good afternoon!" ;
}
) ;
magic_land.controller
(
"evening" ,
function($scope)
{
$scope.greetings = "Good night. Sleep well." ;
}
) ;
</script>
</head>
<body>
<ons-navigator var="captain" page="page3.html">
</ons-navigator>
</body>
</html>
.................
page1.html
<ons-page>
<ons-scroller>
<ons-toolbar>
<div class="center">This is page ONE</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button
ng-click="captain.pushPage('page3.html')">
Push It
</ons-button>
<br>
<ons-list>
<ons-list-header>Fruits</ons-list-header>
<ons-list-item>Apple</ons-list-item>
<ons-list-item>Banana</ons-list-item>
<ons-list-item> {{5+5}} </ons-list-item>
</ons-list>
<br>
Party <ons-switch checked></ons-switch>
</div>
</ons-scroller>
</ons-page>
....................
page2.html
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Backware</ons-back-button></div>
<div class="center">You are in Page TWO</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Hello there!</h1>
<ons-button
ng-click="captain.popPage()">
Pop Corn {{5+5}}
</ons-button>
</div>
</ons-page>
Didnt find a solution. But i found a workaround.
As i said, 2nd & 4th template are cursed. So, i created dummy_1 and dummy_2 to take the curse.
^_^ . Thats a smiley!
Change page3.html like below.
page3.html (workaround)
<body>
<ons-page>
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="favo.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorite</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-social-twitter"></ons-icon>
<span style="font-size: 14px">Bird</span>
</ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="dummy_1.html">
<p></p>
</ons-template>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id = "dummy_2">
<p></p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="afternoon">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="evening">
<p> Cindy, {{greetings}} </p>
</div>
</div>
</ons-template>
</body>
Here's the tabs in action, show as gif video.
http://postimg.org/image/vin7bak3x/

I think the problem is that you're putting the <ons-template> tags inside the <ons-page> tag.
Instead try to put the templates at the body:
<body>
<ons-tabbar>
...
</ons-tabbar>
<ons-template id="favo.html">
...
</ons-template>
<ons-template id="home.html">
...
</ons-template>
...
</body>

Here is my exact syntax for a split view I have as far as setting my pages. Hopefully the syntax helps for individual pages. This works well for me
<ons-split-view
var="app.splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="40%"
collapse="portrait">
<ons-template id="page1.html">
<ons-page>
<ons-tabbar>
<ons-tab page="books.html" icon="ion-ios-bookmarks" label="Books" active="true" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
<ons-tab page="topics.html" icon="ion-android-globe" label="Topics" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
<ons-tab page="espanol.html" icon="ion-ios-color-filter" label="Español" onclick="app.splitView.setSecondaryPage('triple.html')"></ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="secondary.html">
<ons-page>
<ons-tabbar>
<ons-tabbar-item page="split/bible.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
<ons-tabbar-item page="split/browser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
</ons-page>
</ons-template>
<ons-template id="triple.html">
<ons-page>
<ons-tabbar>
<ons-tabbar-item page="biblia/gene.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
<ons-tabbar-item page="split/espbrowser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
</ons-page>
</ons-template>
</ons-split-view>

Resources