mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Ionic List Example</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
<link href="/dist/css/ionic.css" rel="stylesheet">
|
|
|
|
<!-- ionic/angularjs scripts -->
|
|
<script src="/dist/js/ionic.js"></script>
|
|
<script src="/dist/js/angular/angular.js"></script>
|
|
<script src="/dist/js/angular/angular-animate.js"></script>
|
|
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
|
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
|
<script src="/dist/js/ionic-angular.js"></script>
|
|
|
|
<!-- your app's script -->
|
|
<script src="js/app.js"></script>
|
|
<script src="js/services.js"></script>
|
|
<script src="js/controllers.js"></script>
|
|
</head>
|
|
|
|
<!--
|
|
'listExample' is the name of this angular module (app.js)
|
|
'nav-router' attribute updates the nav-bar title and animations as you navigate
|
|
'animation' attribute sets which type of animations to use
|
|
-->
|
|
<body ng-app="listExample" nav-router animation="slide-left-right-ios7">
|
|
|
|
<!-- The nav bar that will be updated as we navigate -->
|
|
<nav-bar
|
|
class="nav-title-slide-ios7"
|
|
type="bar-positive"
|
|
back-button-type="button-icon"
|
|
back-button-icon="ion-arrow-left-c"></nav-bar>
|
|
|
|
<!-- where the content of each page will be rendered -->
|
|
<ng-view></ng-view>
|
|
|
|
|
|
<!--
|
|
Belows are examples of using inline angular templates:
|
|
http://docs.angularjs.org/api/ng.directive:script
|
|
-->
|
|
|
|
<!--
|
|
This template loads when the the root '/' url is matched (app.js)
|
|
'movies' is a $scope variable which was created in MovieIndexCtrl (controllers.js)
|
|
The MovieIndexCtrl gets data from the MovieService (service.js)
|
|
-->
|
|
<script type="text/ng-template" id="/index.html">
|
|
<nav-page title="title">
|
|
<content has-header="true" on-infinite-scroll="loadMore">
|
|
|
|
<list>
|
|
<item ng-repeat="movie in movies" href="#/movie/{{movie.id}}" type="item-link">
|
|
{{ movie.title }}
|
|
</item>
|
|
</list>
|
|
<infinite-scroll></infinite-scroll>
|
|
</content>
|
|
</nav-page>
|
|
</script>
|
|
|
|
<!--
|
|
This template loads when the '/movie/:movieId' url is matched (app.js)
|
|
'movie' is a $scope variable which was created in MovieDetailCtrl (controllers.js)
|
|
The MovieDetailCtrl gets data from the MovieService (service.js)
|
|
-->
|
|
<script type="text/ng-template" id="/movie.html">
|
|
<nav-page title="title">
|
|
<content has-header="true" padding="true">
|
|
<h1>{{ movie.title }}</h1>
|
|
<dl>
|
|
<dt>Description:</dt>
|
|
<dd>{{ movie.description }}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Released:</dt>
|
|
<dd>{{ movie.released }}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Director:</dt>
|
|
<dd>{{ movie.director }}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Rating:</dt>
|
|
<dd>{{ movie.rating }}</dd>
|
|
</dl>
|
|
</content>
|
|
</nav-page>
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |