angularjs - Ionic Routing - Startup View -
i'm trying learn ionic framework, , have been reading routing side of things , getting little stuck.
i had app working, want add more views. so, have started putting home view in state called 'home' (sorry if not using correct terminology).
ok here html:
<!doctype html> <html ng-app="ionic.example"> <head> <meta charset="utf-8"> <title>venues</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- if using sass (run gulp sass first), uncomment below , remove 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 404 during development) --> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> </head> <body> <ion-pane> <ion-header-bar class="bar-positive"> <div class="buttons"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> </div> <h1 class="title">venues</h1> </ion-header-bar> <ion-nav-view></ion-nav-view> <ion-view nng-controller="myctrl" title="home"> <ion-content class="has-header"> <ion-list> <ion-item ng-repeat="item in items"> <a href="#/venue/{{ item[0].id }}"> <div class="list card"> <div class="item item-avatar"> <img src="{{ item[0].profile_pic }}"> <h2 class="item-venue-title">{{ item[0].name }}</h2> <p class="item-location">uk</p> </div> <div class="item item-body"> <img class="full-image" src="{{ item[0].heder_img }}"> </div> </a> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> comment </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> share </a> </div> </div> </ion-item> </ion-list> <ion-infinite-scroll on-infinite="loadmore()" distance="10%"></ion-infinite-scroll> </ion-content> </ion-view> <nav class="tabs tabs-icon-bottom tabs-positive"> <a class="tab-item"> clean <i class="icon ion-waterdrop"></i> </a> <a class="tab-item"> security <i class="icon ion-locked"></i> </a> <a class="tab-item has-badge"> light <i class="badge">3</i> <i class="icon ion-leaf"></i> </a> <a class="tab-item"> clean <i class="icon ion-waterdrop"></i> </a> </nav> </ion-pane> </body> </html> i have added following .js file
var example=angular.module('ionic.example', ['ionic']) .config(function($stateprovider, $urlrouterprovider) { $stateprovider .state('home', { url: '/home', templateurl: 'templates/home.html', controller: 'myctrl' }) ; $urlrouterprovider.otherwise('/home'); }); what don't understand how 'first' view speak.
any advice appreciated.
the section
$urlrouterprovider.otherwise('/home'); would define index route in case /home first page. content of home.html rendered inside ion-nav-view, see below
<body ng-app="quote"> <!-- initial view template rendered --> <div ng-controller="appctrl"> <ion-nav-view></ion-nav-view> </div> </body> and content home.html goes inside ion-content tag, see below
<ion-view title="your title"> <ion-content> content here </ion-content> </ion-view>
Comments
Post a Comment