splitterContent error when use ons-splitter-content with tabbar
-
I follow this link: https://onsen.io/blog/auto-style-app-onsen/ to make a Todo App.
Here my code:<!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'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- First navigation component: Navigator. This will remain always on top of the app. --> <ons-navigator id="myNavigator" page="splitter.html"> </ons-navigator> <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. --> <ons-template id="splitter.html"> <ons-splitter id="mySplitter"> <ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px"> </ons-splitter-side> <ons-splitter-content page="tabbar.html"> </ons-splitter-content> </ons-splitter> </ons-template> <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. --> <ons-template id="tabbar.html"> <ons-page id="tabbarPage"> <ons-toolbar> <div class="left"> <!-- Toolbar-button with different icons depending on the platform. --> <ons-toolbar-button component="button/menu"> <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon> </ons-toolbar-button> </div> <div class="center">To-Do List App 2.0</div> <div class="right"> <!-- Toolbar-button only visible for iOS/other. --> <ons-if platform="ios other"> <ons-toolbar-button component="button/new-task">New</ons-toolbar-button> </ons-if> </div> </ons-toolbar> <!-- Floating Action Button only visible for Android. --> <ons-if platform="android"> <ons-fab position="right bottom" component="button/new-task"> <ons-icon icon="md-edit"></ons-icon> </ons-fab> </ons-if> <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. --> <ons-tabbar id="myTabbar" position="auto"> <ons-tab page="html/pending_tasks.html" label="Pending" active> </ons-tab> <ons-tab page="html/completed_tasks.html" label="Completed"> </ons-tab> </ons-tabbar> </ons-page> </ons-template> </body> </html>
And app.js:
ons.bootstrap() .controller('AppController', function() { }); ons.ready(function() { console.log("Onsen UI is ready!"); });
But when i run then error:
and show detail:
Version: /*! angular-onsenui.js for onsenui - v2.0.3 - 2016-10-26 */