Mobile Angular UI - Hızlı Kılavuz
Mobile Angular UI, hibrit mobil uygulamalar geliştirmek için açık kaynaklı bir çerçevedir. Mobile Angular UI, çekici HTML5 hibrit mobil ve masaüstü uygulamaları oluşturmaya yardımcı olan Twitter Bootstrap ve AngularJS'den yararlanır.
Mobil Açısal Kullanıcı Arayüzünün Özellikleri
Mobile Angular UI, aşağıda listelenen bazı harika bileşenlere sahiptir -
Navbars- Navbars, cihaz ekranının üst ve alt kısmını kullanır. Menü öğelerini veya başlık bölümünü görüntülemek için üst gezinme çubuğunu kullanabiliriz. Alt gezinme çubuğu, altbilgi bölümünü görüntülemek için kullanılabilir.
Scrollable Areas- Bu özellik, uygulamayı daha kullanıcı dostu hale getirir. Css sınıfları ekleniyor. scrollable-header / .scrollable-footer , istediğiniz kaydırılabilir alana sabit üstbilgi / altbilgi ekler. Yükseklik ve konumlandırma konusunda herhangi bir sorun yaşamazsınız, css her şeyi halleder.
Accordion- Akordiyonlar çoğunlukla içeriğin kesit tipi görünümde olması gerektiğinde ve herhangi bir bölüm bir seferde görünür olduğunda kullanılır. İçerisindeki içeriği görüntülemek için sonraki bölümü gizleyebilir ve açabilirsiniz.
Dropdowns - Açılır listelerle çalışmak için konteynere css .dropdown menüsünü eklemek amaca hizmet eder.
Modals and Overlays- Modals ve Overlays, ekranınızda açılır pencere türü bir pencere gösterecektir. Bindirmeler, yalnızca kabın kendisi için görüntülenme şekli açısından modaldan farklılık gösterir.
Sections- Bölümler, gövde içinde sergilenen kaplardır. Bölümler ile mevcut sınıflarla cihazdaki ekranınızın düzenini değiştirebilirsiniz. Aşağıdaki sınıflardan yararlanabilirsiniz:.section-default, .section-primary, .section-success, .section-info, .section-warning or .section-danger düzeni değiştirmek için.
Sidebars- Kenar çubukları ekranın sol ve sağ tarafını kaplar. Sol veya sağ tarafa bağlı öğe tıklandığında her zaman gizlenir ve etkinleştirilir. Ekrandaki alanı kullanmanın en iyi yolu budur.
Toggle Switch - Mobil Açısal Kullanıcı Arayüzü, ui-switchdirektif. Ui-switch direktifi, bir boolean ngModel değerine uygulandığında bir geçiş yapar.
Tabs- Sekmeler, açısal mobil kullanıcı arayüzünde bulunan yararlı bileşenlerdir. Tablolar aynı sarmalayıcıda bulunur ve içeriğinizi, tıpkı sekmelerin tarayıcıda nasıl açıldığı gibi ayrı bölmede gösterir. Kullanıcıya aynı anda yalnızca bir sekme görüntülenir.
Mobil Açısal Kullanıcı Arayüzünün Avantajları
Aşağıdakiler Mobile Angular UI'nin avantajlarıdır -
Mobile Angular UI, navbar, kenar çubukları, modlar ve kaplamalar, anahtarlar vb. Gibi harika UI mobil bileşenleri sağlar.
Öğrenmesi ve başlatması çok kolay olan AngularJS ve Twitter Bootstrap'i kullandığından hibrit uygulamalar oluşturmak kolaydır. Ayrıca, ücretsiz bir açık kaynak çerçevesidir.
Mobil Açısal UI bileşenleri ile birlikte iyonik bileşenleri kullanmak mümkündür.
Mobil Açısal Kullanıcı Arayüzünün Dezavantajları
Aşağıdakiler, Mobile Angular UI'nin dezavantajlarıdır -
Yalnızca JavaScript içeren bir çerçeve olan AngularJS'de yazılan uygulamalar güvenli değildir. Sunucu tarafı kimlik doğrulama ve yetkilendirme, bir uygulamayı güvende tutmak için gereklidir.
AngularJS yönergeleri HTML biçimlendirmesine eklendiğinden, hata ortaya çıktığında hata ayıklama biraz zorlaşır.
Bu bölümde, projemizde kullanabilmemiz için Mobile Angular UI kuracağız.
Mobile Angular UI kurmanın iki yolu vardır -
- Github'dan indirin
- Npm kullanma
Github'dan indirin
Aşağıdaki github bağlantısına gidin -https://github.com/mcasimir/mobile-angular-ui/releasesve en son açısal mobil kullanıcı arayüzünü indirebilirsiniz. Mobil açısal kullanıcı arabirimi için github bağlantısı aşağıdaki gibidir
Klonla veya indir düğmesini tıklayın (mavi ile vurgulanmıştır) ve size klonlanabilen GitHub bağlantısını (turuncu ile vurgulanmıştır) ve Angular Mobile UI'nin tam kodunu indirebileceğiniz bir İndirme ZIP'i (siyahla vurgulanmıştır) gösterir.
GitHub bağlantısını klonlamak için git'i yüklemeniz gerekir. GIT'i kurmak için bu bağlantıyı takip etmek zorunda değilseniz, sisteminizde git kurulu olduğundan emin olun .
İlk önce github bağlantısını klonlayacak - https://github.com/mcasimir/mobile-angular-ui.git.
Mobil açısal UI dosyalarını almak için - cd mobile-angular-ui / src / js.
İhtiyaç duyduğunuz dosyalar yukarıda gösterildiği gibi mevcuttur.
Npm kullanma
Npm'yi kullanmak, yüklemenin en kolay yoludur. Nodejs ve npm'nin kurulu olduğundan emin olun. Değilse, sisteminize nodej'leri yüklemek için bu bağlantıyı izleyin .
Komut isteminizi açın ve uiformobile / adlı bir dizin oluşturun . İçeri gir / uiformobile cd komutunu kullanarak.
Şimdi aşağıdaki komutu yürütün -
npm initNpm init komutu projeyi başlatacak -
Aşağıda gösterildiği gibi package.json oluşturacaktır -
{
"name": "uiformobile",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Şimdi mobil açısal kullanıcı arayüzünü kurmak için aşağıdaki komutu çalıştırın.
npm install --save mobile-angular-ui
Mobil açısal kullanıcı arayüzünü kurmayı tamamladınız, şimdi bir mobil uygulama oluşturmak için onu nasıl kullanacağımızı görelim.
Bu bölüm proje kurulumu üzerinde çalışacaktır. Bölümlerin geri kalanında örneklerle çalışmak için bu kurulumdan yararlanacağız.
Gerekli paketleri kurmak kolay olduğundan proje kurulumu npm kullanılarak yapılacaktır.
Komut isteminizi açın ve uiformobile / adlı bir dizin oluşturun ve cd komutunu kullanarak dizini girin.
Şimdi aşağıdaki komutu yürütün -
npm initNpm init komutu, projeyi başlatacaktır -
Aşağıda gösterildiği gibi package.json oluşturacaktır -
{
"name": "uiformobile",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Şimdi mobil açısal kullanıcı arayüzünü kurmak için aşağıdaki komutu çalıştırın.
npm install --save mobile-angular-ui
Mobile Angular UI ile çalışmak için AngularJS'ye ihtiyacımız var. Bunu aşağıdaki komutu kullanarak kuralım -
npm install --save-dev angular
Yönlendirme ile çalışmak için açısal rotaya da ihtiyacımız var. Yüklemek için komut -
npm install --save-dev angular-route
Uygulamamızı tarayıcıda çalıştıracak bir sunucuya ihtiyacımız olacak. Ekspres kullanacağız.
Ekspres yükleme komutu -
npm install --save-dev expressKök klasörün içinde bir server.js dosyası oluşturun. Bu dosya, sunucuyu başlatmak için ekspres komuta sahip olacaktır.
İşte server.js'nin ayrıntıları -
const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))Sunucuyu başlatmak için aşağıdaki komutu kullanın -
node server.js.Sunucu 3000 bağlantı noktasında başlayacaktır. http://localhost:3000/ tarayıcınızda kullanıcı arayüzünü görmek için.
Son klasör yapısı aşağıda gösterildiği gibidir -
Node_modules / klasörü mobile_angular_ui, angularjs ve angular-route için kurulmuş tüm paketlere sahiptir.
src/klasörü, kullanıcı arayüzünün geliştirilmesi için gereken HTML ve js dosyalarına sahip olacaktır. İndex.html, tıkladığınızda görülebilecek başlangıç noktasıdırhttp://localhost:3000/.
Şimdi gerekli paketler kuruldu. Şimdi ihtiyacımız olan önemli css ve js dosyalarından bahsedelim. Çerçeve, Mobil Uygulama için tasarlanmış olsa da, masaüstü uygulamaları için de kullanılabilir.
Aşağıda, .html dosyalarınıza eklenmesi zorunlu olan önemli css dosyaları verilmiştir.
| Sr.No | Dosya ve Açıklama |
|---|---|
| 1 | mobile-angular-ui-base.css Bu css dosyası, mobil cihazlar ve tabletler içindir. |
| 2 | mobile-angular-ui-desktop.css Duyarlı css dosyası, masaüstü ve mobil cihazlarda kullanılmak üzere tasarlanmıştır. |
| 3 | mobile-angular-ui-hover.css Bunun üzerine gelme için css kuralları vardır. |
| 4 | angular.min.js Proje ile başlamamız gereken AngularJS dosyası. |
| 5 | mobile-angular-ui.min.js Bu AngularJS modülünde bağımlılık modülünde kullanmamız gereken mobil açısal UI js dosyasıdır. Bu çekirdek modüldür. |
| 6 | angular-route.min.js Bu, Yönlendirme için kullanılan bir AngularJS Rota dosyasıdır. |
Yukarıdaki dosyaların tümü içinde mevcuttur node_modules/. Proje kurulumunu tamamladık, şimdi ilk uygulamamızı geliştirmek için bir sonraki bölümde bu projeden yararlanacağız.
Bu bölümde, hem mobil hem de masaüstünde çalışacak ilk uygulamamızı oluşturacağız.
Önceki bölümde oluşturduğumuz proje kurgusu aşağıdaki yapıya sahiptir -
uiformobile/
node_modules/
src/
package.json
index.htmlMobile Angular UI kullanarak basit bir UI oluşturmak için adımları izleyin.
Aşama 1
Aşağıdaki css dosyalarını html başlığı bölümünde aşağıda gösterildiği gibi ekleyin -
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<!-- Mandatory CSS -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />Sonra js dosyalarını ekleyin -
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>İndex.html dosyası aşağıdaki gibi görünecektir -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<!-- Mandatory CSS -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
</head>
<body>
</body>
</html>Adım 2
Mobil açısal kullanıcı arayüzünün temel düzenini aşağıdaki gibi göreceğiz -
<body ng-app="myFirstApp">
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>Aşama 3
Oluşturmak js/ folder in src/ ve Ekle app.js ona.
Modülü tanımlayın ve aşağıda gösterildiği gibi bağımlılık olarak Mobil açısal UI ve Açısal Yol ekleyin -
<script type="text/javascript">
'ngRoute',
angular.module('myFirstApp', [
'mobile-angular-ui'
]);
</script>Ng-app = ”myFirstApp” öğesini <body> etiketine ekleyin -
<body ng-app="myFirstApp">Mobile-angular-ui modülünde aşağıdaki modül listesi bulunur -
angular.module('mobile-angular-ui', [
'mobile-angular-ui.core.activeLinks', /* adds .active class to current links */
'mobile-angular-ui.core.fastclick', /* polyfills overflow: auto */
'mobile-angular-ui.core.sharedState', /* SharedState service and directives */
'mobile-angular-ui.core.outerClick', /* outerClick directives */
'mobile-angular-ui.components.modals', /* modals and overlays */
'mobile-angular-ui.components.switch', /* switch form input */
'mobile-angular-ui.components.sidebars', /* sidebars */
'mobile-angular-ui.components.scrollable', /* uiScrollable directives */
'mobile-angular-ui.components.capture', /* uiYieldTo and uiContentFor directives */
'mobile-angular-ui.components.navbars' /* navbars */
]);Mobile-angular-ui.min.js, içinde yukarıdaki tüm çekirdek ve bileşen modüllerine sahiptir. Tüm mobile-angular-ui.min.js dosyasını yüklemek yerine, gereksiniminize göre gerekli bileşenleri de yükleyebilirsiniz.
4. adım
Vücut etiketinize aşağıda gösterildiği gibi denetleyici ekleyin -
<body ng-app="myFirstApp" ng-controller="MainController">Adım 5
Temel düzende ekledik <ng-view></ng-view>, bu bizim için görünümleri yükleyecek.
NgRoute kullanarak app.js'deki rotaları tanımlayalım. Yönlendirme için gerekli olan dosyalar zaten başlık bölümüne eklenmiştir.
Src / içinde home / klasör oluşturun. Aşağıdaki ayrıntılarla birlikte home.html'yi ekleyin -
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Şimdi uygulamayı başlattığımızda, varsayılan olarak home.html'nin <ng-view> </ng-view> içinde görüntülenmesini istiyoruz.
Yönlendirme, aşağıda gösterildiği gibi app.config () içinde yapılandırılır -
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});6. Adım
Aşağıda gösterildiği gibi home.html'nin içine {{msg}} ekledik -
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Aşağıda gösterildiği gibi kontrolörde de aynısını tanımlayalım -
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
});7. Adım
Şimdi aşağıdaki komutu kullanarak uygulamayı başlatmak için komutu çalıştırın -
node server.js
8. Adım
Uygulamanızı şuradan yükleyin: http://localhost:3000 tarayıcıda -
Mobil modda aşağıdaki ekranı göreceksiniz -
Masaüstü modunda aşağıdaki ekranı göreceksiniz -
Sonraki bölümlerde Mobile Angular UI'deki her bir bileşenin ayrıntılarını anlayalım.
İşte yukarıdaki ekran için son kod. Şimdiye kadarki klasör yapısı aşağıdaki gibidir -
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>js/app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
});home/home.html
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Bu bölümde, Mobile Angular UI'de bulunan temel düzen görüntüsünü anlayacağız.
Temel düzen yapısı aşağıdaki gibidir
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>Cep telefonunuzun veya masaüstünüzün ekranı bölümlere ayrılmıştır.
Kenar çubuğu
Gövde bölümü, biri sol taraf ve diğeri sağ taraf için olmak üzere kenar çubuğu div kaplarıyla başlar -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Bir kenar çubuğu, alanı özel olarak mobil cihazlarda verimli bir şekilde kullanmaya yardımcı olur ve bu, kullanıcı arayüzünü çok etkileşimli ve temiz hale getirir. Kenar çubuğunda, pencereler sol ve sağ taraftan açılır.
Navbars
Sonraki bölüm navbarlardır. Aşağıda, gezinti çubuklarının gösterileceği div kapsayıcıları verilmiştir -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Üstte ve altta gösterilirler.
Uygulama Gövde Bölümü
Bu bölüm, kullanıcının etkileşime girmesi veya okuması için içeriğinizin görüntülendiği ana yerdir.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Kullanır <ng-view></ng-view>Kullanıcı arabirimindeki kullanıcı etkileşimine bağlı olarak gerçek içeriklerle değiştirilecek olan yönerge. AngularJS NgRoute, burada görünümleri değiştirmek için kullanılır.
Modaller ve Kaplamalar
Son bölüm, modals ve overlays bölümüdür. Modları ve kaplamaları gösteren div kapsayıcısı aşağıdaki gibidir -
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>Bu bölümde, mobil açısal kullanıcı arayüzündeki önemli bileşenleri anlayacağız. Bunlar aşağıdaki gibidir -
- Navbars
- Sidebars
- Modals
- Overlays
Navbars
Gezinme çubukları, cihaz ekranının üst ve alt kısmını kullanır. Menü öğelerini veya başlık bölümünü görüntülemek için üst gezinme çubuğunu kullanabiliriz. Alt gezinme çubuğu, altbilgi bölümünü görüntülemek için kullanılabilir.
Gezinme çubuğunun ekrandaki basit görüntüsü aşağıdaki gibidir -
Navbar iki şekilde gösterilebilir: sabit ve taşma yaklaşımı.
Önemli CSS sınıfları
Mobil Açısal Kullanıcı Arayüzünde navbar'ı göstermek için css sınıflarını ( navbar, .navbar-app) kullanmanız gerekir .
Üst / Alt Taşma yaklaşımı için Sınıflar
Üst navbar için css sınıfı - .navbar-absolute-top .
Alt gezinme çubuğu için css sınıfı - .navbar-absolute-bottom .
Üst / Alt sabit yaklaşım için Sınıflar
Üst navbar için css sınıfı - .navbar-fixed-top .
Alt gezinme çubuğu için css sınıfı - .navbar-fixed-bottom .
Kullanıcı arayüzündeki Taşma Navbar'ı üzerinde çalışalım.
Aşağıdakiler aynı için HTML kodu -
Navbar-Top
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<div class="btn">
<i class="fa fa-th-large "></i> Library
</div>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div class="btn">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>Navbar-Bottom
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>Ekran böyle görünüyor -
Kenar çubukları
Kenar çubukları ekranın sol ve sağ tarafını kaplar. Sol veya sağ tarafa bağlı öğe tıklandığında her zaman gizlenir ve etkinleştirilirler. Ekrandaki alanı kullanmanın en iyi yolu budur.
Şimdiye kadar navbarların çalışmasını gördük. Şimdi kenar çubuklarını açmak için sol ve sağ taraftaki gezinme çubuğunu kullanalım.
Kenar çubuklarını sol veya sağ tarafa yerleştirebilirsiniz.
Önemli CSS sınıfları
Sol kenar çubuğu için css sınıfları - sol kenar çubuğu .
Sağ taraftaki kenar çubuğunda için css sınıfları - kenar çubuğu kenar çubuğu sağ .
Kenar çubuğu için div kapsayıcısı aşağıdaki gibidir -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Kenar Çubukları ile Etkileşim
Sol ve sağ tarafa eklenen kenar çubuklarını açıp kapatmak için kenar çubuklarını açacak olan html etiketine aşağıdakileri eklemeniz gerekir.
Örneğin, bir bağlantıya tıklandığında sol kenar çubuğunu açmak için aşağıdakileri ekleyebilirsiniz -
Kenar çubuğu, kenar çubuğu öğelerini değiştirmek için paylaşılan durum uiSidebarLeft ve uiSidebarRight'ı kullanır.
Daha önce eklediğimiz üst gezinme çubuğunu kullanacağız. Ui-toggle = ”uiSidebarLeft” ve ui-toggle = "uiSidebarRight" ve ayrıca sınıf sidebar-toggle ve sidebar-right-toggle ekleyin.
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div><div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>Şimdi sol kenar çubuğu ve sağ kenar çubuğu için bir div kapsayıcı ekleyelim.
Sol Kenar Çubuğu
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>Kullanabilirsiniz ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'kenar çubuğunun içinde herhangi bir yere tıklandığında kenar çubuğunu kapatmak için kenar çubuğu şablonunuzda. Kenar çubuğu şablonunun dışındaki herhangi bir yere tıklandığında kenar çubuğu varsayılan olarak kapatılacaktır.
Sol taraftaki çubukta, kullanıcı bağlantılara tıkladığında, eklediğimiz gibi kenar çubuğu kapatılacaktır. ui-turn-off='uiSidebarLeft' sol kenar çubuğu şablonuna.
Sağ Kenar Çubuğu
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>Kenar çubuğunun tarayıcıdaki görüntüsü aşağıdaki gibidir -
Aşağıda gösterildiği gibi sol kenar çubuğu menüsüne gitmek için Öğreticiler'e tıklayın -
Aşağıda gösterildiği gibi sağ taraftaki menüye ulaşmak için E-Kitaplara tıklayın -
Modaller ve Kaplamalar
Modals ve Overlays, ekranınızda açılır pencere türü bir pencere gösterecektir. Bindirmeler, yalnızca kabın kendisi için görüntülenme şekli açısından modaldan farklılık gösterir.
Kullanmanız gerekiyor ngIf/uiIf veya ngHide/uiHide uiState ile birlikte bindirmeyi veya modal'ı etkinleştirmek / devre dışı bırakmak için.
Modal için css, .modalve üst üste bindirme için .modal-overlay.
Modal ve kaplamayı göstermek için aşağıdaki div kapsayıcısını index.html dosyanıza ekleyin.
<div ui-yield-to="modals"></div>Daha önce yaptığımız navbar altbilgisine bir modal atayalım.
Burada HAKKIMIZDA bir model olarak hareket edecek ve BİZE ULAŞIN bir kaplama görevi görecek.
HAKKIMIZDA ve BİZİMLE İLETİŞİM bağlantılarına aşağıdaki değişiklikleri ekleyin -
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>Bu bağlantıya tıklarsak, modal ve overlay açılacaktır.
Modal ve kaplama içeriği eklendi inside src/home/home.html dosya.
Modal ve overlay için ana içerik aşağıdaki div kapsayıcısının içine sarılmalıdır -
<div ui-content-for="modals">
<div class="modal"><!-- ... --></div>
</div>Modal ve bindirme görünümüne içerik ekleyelim. Bağlantılarda kullandığımız isim, yani,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay"aynısı içeride de kullanılır aboutus modal içerik ve contactus yer paylaşımlı içerik.
<div ui-content-for="modals">
<div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="aboutus_modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
<p>Testing Modal</p>
</div>
<div class="modal-footer">
<button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
<button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="contactus_overlay">×</button>
<h4 class="modal-title">Overlay</h4>
</div>
<div class="modal-body">
<p>Testing Overlay</p>
</div>
<div class="modal-footer">
<button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
<button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>Modal ve bindirme ekranı aşağıdaki gibidir -
HAKKIMIZDA seçeneğine tıklandığında, aşağıda gösterildiği gibi modal görüntülenecektir -
BİZİMLE İLETİŞİME tıkladığınızda, aşağıda gösterildiği gibi yer paylaşımını gösterecektir -
Kalıcı pencereyi kapatmak için kapat düğmesine tıklayın.
Mobil açısal kullanıcı arayüzünde açılır menülerle çalışmak için class .dropdown-menu'den yararlanmanız gerekir .
İşte açılır menüyü gösteren bir örnek.
Değişiklikleri ekleyeceğiz src/home/home.html.
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
<div class="list-group-item list-group-item-home">
<div class="btn-group">
<a ui-turn-on='testDropdown' class='btn'>
<i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials
</a>
<ul
class="dropdown-menu"
ui-outer-click="Ui.turnOff('testDropdown')"
ui-outer-click-if="Ui.active('testDropdown')"
role="menu"
ui-show="testDropdown"
ui-state="testDropdown"
ui-turn-off="testDropdown">
<li><a>PHP</a></li>
<li><a>JAVA</a></li>
<li><a>MYSQL</a></li>
<li class="divider"></li>
<li><a>PYTHON</a></li>
</ul>
</div>
</div>
</div>Açılır menüde gösterilen Öğreticiler listemiz var. Ekrandaki çıktı aşağıdaki gibidir -
Akordiyonlar çoğunlukla içeriğin kesit tipi görünümde olması gerektiğinde ve herhangi bir bölüm bir seferde görünür olduğunda kullanılır. İçerisindeki içeriği görüntülemek için sonraki bölümü gizleyebilir ve açabilirsiniz.
Mobile Angular UI'de bir Akordeon'un çalışmasını görmek için bir örnek üzerinde çalışalım.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>src / js / app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.sections="Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!";
});Akordeon şablonu src / home / home.html içine eklenir.
<div class="scrollable">
<div class="scrollable-content">
<div class="section">
<div class="panel-group"
ui-shared-state="testAccordion"
ui-default='2'>
<div class="panel panel-default" ng-repeat="i in [1,2,3,4,5]">
<div class="panel-heading" ui-set="{'testAccordion': i}">
<h4 class="panel-title">
Accordion Group Item #{{i}}
</h4>
</div>
<div ui-if="testAccordion == {{i}}">
<div class="panel-body">
{{sections}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>Tarayıcıdaki görüntü aşağıdadır -
Sekmeler, açısal mobil kullanıcı arayüzünde bulunan kullanışlı bileşenlerdir. Sekmeler aynı sarmalayıcıda bulunur ve içeriğinizi, tıpkı sekmelerin tarayıcıda nasıl açıldığı gibi ayrı bir bölmede gösterir. Kullanıcıya aynı anda yalnızca bir sekme görüntülenir.
İşte Tabs bileşeninin çalışan bir örneği.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>src / js / app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it is integrated with HTML. It is open and
cross-platform.";
$scope.angularjs="AngularJS is a very powerful
JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library
developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
});src / home / home.html
<div class="scrollable">
<div class="scrollable-content">
<div class="section">
<ui-shared-state id="activeTab" default="1"></ui-shared-state>
<ul class="nav nav-tabs">
<li ui-class="{'active': activeTab == 1}">
<a ui-set="{'activeTab': 1}">Javascript</a>
</li>
<li ui-class="{'active': activeTab == 2}">
<a ui-set="{'activeTab': 2}">AngularJS</a>
</li>
<li ui-class="{'active': activeTab == 3}">
<a ui-set="{'activeTab': 3}">ReactJS</a>
</li>
</ul>
<div ui-if="activeTab == 1">
<h3 class="page-header">Javascript</h3>
<p>{{js}}</p>
</div>
<div ui-if="activeTab == 2">
<h3 class="page-header">AngularJS</h3>
<p>{{angularjs}}</p>
</div>
<div ui-if="activeTab == 3">
<h3 class="page-header">ReactJS</h3>
<p>{{reactjs}}</p>
</div>
<div class="btn-group justified nav-tabs">
<a ui-set="{'activeTab': 1}"
ui-class="{'active': activeTab == 1}" class="btn btn-default">Javascript</a>
<a ui-set="{'activeTab': 2}"
ui-class="{'active': activeTab == 2}" class="btn btn-default">AngularJS</a>
<a ui-set="{'activeTab': 3}"
ui-class="{'active': activeTab == 3}" class="btn btn-default">ReactJS</a>
</div>
</div>
</div>
</div>Aşağıdaki tarayıcıdaki görüntüdür -
Sürükle ve bırak özelliği, bir html öğesini kavrayarak ve öğeyi farklı bir konuma sürükleyip yerleştirerek kontrol etmenizi sağlar.
Mobile Angular UI'de sürükle ve bırak özellikleriyle çalışmak için hareketler modülünü eklemeniz gerekir.
Öncelikle JavaScript dosyasını aşağıda gösterildiği gibi index.html içine ekleyin -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>Daha sonra hareketler modülünü aşağıda gösterildiği gibi app.js'ye bağımlılık olarak ekleyin -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);Öğeyi sürüklemek için $ drag modülünü kullanarak özel bir yönerge oluşturmamız gerekiyor.
$ Drag modülünü kullanmanın sözdizimi aşağıdaki gibidir -
$drag.bind(element, dragOptions, touchOptions);Parametreler
element - Sürüklemek istediğiniz html öğesi.
dragOptions - Aşağıdaki detaylara sahip bir nesnedir -
var dragOptions= {
transform: $drag.TRANSLATE_BOTH,
start: function(dragInfo, event){},
end: function(dragInfo, event){},
move: function(dragInfo, event){},
cancel: function(dragInfo, event){}
};İçin dönüşümü , seçeneklerin aşağıdaki yararlanabilir -
$ drag.NULL_TRANSFORM - öğe için dönüştürme hareketi yok.
$ drag.TRANSLATE_BOTH - Eleman hem x hem de y ekseninde hareket edecektir.
$ drag.TRANSLATE_HORIZONTAL - Eleman x ekseninde hareket edecektir.
$ drag.TRANSLATE_UP - Öğe, negatif y ekseninde hareket edecektir.
$ drag.TRANSLATE_DOWN - Öğe, pozitif bir y ekseninde hareket edecektir.
$ drag.TRANSLATE_LEFT - Eleman, negatif x ekseninde hareket edecektir.
$ drag.TRANSLATE_RIGHT - Eleman, pozitif x ekseninde hareket edecektir.
$ drag.TRANSLATE_VERTICAL - Eleman y ekseninde hareket edecektir.
$ drag.TRANSLATE_INSIDE - Aşağıda gösterildiği gibi bir işlevi kullanır -
{
transform: $drag.TRANSLATE_INSIDE(myElement)
}Başlangıç, bitiş, taşıma, iptal, draginfo ve olay ayrıntılarını parametreler olarak içeren bir işlevdir .
draginfo- $ touch modülünün genişletilmiş bir sürümüdür. Aşağıdaki ayrıntılara sahiptir -
originalTransform- $ drag bağlanmadan önce CSS dönüşümüne göre $ transform nesnesi .
originalRect - Herhangi bir sürükleme eyleminden önce bağlanan öğe için Sınırlayıcı İstemci Dikkati.
startRect - Başlangıç etkinliğinde kaydedilen bağlı öğe için Sınırlayıcı İstemci Dikkati.
startTransform- Başlangıç olayındaki $ dönüşümü.
rect - Bağlı öğe için geçerli Sınırlayıcı İstemci Dikkati.
transform- Geçerli $ dönüşümü.
reset - Öğeyi originalTransform'a geri yükleyen bir işlev.
undo - startTransform'a öğe geri yükleyen bir işlev.
touchOptions - temel $ touch hizmetine iletilecek bir seçenek nesnesidir.
Src / js / app.js içinde aşağıda gösterildiği gibi $ drag modülünü kullanarak bir yönerge oluşturun -
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);Bir öğeyi sürüklemenin çalışan bir örneğini görelim -
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>src / js / app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it
is integrated with HTML. It is open and cross-platform.";
$scope.angularjs="AngularJS is a very powerful
JavaScript Framework. It is used in Single Page
Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more
responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library
developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS
allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
});Sürükleme öğesi src / home / home.html içine eklenir -
<div style="height: 100%; width: 100%; padding: 40px;">
<div style="height: 100%; width: 100%; border: 1px solid #444; position: relative;">
<div drag-Item>
<img src="src/img/test.png" width="100" height="100" />
</div>
</div>
</div>Aşağıda gösterildiği gibi bir görüntü sürüklemek için kullanılır -
Tarayıcıdaki ekran aşağıdaki gibidir -
Görüntüyü kullanıcı arayüzüne sürükleyebilirsiniz ve fare serbest bırakıldığında, son işlevi içinde drag.reset () kullandığımız için orijinal konumuna geri dönecektir .
$drag.bind($element, {
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);Sabit konumlandırılmış elemanlar için bazı cihazlarda karşılaşılan sorunlar vardır. Kaydırılabilir alanlarla çalışmak için Mobile Angular UI, overflow: auto'dan yararlanır .
Kaydırılabilir alan şablonu aşağıdaki gibidir -
<div class="scrollable">
<div class="scrollable-content">...</div>
</div>Kaydırılabilir Alanlara Üstbilgi ve Altbilgi Ekleme
.Scrollable-header / .scrollable-footer css sınıflarını ekleyerek , istediğiniz kaydırılabilir alana sabit üstbilgi / altbilgi ekleyeceğiz. Yükseklik ve konumlandırma konusunda herhangi bir zahmete girmenize gerek yok, css her şeyi halleder.
Üstbilgi / altbilgi için şablon aşağıda gösterilmiştir -
<div class="scrollable">
<div class="scrollable-header"><!-- ... --></div>
<div class="scrollable-content"><!-- ... --></div>
<div class="scrollable-footer"><!-- ... --></div>
</div>Kaydırılabilir Alanlardaki Yönergeler
Kaydırılabilir alanlarla çalışırken çok yararlı olan yönergeler aşağıdadır -
uiScrollTop- Kaydırma üste ulaştığında bir şey yapmak istediğinizde kullanılmalıdır. Örneğin, ui-scroll-top = "callyourfunc ()".
uiScrollBottom- Kaydırma en alta ulaştığında bir şey yapmak istediğinizde kullanılmalıdır. Örneğin, ui-scroll-bottom = "callyourfunc ()".
uiScrollableHeader- Kaydırma başlığa ulaştığında bir şey yapmak istediğinizde kullanılmalıdır. Örneğin, ui-scroll-header = "callyourfunc ()".
uiScrollableFooter- Kaydırma altbilgiye ulaştığında bir şey yapmak istediğinizde kullanılmalıdır. Örneğin, ui-scroll-footer = "callyourfunc ()".
UiScrollBottom yönergesine bir örnek -
<div class="scrollable">
<div class="scrollable-content section" ui-scroll-bottom="callyourfunc()">
<ul>
<li ng-repeat="a in lists">
{{a.name}}
</li>
</ul>
</div>
</div>Kaydırılabilir Alanların çalışan bir örneğini burada bulabilirsiniz.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>src / js / app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it
is integrated with HTML. It is open and cross-platform.";
$scope.angularjs="AngularJS is a very powerful JavaScript Framework. It is used in Single Page
Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more
responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS
allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
var storyList=[];
for (var i=1; i <= 100; i++) {
storyList.push('My story no ' + i);
}
$scope.storylist=storyList;
$scope.bottom=function() {
alert('End of the stories');
};
});src / home / home.html
<div class="scrollable">
<div class="scrollable-header">My Stories List</div>
<div class="scrollable-content" ui-scroll-bottom="bottom()">
<div class="list-group">
<a ng-repeat="item in storylist" href="" class="list-group-item">
{{ item }} <i class="fa fa-chevron-right pull-right"></i>
</a>
</div>
</div>
<div class="scrollable-footer">End of the Stories</div>
</div>Tarayıcıdaki görüntü aşağıdadır -
Bu bölüm formlara odaklanacaktır. Formları daha iyi anlamak için çalışan bir örneğe bakalım.
İndex.html'de kod aşağıdaki gibi olacaktır -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>In home/home.html
<div class="scrollable">
<div class="scrollable-content section">
<form name="myform" role="form" ng-submit='myform.$valid && addDetails()'>
<fieldset>
<legend>Personal Details</legend>
<div class="form-group has-success has-feedback">
<label>First Name</label>
<input type="text"
ng-model="fname"
class="form-control"
placeholder="Enter First Name" required>
</div>
<div class="form-group has-success has-feedback">
<label>Last Name</label>
<input type="text"
ng-model="lname"
class="form-control"
placeholder="Enter Last Name" required>
</div>
<div class="form-group has-success has-feedback">
<label>Email</label>
<input type="email"
ng-model="email"
class="form-control"
placeholder="Enter email" required>
</div>
</fieldset>
<hr>
<input class="btn btn-primary btn-block" type="submit" value="Save" />
</form>
</div>
</div>Src / app.js aşağıdaki ayrıntılara sahip olacaktır -
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.addDetails=function() {
alert("All details are saved!");
};
});Tarayıcıdaki ekran aşağıdaki gibidir -
Ayrıntıları forma girin ve tıklayın Save buton.
Dokunma, kaydırma, öğeleri sürükleme gibi işlevler Mobile Angular UI'deki hareketler modülü tarafından gerçekleştirilir. Hareketler modülünün dokunma, kaydırma ve sürüklemede gerekli işlevselliği sağlamak için bir yönergesi ve hizmetleri vardır.
Mobile Angular UI'de hareket özellikleriyle çalışmak için, hareketler modülünü eklemeniz gerekir.
Öncelikle JavaScript dosyasını aşağıda gösterildiği gibi index.html içine ekleyin -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>Daha sonra hareketler modülünü aşağıda gösterildiği gibi app.js'ye bağımlılık olarak ekleyin -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);Hareket modülünü kullanarak sürükleme işlevinin nasıl çalıştığını zaten tartışmıştık. Aynı şeye bakDrag and Drop Bölüm.
Burada kaydırma işlevine bir göz atacağız.
UiSwipeLeft ve uiSwipeRight present yönergesi , kullanıcının kaydırdığı yönü tespit etmeye yardımcı olur.
İşte Swipe ile ilgili çalışan bir örnek -
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>/js/app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.testSwipe=function(direction) {
alert('You swiped ' + direction);
};
});src/home/home.html
<div class="scrollable">
<div class="scrollable-content section"
ui-swipe-left="testSwipe('left side')"
ui-swipe-right="testSwipe('right side')">
<h2>Testing of Swipe gesture</h2>
<div>
Swipe left and right to activate the uiSwipeLeft and uiSwipeRight Directive.
</div>
</div>
</div>Tarayıcıdaki görüntü aşağıdadır -
Kaydırma yönergesi home.html içine eklenir.
<div class="scrollable-content section"
ui-swipe-left="testSwipe('left side')"
ui-swipe-right="testSwipe('right side')">TestSwipe () yöntemini çağırır, app.js'de tanımlanır.
$scope.testSwipe=function(direction) {
alert('You swiped ' + direction);
};Mobile Angular UI, ui-switchdirektif. Ui-switch direktifi, bir Boolean ngModel değerine uygulandığında bir geçiş yapar.
İşte Toggle Switch'in çalışan bir örneği.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
<style>
a.active {
color: blue;
}
</style>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item"
href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata">
<i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i
class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><
i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i
class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item"
href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class=
"fa fa-caret-right"></i>PHP </a>
<a class="list-group-item"
href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>app.js
/* eslint no-alert: 0 */
'use strict';
//n mobile-angular-ui
//
var app=angular.
// Here is how to define your module
// has dependent omodule('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});src/home/home.html
<div class="scrollable">
<div class="scrollable-content">
<form>
<h1>Testing Toogle Switch </h1>
<ui-switch id="enabled" name="enabled" ng-model="enabled" class="green"></ui-switch>
<p>{{ enabled }}</p>
</form>
</div>
</div>Tarayıcıdaki ekran aşağıdaki gibidir -
Bölümler, gövdenin içinde görüntülenen kaplardır. Mobile Angular UI, yerleşim yapısını değiştirmek için bölümler için kullanılabilen sınıfları kullanır.
İşte index.html -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
<style>
a.active {
color: blue;
}
</style>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic">
<i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata">
<i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg">
<i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience">
<i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases">
<i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops">
<i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class=
"fa fa-caret-right"></i>PHP </a>
<a class="list-group-item"
href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/", { templateUrl : "src/home/home.html" });
$routeProvider.when("/academic", {templateUrl : "src/academic/academic.html" });
$routeProvider.when("/bigdata", {templateUrl : "src/bigdata/bigdata.html" });
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});home/home.html
<div class="scrollable ">
<div class="scrollable-content ">
<div class="list-group text-center">
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>
<div class="list-group-item list-group-item-home" style="background-color: #ccc;">
<div>
<h2 class="home-heading">List of Latest Courses</h2>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Information Technology</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Academics</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Development</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Business</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Design</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Others</h4>
</div>
</div>
</div>
</div>
</div>Sınıflı konteyner .app, üst ve alt gezinme çubuğunu ve ekranda görüntülenen ana içeriği tutar. Sınıf.app herhangi bir dolgu veya arka plana sahip değil.
Sınıf .section dolgu ve arka plan eklemek için css'e sahiptir.
İşte bölümü olmayan bir düzen.
Sınıf bölümünü ekledikten sonra, düzene eklenen dolguyu göreceksiniz -
<div class="app section"></div>
Düzen için bölümlerde daha fazla varyasyon var.
.section-wide : makes horizontal padding as 0
.section-condensed : makes vertical padding as 0
.section-break : this class will add margin-bottom as well shadow to show the break in sections on the screen.Ayrıca düzeni değiştirmek için .section-default, .section-primary, .section-success, .section-info, .section-warning veya .section-danger gibi ek sınıflarla da oynayabilirsiniz.
Mobile Angular Core modülü, tüm temel işlevleri yönetir. Bağımlılık modülü olarak 'mobile-angular-ui .core' kullanarak açısal uygulamanın içinde bundan yararlanabilirsiniz . Önceki bölümlerde, doğrudan çekirdek modüle sahip olan 'mobile-angular-ui' kullandık. Ancak bağımsız olarak 'mobile-angular-ui.core' modülünden yararlanabilirsiniz. Bunu sınırlı işlevselliğe ihtiyaç duyduğunuzda yapabilirsiniz, yani uygulamanızdaki yalnızca Mobile Angular UI'nin temel işlevselliği.
Mobil Açısal Çekirdek Modülünde konuşacağımız önemli alt modüller aşağıdadır -
activeLinks
capture
outerClick
Touch ve olaylarıyla çalışmak için aşağıdaki modülü eklemeniz gerekir -
mobile-angular-ui.gesturesDokunmatik modülle sadece ilgileniyorsanız, yalnızca mobile-angular-ui.gestures.touch ekleyebilirsiniz .
$ touch, dokunmatik modül ile kullanılabilen bir hizmettir. Çalışmak istediğiniz tüm giriş cihazlarında çalışacaktır. Hareket, süre, hız, yön vb. Ayrıntıları verir.
$ Touch'taki yöntemler
Aşağıdakiler $ touch'ta kullanılabilen yöntemlerdir -
bağlamak
Bağlama yöntemine bir göz atalım .
Syntax
$touch.bind(element, eventHandlers, [options])Parameters
element - dokunma ayrıntılarıyla uğraşmak istediğiniz html öğesi.
eventHandlers- Belirli dokunma olayları için işleyicilere sahip bir nesne. Mevcut eventHandler'lar şunlardır:
start - touchstart olayı için bir geri arama.
end - touchend için bir geri arama olayı.
move - touchmove olayı için bir geri arama.
cancel - dokunmatik iptal olayı için bir geri arama.
options - Aşağıdaki gibi detaylara sahip olabilen bir nesnedir -
movementThreshold- Bir tam sayı değeri. Touchmove işleyicilerini tetiklemeye başlamadan önceki hareket piksellerinin sayısı.
valid - Bir dokunuşun işlenip işlenmeyeceğine veya yok sayılacağına karar veren bir boole değeri döndüren bir işlevdir.
sensitiveArea- Bir işlev veya öğe veya BoundingClientRect olabilir. Hassas alan, hareket dışarıdayken dokunmayı serbest bırakmak için sınırları tanımlar.
pointerTypes - Varsayılan işaretçi olayları haritasının bir alt kümesi olan anahtarlara sahip bir işaretçi dizisidir.
Mevcut Türleri $ dokunuş
Aşağıdakiler $ touch'ta bulunan türlerdir -
| Emlak | Tür | Açıklama |
|---|---|---|
| tip | dizi | Bu size olayın türünü söyleyecektir. Örneğin - touchmove, touchstart, touchend, touchcancel |
| zaman damgası | Tarih | Dokunmanın gerçekleştiği zaman damgası |
| süresi | int | Mevcut dokunma olayı ve dokunma başlangıcı arasındaki fark |
| startX | yüzer | Touchstart'ın X koordinatı |
| startY | yüzer | Touchstart'ın Y koordinatı |
| öncekiX | yüzer | Daha önce gerçekleşen touchstart veya touchmove'un X koordinatı |
| önceki | yüzer | Daha önce gerçekleşen touchstart veya touchmove'un Y koordinatı |
| x | yüzer | Dokunma olayının X koordinatı |
| y | yüzer | Dokunma olayının Y koordinatı |
| adım | yüzer | PrevX, prevY ve x, y noktaları arasındaki mesafe |
| stepX | yüzer | PrevX ve x noktaları arasındaki mesafe |
| stepY | yüzer | Önceki ve y noktaları arasındaki mesafe |
| hız | yüzer | Saniyede bir dokunma olayının piksel cinsinden hızı |
| ortalama hız | yüzer | Saniye başına touchstart olayının ortalama hızı |
| mesafe | yüzer | StartX, startY ve x, y noktaları arasındaki mesafe |
| mesafeX | yüzer | StartX ve x noktaları arasındaki mesafe |
| mesafeY | yüzer | StartY ve y noktaları arasındaki mesafe |
| Toplam | yüzer | Cihaz boyunca yapılan toplam hareket, yani yatay ve dikey hareket |
| toplamX | yüzer | Toplam hareket, yani yatay yön.Ayrıca, dönüşleri ve yön değişikliklerini de içerir. |
| toplamY | yüzer | Toplam hareket, yani dikey yön.Ayrıca geri dönüşleri ve yön değişikliklerini de içerir. |
| yön | yüzer | Dokunmanın sol, üst, alt, sağ yön konumu |
| açı | yüzer | X ve y ekseninden derece cinsinden açı |
İşte dokunma türlerini gösteren bir çalışma örneği.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
<style>
a.active {
color: blue;
}
</style>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>Var touchtest $ touch.bind yöntemini kullanan app.js'ye eklenen yönerge.
directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);App.js içindeki kodun tamamı aşağıdaki gibidir -
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});src/home/home.html
Yönerge touchtest html içinde aşağıda gösterildiği gibi kullanılır -
<div class="section touchtest">
<h4>Touch Around on the screen to see the values changing</h4>
<div>
<p>type: {{touch.type}}</p>
<p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
<p>point: [{{touch.x}}, {{touch.y}}]</p>
<p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
<p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
<p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
<p>velocity: {{touch.velocity}} px/sec</p>
<p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
<p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
</div>
</div>Şimdi tarayıcıda ekranı test edelim. Ortaya çıkan ekran aşağıdaki gibidir -
Bu bölümde, phonegap ve cordova kullanarak uygulamanın nasıl kurulacağını anlayacağız.
Önce aşağıdakileri sistemimize kuralım -
Cordova
Phonegap
Bu bölümde, Mobile Angular UI uygulamasının bir apk dosyasını oluşturacağız. Önceki bölümde cordova ve phonegap kullanılarak yapılan uygulama kurulumunu kullanacağız. Bu yüzden lütfen önceki bölüme bakınApp Setup using PhoneGap and Cordova halihazırda cordova, phonegap'i kurduk ve cordova'da Mobile Angular UI uygulamasını oluşturduk.
Şimdi oluşturulan uygulama için bir APK dosyası oluşturalım. Bunun için aşağıdakileri yüklememiz gerekiyor -
- Java Geliştirme Kiti (jdk 1.8)
- Gradle
- Android SDK Araçları
Java Geliştirme Kiti (jdk 1.8)
Uygulamayı oluşturmak ve inşa etmek için önemli bir gereksinim JDK 1.8'dir. Jdk'nin 1.8 versiyonuna ihtiyacımız var çünkü bu şimdiye kadar cordova build ile kararlı bir sürüm.
Jdk1.8'i yüklemek için aşağıdaki bağlantıya gidin.
Jdk'yi işletim sisteminize göre yükleyin. Kurulum tamamlandıktan sonra, JAVA_HOME ortam yolunu güncellemek gerekir. Jdk'nin kurulumunda zorluk yaşarsanız, buna bakın.Java installation tutorial.
Windows kullanıcılarının Ortam Yolunu güncellemesini sağlamak için, Bilgisayarım → özellikler → Gelişmiş Sistem Ayarları üzerine sağ tıklayın.
Aşağıda gösterildiği gibi ekranı gösterecektir -
Ortam Değişkenlerine tıklayın. Aşağıda gösterildiği gibi ekranı gösterecektir -
Yeni düğmesine tıklayın, aşağıda gösterildiği gibi bir ekran gösterecektir -
Değişken adı JAVA_HOME olacak ve Değişken değeri jdk 1.8'in bulunduğu yol olacaktır.
Bitirdikten sonra komut isteminizi kapatın ve tekrar açın. Şimdi java –version yazın, yüklediğiniz java sürümünü aşağıda gösterildiği gibi görüntülemelidir -
JAVA kurulumunu tamamladık.
Gradle
Şimdi uygulamayı oluşturmak için önemli gereksinimlerden biri olan gradle'ı yükleyin.
Gradle kurulum sayfasına gidin ve işletim sisteminize göre gradle'ın en son sürümünü yükleyin. Sisteminize indirin ve kurun. Kurulduktan sonra, Gradle yolunu ortam değişkenlerinde güncellemeniz gerekir. Kurulumda herhangi bir zorlukla karşılaşırsanız, bu aşamalı eğiticiye bakın .
Windows kullanıcılarının ortam değişkenini güncellemesi için, gradle konumunu aşağıda gösterildiği gibi Path değişkenine ekleyin -
Bittiğinde, açıksa komut istemini kapatın. Şimdi komut istemini açın ve yüklü gradle sürümünü kontrol edin.
Bu eğitim için Gradle 6.2.2 sürümünü yükledik.
Android SDK Araçları
Şimdi Android stüdyosunu sisteminize kurun. Android stüdyo ile birlikte Android sdk paketi de yüklenecek. Android SDK paketiyle daha çok ilgileniyoruz. SDK paketi, araçlara ve derleme araçlarına sahip olacak, aynısını cordova'nın derleme sırasında erişmesi için Ortam Değişkenlerine eklememiz gerekiyor. Herhangi bir zorlukla karşılaşmanız durumunda, Android Studio Kurulumu için bu eğiticiye bakın .
Windows kullanıcıları için android sdk yolunu bulun ve aşağıda gösterildiği gibi Değişken ANDROID _SDK_ROOT değişkenini ortam değişkenine ekleyin -
Şimdi örneğin araçları ve yapım araçları yolunu ekleyin -
C:\Users\AppData\Local\Android\Sdk\build-tools;C:\Users\AppData\Local\Android\Sdk\tools\bin;Aşağıda gösterildiği gibi sondaki yol değişkenine -
Tamamlandıktan sonra komut istemini kapatın ve tekrar açın.
Komut isteminizde sdkmanager "platform araçları" "platformlar; android-28" komutunu çalıştırın. İhtiyacımız olan android-28 hedef api'yi kuracak. Sdkmanager hakkında daha fazla ayrıntı için aşağıdaki bağlantıya bakın -
https://www.tutorialspoint.com/android/android_sdk_manager.htmÖnceki bölümde cordova ve phonegap kullanarak bir proje kurulumu oluşturmuştuk. Uygulama tarayıcıda böyle görünüyor -
Şimdi, cordova'nın uygulamayı oluşturmak için tüm ayrıntılara sahip olup olmadığını kontrol edelim. Bunu yapmak için aşağıdaki komutu kullanabiliriz - cordova gereksinimleri .
Uygulamayı Oluşturun
Uygulamayı cordova kullanarak oluşturmak için komut aşağıdaki gibidir -
cordova buildYukarıdaki komut, eklediğiniz tüm platformlar için uygulamayı oluşturacaktır.
Derleme platformunu çalıştırın, aşağıdaki komutu kullanabilirsiniz:
cordova build ios
cordova build androidSadece bir platform, yani android için ekledik, bu nedenle cordova build komutunu doğrudan kullanabiliriz.
Derleme başarılı olursa, aşağıdaki çıktıyı almalısınız -
Uygulama apk dosyasının konumunu görüntüler. Artık apk elimizde, ancak bir app-debug.apk olduğu için aynı şeyi yayınlayamayız. Google Play Store'da yayınlanabilecek bir sürüm apk'sine ihtiyacımız var.
Uygulama Sürümü
Uygulama sürümü oluşturmak için bir anahtar deposu oluşturmamız gerekir. Anahtar deposu, özel anahtarlara ve sertifikalara sahip bir dosyadır.
Bir anahtar deposu dosyası oluşturmak için JAVA keytool kullanılır. JAVA anahtar aracı, sertifika oluşturmaya yardımcı olan bir araçtır.
Aşağıda bir anahtar deposu oluşturma komutu verilmiştir -
keytool -genkey -v -keystore testapp-key.keystore
-alias testapp-key -keyalg RSA -keysize 2048 -validity 10000Kullandığımız anahtar deposunun adı aşağıdaki gibidir -
testapp-key.keystoreDiğer ad, adla aynı testapp-anahtarıdır.
Komutu proje kök klasöründen komut satırında yürütün.
Komut yürütüldüğünde size şifre, ad ve soyad, organizasyon birimi, şehir, eyalet vb. Gibi bazı sorular soracaktır. Bilgileri girebilirsiniz ve tamamlandığında anahtar deposu oluşturulacak ve anahtar deposu dosyası içinde saklanacaktır. proje kök klasörü.
Anahtar deposu tamamlandığında, myfirstapp \ testapp \latforms \ android \ build.json içinde bir build.json oluşturun.
Ayrıntılar aşağıda gösterildiği gibidir -
{
"android":{
"release":{
"keystore":"testapp-key.keystore",
"storePassword":"testapp123",
"alias":"testapp-key",
"password":"testapp123",
"keystoreType":""
}
}
}Anahtar deposu ayrıntılarını ve anahtar deposunu oluştururken girdiğiniz şifreyi girmeniz gerekecektir.
Keystore ve build.json tamamlandıktan sonra, artık sürüm için apk'yi oluşturmaya hazırız.
Bunu inşa etmek için komut aşağıdadır -
cordova build android --release
Derleme başarılı olduktan sonra, aşağıda gösterildiği gibi sürüm apk'sini alacaksınız -
Artık bu apk'yi Google Play Store'unuzda yayınlamak ve uygulamanızı yayınlamak için kullanabilirsiniz.
Google Oyun mağazası
App-release.apk hazır olduğunda, Google Play Store'a yüklemeniz gerekir. Yüklemek için Google Play Store'da oturum açmanız gerekir. İlk kez kullanıcı, geliştirici başlangıç fiyatı olarak 25 ABD doları ödemek zorundadır. Bu yapıldıktan sonra devam edebilir ve apk dosyanızı yükleyebilirsiniz. APK dosyanızı yüklemek için burada verilen adımları takip edebilirsiniz .
Bu bölümde, uygulama geliştirme için AngularJS ve Ionic kullanımını tartışacağız.
Ionic, mobil uygulamalar geliştirmek için kullanılan açık kaynaklı bir çerçevedir. Yerel görünüm ve his ile Mobil UI oluşturmak için araçlar ve hizmetler sağlar. Ionic framework, mobil cihazlarda çalışabilmek için yerel sarmalayıcıya ihtiyaç duyar.
Bu bölümde, uygulamanızı geliştirmek için iyonik ve mobil açısal kullanıcı arayüzünden nasıl yararlanabileceğimize dair temel bilgileri öğreneceğiz.
İyonik detaylar için bakınız - https://www.tutorialspoint.com/ionic/index.htm.
İonic ve angularjs ile çalışmaya başlamak için önce cordova'yı kurmamız gerekiyor. Komut aşağıdaki gibidir -
npm install -g cordovaCordova Kullanarak Proje Kurulumu Oluşturma
Bir ionic_mobileui / klasörü oluşturun ve bunun içinde aşağıdaki komutu kullanarak proje kurulumumuzu oluşturmamıza izin verin -
cordova create ionic-mobileui-angularjsBurada ionic-mobileui-angularjs, uygulamamızın adıdır.
Şimdi projemizde ihtiyacımız olan paketleri kuralım. Liste aşağıda verilmiştir -
npm install --save-dev angular angular-route mobile-angular-ui @ionic/coreDosyalar yüklenir ve klasör yapısı aşağıda gösterilmiştir -
Tüm açısal ve iyonik dosyalar node_modules içindedir. Kullanacağızwww/Klasör. Bu nedenle açısal ve iyonik js ve css dosyalarınıwww/css/ ve www/js/ klasörler.
İndex.html'yi mobil açısal UI bileşenleriyle değiştirelim ve ayrıca app.js içinde js/ Klasör.
index.html
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements.
See the NOTICE file distributed with this work for additional information regarding copyright
ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License. You may obtain a
copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
express or implied. See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/mobile-angular-ui.min.js"></script>
<script src="js/ionic.js"></script>
<link rel="stylesheet" href="css/app.css" />
<script src="js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content"> <div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a> <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>Hepsi js ve cssdosyalar head bölümüne eklenir. Modül ve denetleyici, aşağıda gösterildiği gibi app.js içinde oluşturulur -
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
// var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!";
});Www / klasöründe home / home.html dosyası oluşturun. Home.html içindeki ayrıntılar aşağıdadır.
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Uygulamayı cordova kullanarak çalıştırmak için aşağıdaki komutu uygulayın -
cordova platform add browserArdından, uygulamayı tarayıcıda test etmek için aşağıdaki komutu yürütün -
cordova run
URL'yi tıklayın: http://localhost:8000 Uygulamayı test etmek için tarayıcıda.
Mobil Angular UI Uygulamasına İyonik Bileşen Ekleme
Home / home.html dosyasını açın, aşağıdaki iyonik kart şablonunu ekleyin -
home / home.html
<ion-card>
<ion-card-header>
<ion-card-subtitle>Ionic Card</ion-card-subtitle>
<ion-card-title>Mobile Angular UI + Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
Welcome To TutorialsPoint!
</ion-card-content>
</ion-card>Bittiğinde, cordova'yı durdurun ve tekrar çalıştırın. İyonik kart ayrıntılarını aşağıda gösterildiği gibi görmelisiniz -
Artık AngularJs, Mobile Angular UI ve Ionic kullanarak istediğiniz bir uygulamayı oluşturabilirsiniz.
Bu bölümde, Mobile Angular UI kullanılarak oluşturulan uygulamanın bir örneğine bakacağız. Gerekli dosyalar, kod detayları ile aşağıda belirtilmiştir.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
</head>
<body ng-app="myFirstApp" ng-controller="MainController">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>App.js'de, burada bahsedilen tüm rotalar için ngroute'u oluşturacağız -
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>app.js
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/", { templateUrl : "src/home/home.html" });
$routeProvider.when("/academic", { templateUrl : "src/academic/academic.html" });
$routeProvider.when("/bigdata", { templateUrl : "src/bigdata/bigdata.html" });
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});Kenar çubuğundaki bağlantıların rotaları burada listelenmiştir -
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/", { templateUrl : "src/home/home.html" });
$routeProvider.when("/academic", { templateUrl : "src/academic/academic.html" });
$routeProvider.when("/bigdata", { templateUrl : "src/bigdata/bigdata.html" });
$locationProvider.html5Mode({enabled:true, requireBase:false});
});Şu anda ev, akademik ve büyük veriler için ekledik. Benzer şekilde, seçtiğiniz uygulamayı tasarlayabilir ve yukarıda gösterildiği gibi rotalar ekleyebilirsiniz.
Home / home.html aşağıdaki gibi olacaktır
<div class="scrollable ">
<div class="scrollable-content ">
<div class="list-group text-center">
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>
<div class="list-group-item list-group-item-home" style="background-color: #ccc;">
<div>
<h2 class="home-heading">List of Latest Courses</h2>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Information Technology</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Academics</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Development</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Business</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Design</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Others</h4>
</div>
</div>
</div>
</div>
</div>academic/academic.html
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group text-center">
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>
<div class="list-group-item list-group-item-home" style="background-color: #ccc;">
<div>
<h2 class="home-heading">Academic Tutorials</h2>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">CBSE Syllabus</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Accounting Basics</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Auditing</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Financial Accounting</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Forex Trading</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Statistics</h4>
</div>
</div>
</div>
</div>
</div>bigdata/bigdata.html
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group text-center">
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>
<div class="list-group-item list-group-item-home" style="background-color: #ccc;">
<div>
<h2 class="home-heading">Big Data Tutorials</h2>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Advanced Excel Charts</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Advanced Excel Functions</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Apache Flume</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Apache Kafka</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Apache Pig</h4>
</div>
</div>
<div class="list-group-item list-group-item-home list-tuts">
<div>
<h4 class="home-heading">Learn Apache Solr</h4>
</div>
</div>
</div>
</div>
</div>Tarayıcıdaki - Ana sayfa aşağıdaki gibidir -
Kullanıcı Öğreticilere tıkladığında tarayıcıdaki görüntü -
Şimdi Akademik Eğitimlere tıklayın -
Öğreticiler → Büyük Veri'ye tıklayın
