javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

add list example

Browse Source
This commit is contained in:
Adam Bradley
2013-11-26 22:25:56 -06:00
parent 3d934424c9
commit aa02dfc13e
4 changed files with 296 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
examples/starters/list/index.html Normal file
View File

@@ -0,0 +1,94 @@
<!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">
<!-- ionic css -->
<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-route.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.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)-->
<body ng-app="listExample">
<!-- Our navigation router with some animations set -->
<pane 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="icon ion-arrow-left-c"></nav-bar>
<!-- where the content of each page will be rendered -->
<ng-view></ng-view>
</pane>
<!--
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">
<list>
<link-item ng-repeat="movie in movies" href="#/movie/{{movie.id}}" type="item-link">
{{ movie.title }}
</item>
</list>
</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>

36
examples/starters/list/js/app.js Normal file
View File

@@ -0,0 +1,36 @@
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'listExample' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array or 'requires'
// 'listExample.services' is found in services.js
// 'listExample.controllers' is found in controllers.js
angular.module('listExample', ['ionic', 'ngRoute', 'ngAnimate', 'listExample.services', 'listExample.controllers'])
.config(function ($compileProvider){
// Needed for routing to work
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function($routeProvider, $locationProvider) {
// Set up the initial routes that our app will respond to.
// These are then tied up to our nav router which animates and
// updates a navigation bar
$routeProvider.when('/', {
templateUrl: '/index.html',
controller: 'MovieIndexCtrl'
});
// if the url matches something like /movie/88 then this route
// will fire off the MovieDetailCtrl (controllers.js)
$routeProvider.when('/movie/:movieId', {
templateUrl: '/movie.html',
controller: 'MovieDetailCtrl'
});
// if none of the above routes are met, use this fallback
$routeProvider.otherwise({
redirectTo: '/'
});
});

20
examples/starters/list/js/controllers.js Normal file
View File

@@ -0,0 +1,20 @@
angular.module('listExample.controllers', [])
// Controller that fetches a list of data
.controller('MovieIndexCtrl', function($scope, MovieService) {
// "MovieService" is a service returning mock data (services.js)
// the returned data from the service is placed into this
// controller's scope so the template can render the data
$scope.movies = MovieService.all();
$scope.title = "Completely Random Collection Of Movies";
})
// Controller that shows more detailed info about a movie
.controller('MovieDetailCtrl', function($scope, $routeParams, MovieService) {
// "MovieService" is a service returning mock data (services.js)
$scope.movie = MovieService.get($routeParams.movieId);
$scope.title = "Movie Info";
});

146
examples/starters/list/js/services.js Normal file
View File

@@ -0,0 +1,146 @@
angular.module('listExample.services', [])
/**
* A simple example service that returns some data.
*/
.factory('MovieService', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var movies = [
{
id: 'tt0080487',
title: 'Caddyshack',
released: '1980',
description: 'An exclusive golf course has to deal with a brash new member and a destructive dancing gopher.',
director: 'Harold Ramis',
rating: 7.2
},
{
id: 'tt0087332',
title: 'Ghostbusters',
released: '1984',
description: 'Three unemployed parapsychology professors set up shop as a unique ghost removal service.',
director: 'Ivan Reitman',
rating: 7.8
},
{
id: 'tt0097428',
title: 'Ghostbusters II',
released: '1989',
description: 'The discovery of a massive river of ectoplasm and a resurgence of spectral activity allows the staff of Ghostbusters to revive the business.',
director: 'Ivan Reitman',
rating: 6.4
},
{
id: 'tt0107048',
title: 'Groundhog Day',
released: '1993',
description: 'A weatherman finds himself living the same day over and over again.',
director: 'Harold Ramis',
rating: 8.1
},
{
id: 'tt0116778',
title: 'Kingpin',
released: '1996',
description: 'A star bowler whose career was prematurely "cut off" hopes to ride a new prodigy to success and riches.',
director: 'Bobby Farrelly, Peter Farrelly',
rating: 6.8
},
{
id: 'tt0335266',
title: 'Lost in Translation',
released: '2003',
description: 'A faded movie star and a neglected young wife form an unlikely bond after crossing paths in Tokyo.',
director: 'Sofia Coppola',
rating: 7.8
},
{
id: 'tt0079540',
title: 'Meatballs',
released: '1979',
description: 'Wacky hijinks of counselors and campers at a less-than-average summer camp.',
director: 'Ivan Reitman',
rating: 5.9
},
{
id: 'tt0128445',
title: 'Rushmore',
released: '1998',
description: 'The king of Rushmore prep school is put on academic probation.',
director: 'Wes Anderson',
rating: 7.7
},
{
id: 'tt0096061',
title: 'Scrooged',
released: '1988',
description: 'A cynically selfish TV executive gets haunted by three spirits bearing lessons on Christmas Eve.',
director: 'Richard Donner',
rating: 6.9
},
{
id: 'tt0083131',
title: 'Stripes',
released: '1981',
description: 'Two friends who are dissatisfied with their jobs decide to join the army for a bit of fun.',
director: 'Ivan Reitman',
rating: 6.8
},
{
id: 'tt0362270',
title: 'The Life Aquatic with Steve Zissou',
released: '2004',
description: 'With a plan to exact revenge on a mythical shark that killed his partner, oceanographer Steve Zissou rallies a crew that includes his estranged wife, a journalist, and a man who may or may not be his son.',
director: 'Wes Anderson',
rating: 7.2
},
{
id: 'tt0120483',
title: 'The Man Who Knew Too Little',
released: '1997',
description: 'Murray is mistaken for a spy and must stop a plot to assasinate international leaders at a banquet.',
director: 'Jon Amiel',
rating: 6.4
},
{
id: 'tt0265666',
title: 'The Royal Tenenbaums',
released: '2001',
description: 'An estranged family of former child prodigies reunites when one of their member announces he has a terminal illness.',
director: 'Wes Anderson',
rating: 7.5
},
{
id: 'tt0103241',
title: 'What About Bob?',
released: '1991',
description: 'A successful psychiatrist loses his mind after one of his most dependent patients, a highly manipulative obsessive-compulsive, tracks him down during his family vacation.',
director: 'Frank Oz',
rating: 6.8
},
{
id: 'tt1156398',
title: 'Zombieland',
released: '2009',
description: 'A shy student trying to reach his family in Ohio, and a gun-toting tough guy trying to find the Last Twinkie and a pair of sisters trying to get to an amusement park join forces to travel across a zombie-filled America.',
director: 'Ruben Fleischer',
rating: 7.7
}
];
return {
all: function() {
return movies;
},
get: function(movieId) {
// Simple index lookup
for(var i=0, l=movies.length; i < l; i++) {
if(movies[i].id == movieId) {
return movies[i];
}
}
}
}
});