Всем привет! Не так давно в одном из комментариев я пообещал написать вводную статью для быстрого знакомства с возможностями Ionic Framework (далее IF). Стараюсь сдерживать свои обещания. Для начала мне хотелось бы выложить список ссылок, которыми часто пользуюсь при разработке с помощью IF:
sudo npm i -g cordova ionic
ionic start MSKWeather tabs
cd MSKWeather
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Status" icon-off="ion-cloud" icon-on="ion-cloud" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
</ion-tabs>
ionic serve
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Status" icon-off="ion-cloud" icon-on="ion-cloud" href="#/tab/city">
<ion-nav-view name="tab-city"></ion-nav-view>
</ion-tab>
</ion-tabs>
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.city', {
url: '/city',
views: {
'tab-city': {
templateUrl: 'templates/tab-city.html',
controller: 'CityCtrl'
}
}
})
.state('tab.city-detail', {
url: '/city/:id',
views: {
'tab-city': {
templateUrl: 'templates/city-detail.html',
controller: 'CityDetailCtrl'
}
}
})
$urlRouterProvider.otherwise('/tab/city');
});
angular.module('starter.controllers', [])
.controller('CityCtrl', function($scope) {
})
.controller('CityDetailCtrl', function($scope) {
});
angular.module('starter.services', [])
.factory('Cities', function() {
var cities = [{
id: 524901,
name: 'Москва',
desc: 'Столица нашей Родины',
emblem: 'http://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_Arms_of_Moscow.png'
}];
return {
all: function() {
return cities;
},
get: function(id) {
for (var i = 0; i < cities.length; i++) {
if (cities[i].id === parseInt(id)) {
return cities[i];
}
}
return null;
}
};
});
.controller('CityCtrl', function($scope, Cities) {
$scope.cities = Cities.all();
})
.controller('CityDetailCtrl', function($scope, $http, $stateParams, $ionicPopup) {
$scope.data = {};
$scope.id = $stateParams.id;
$scope.showAlert = function(title, text) {
$ionicPopup.alert({
title: title,
template: text
});
};
$scope.refresh = function() {
$http.get('http://api.openweathermap.org/data/2.5/forecast/daily?id='+$scope.id)
.success(function(data, status, headers, config){
$scope.data = data;
$scope.$broadcast('scroll.refreshComplete');
})
.error(function(data, status, headers, config){
$scope.showAlert(status, data);
$scope.$broadcast('scroll.refreshComplete');
});
};
$scope.refresh();
})
<ion-view view-title="Города">
<ion-content class="padding">
<ion-list>
<a class="item item-avatar" ng-repeat="city in cities" href="#/tab/city/{{city.id}}">
<img ng-src="{{city.emblem}}">
<h2>{{city.name}}</h2>
<p>{{city.desc}}</p>
</a>
</ion-list>
</ion-content>
</ion-view>
{
"cod": "200",
"message": 0.0165,
"city": {
"id": 524901,
"name": "Moscow",
"coord": {
"lon": 37.615555,
"lat": 55.75222
},
"country": "RU",
"population": 1000000
},
"cnt": 7,
"list": [
{
"dt": 1428915600,
"temp": {
"day": 283.84,
"min": 278.31,
"max": 284.09,
"night": 278.31,
"eve": 283.05,
"morn": 281.75
},
"pressure": 1010.15,
"humidity": 74,
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"speed": 5.02,
"deg": 243,
"clouds": 32
},
{
"dt": 1429002000,
"temp": {
"day": 279.6,
"min": 275.65,
"max": 280.3,
"night": 275.65,
"eve": 279.3,
"morn": 278.04
},
"pressure": 994.7,
"humidity": 89,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"speed": 5.01,
"deg": 200,
"clouds": 64,
"rain": 1.86
},
{
"dt": 1429088400,
"temp": {
"day": 277.79,
"min": 273.76,
"max": 278.35,
"night": 277.3,
"eve": 278.35,
"morn": 273.76
},
"pressure": 998.51,
"humidity": 73,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"speed": 6.53,
"deg": 221,
"clouds": 76,
"rain": 0.53
},
{
"dt": 1429174800,
"temp": {
"day": 282.85,
"min": 276.5,
"max": 282.85,
"night": 276.5,
"eve": 278.69,
"morn": 279.93
},
"pressure": 991.07,
"humidity": 0,
"weather": [
{
"id": 501,
"main": "Rain",
"description": "moderate rain",
"icon": "10d"
}
],
"speed": 5.36,
"deg": 287,
"clouds": 47,
"rain": 4.22
},
{
"dt": 1429261200,
"temp": {
"day": 280.71,
"min": 274.5,
"max": 280.71,
"night": 274.5,
"eve": 277.19,
"morn": 280.17
},
"pressure": 995.12,
"humidity": 0,
"weather": [
{
"id": 501,
"main": "Rain",
"description": "moderate rain",
"icon": "10d"
}
],
"speed": 5.32,
"deg": 285,
"clouds": 65,
"rain": 3.23
},
{
"dt": 1429347600,
"temp": {
"day": 281.27,
"min": 276.59,
"max": 281.27,
"night": 276.59,
"eve": 278.67,
"morn": 279.17
},
"pressure": 1002.53,
"humidity": 0,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"speed": 9.51,
"deg": 359,
"clouds": 67,
"rain": 0.62
},
{
"dt": 1429434000,
"temp": {
"day": 282.04,
"min": 278.38,
"max": 282.04,
"night": 279.1,
"eve": 280.23,
"morn": 278.38
},
"pressure": 1006.22,
"humidity": 0,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"speed": 5.5,
"deg": 311,
"clouds": 88,
"rain": 0.97
}
]
}
<ion-view view-title="{{data.city.name}}">
<ion-content class="padding">
<h2>
Город: {{data.city.name}}
</h2>
<p>
Страна: {{data.city.country}}
</p>
<p>
Население: {{data.city.population}} чел.
</p>
<p>
Широта: {{data.city.coord.lon}}
Долгота: {{data.city.coord.lat}}
</p>
<ion-list>
<a class="item item-avatar" ng-repeat="day in data.list" href="#">
<img ng-src="http://openweathermap.org/img/w/{{day.weather[0].icon}}.png">
<h2>Температура: {{(day.temp.day - 273.15).toFixed(2)}} C</h2>
<p>На дату: <span ng-bind="day.dt*1000 | date: 'dd.MM.yyyy'"></span></p>
</a>
</ion-list>
</ion-content>
</ion-view>
.item-avatar>img:first-child {
border-radius: 5%;
}
<ion-refresher pulling-text="Тянем-потянем" on-refresh="refresh()">
</ion-refresher>
$scope.$broadcast('scroll.refreshComplete');
ionic serve --lab
ionic platform add android (ну или ios)
ionic build android (ios)
ionic emulate android (ios)
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
К сожалению, не доступен сервер mySQL