UI-Bootstrap – Tutorial AngularJS Crashkurs

  • Ist ein frei erhältliches Framework auf der Basis von HTML5 und CSS 3
  • Enthält basierend auf HTML und CSS Vorlagen für:
    • Buttons
    • Formulare
    • Fortschrittsbalken
    • Grids
    • Horizontale und vertikale Reiter
    • Navigationselemente wie Brotkrümmelnavigation, Paginierung
    • Tabellen
    • und weitere Oberflächengestaltungselemente
  • Des weiteren gibt es sogar JavaScript-Erweiterungen die eingebunden werden können
  • Die JavaScript-Komponenten basieren auf dem Framework jQuery
  • Für das Responsive Webdesign eignet sich Bootstrap hervorragend

index.html

<!DOCTYPE html>
<html>
<link rel=„stylesheet“ href=„node_modules/bootstrap/dist/css/bootstrap.css“>
<script src=„lib/angular.js“></script>
<script src=„lib/angular/angular.min.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>UI-Bootstrap</title>
</head>
<!–Beispiele sind entnommen von: http://getbootstrap.com/components/ –>
<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<button type=„button“ class=„btn btn-default“ aria-label=„Left Align“>
<span class=„glyphicon glyphicon-align-left“ aria-hidden=„true“></span>
</button>

<button type=„button“ class=„btn btn-default btn-lg“>
<span class=„glyphicon glyphicon-star“ aria-hidden=„true“></span> Star
</button>

<br>

<div class=„btn-group“ role=„group“ aria-label=„…“>
<button type=„button“ class=„btn btn-default“>Left</button>
<button type=„button“ class=„btn btn-default“>Middle</button>
<button type=„button“ class=„btn btn-default“>Right</button>
</div>

<br>

<div class=„btn-group“ role=„group“ aria-label=„…“>
<button type=„button“ class=„btn btn-default“>1</button>
<button type=„button“ class=„btn btn-default“>2</button>

<div class=„btn-group“ role=„group“>
<button type=„button“ class=„btn btn-default dropdown-toggle“ data-toggle=„dropdown“ aria-haspopup=„true“ aria-expanded=„false“>
Dropdown
<span class=„caret“></span>
</button>
<ul class=„dropdown-menu“>
<li><a href=„#“>Dropdown link</a></li>
<li><a href=„#“>Dropdown link</a></li>
</ul>
</div>
</div>
</div>

</body>

</html>

Ionic – Tutorial AngularJS Crashkurs

  • Ermöglicht das Erstellen von mobilen Web-App auf der Basis von HTML5
  • Ionic hat sich auf die Benutzerschnittstellen spezialisiert und fördert vor allem die intuitive Bedienung
  • Speziell AngularJS eignet sich hervorragend um Ionic anzuwenden. Die Aufteilung erfolgt in der AngularJS Struktur die App erstellt während Ionic für das Look&Feel zuständig ist
  • Die Custom Directives/Components mit schon vorgefertigten Direktiven wie ion-list vereinfachen das Handling von Web-Apps die bei Bedarf auch erweitert werden können
  • Ionic bietet Pre-build Style Components die wie Vorlagen eingesetzt werden können und damit den Aufwand der Erstellung vereinfachen
  • Zudem kann auch Apache Cordova platform hinzugezogen werden. Auch als PhoneGap bekannt
  • Sass ist ein weitere Library welches CSS erweitert und von Ionic verwendet wird
  • Last but not least können auch Werkzeuge wie Gulp zum Einsatz kommen um damit Workflows zu automatisieren
  • Hand in Hand kann auch Node.js eingesetzt werden um Installationen zu vereinfachen
  • In diesem Zusammenhang kann Git als Version-Control-System und Bower als Package-Manager für das Web verwendet werden

Cards.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<meta name=„viewport“ content=„initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width“>
<title>Cards</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-content>
<div class=„card“>

<div class=„item item-divider“>
Header
</div>

<div class=„item item-image item-body“>
<img src=„http://placehold.it/600×200“ alt=„Item Img“>
<p>Lorem ipsum dolor</p>
</div>

<div class=„item item-icon-left item-text-wrap“>
<i class=„icon ion-home“></i>
Lorem ipsum dolor
</div>

<div class=„item item-divider“>
Footer
</div>
</div>
</ion-content>

</body>
</html>

Forms.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<meta name=„viewport“ content=„initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width“>
<title>Forms</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-content>

<div class=„list“>
<label class=„item item-input“>
<span class=„input-label“>Page:</span>
<input type=„text“ placeholder=„www.easeflow.net“>
</label>

<label class=„item item-input item-stacked-label“>
<span class=„input-label“>Page2:</span>
<input type=„text“ placeholder=„www.tiptopplaces.net“>
</label>
</div>

</ion-content>

</body>
</html>

List.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>List</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>

<ion-content>
<ul class=„list“>
<li class=item>Item 1</li>
<li class=item>Item 2</li>
<li class=item>Item 3</li>
</ul>

<div class=„list“>
<a href=„#“ class=item item-icon-left“><i class=„icon ion-email“></i> Mail</a>
<a href=„#“ class=item>Item 2</a>
<div class=item item-divider“>Headline</div>
<a href=„#“ class=item>Item 3</a>
</div>

</ion-content>
</body>
</html>

Simple.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>Simple</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>

<ion-pane>
<ion-header-bar class=„bar-positive“>
<button class=„icon ion-navicon button button-clear“>Navicon</button>
<h1 class=„title“>Header</h1>
<button class=„icon ion-gear-a button button-clear“>Gear</button>
</ion-header-bar>
<div class=„bar bar-subheader“>
<h2>Sub Header</h2>
</div>

<ion-content class=„padding has-subheader“ >
Lorem ipsum dolor

<button class=„button“>Button</button>
<button class=„button button-block“>Button Block</button>
<button class=„button button-small“>Button Small</button>
<button class=„button button-large“>Button Large</button>
<button class=„button button-positive“>Button Positive</button>        <button class=„button button-block“>Button Block</button>
<button class=„button button-outline button-positive“>Button Outline</button>
<button class=„button button-clear“>Button Clear</button>

<div class=„button-bar“>
<button class=„icon icon-left ion-social-twitter button button-positive“>Twitter</button>
<button class=„icon icon-right ion-social-facebook button button-positive“>Facebook</button>
<button class=„icon icon-left ion-social-youtube button button-positive“>Youtube</button>
</div>

<a href=„#“ class=„button“>Button with href</a>

<p>
<button><i class=„icon icon-right ion-ionic button button-positive“></i>ionic</button>
</p>
</ion-content>

<ion-footer-bar class=„bar-positive“>
<h1 class=„title“>Footer</h1>
</ion-footer-bar>
</ion-pane>
</body>
</html>

Tabs.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>Tabs</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-pane>

<ion-tabs class=„tab tabs-positive tabs-icon-top“>
<ion-tab badge=„1“ badge-style=„badge-assertive“ icon=„icon-home“ title=„Home“></ion-tab>
<ion-tab icon=„icon-person“ title=„About“></ion-tab>
<ion-tab icon=„icon-calendar“ title=„Calendar“></ion-tab>
</ion-tabs>

<div class=„tabs-striped tabs-background-calm tabs-color-light tabs-calm tabs-top“>
<div class=„tabs tabs-icon-top“>
<a class=tab-item><i class=„icon ion-home“></i>Home</a>
<a class=tab-item><i class=„icon ion-person“></i>About</a>
<a class=tab-item><i class=„icon ion-calendar“></i>Calendar</a>
</div>
</div>

<div class=„tabs tabs-positive tabs-icon-top“>
<a class=tab-item><i class=„icon ion-home“></i>Home.</a>
<a class=tab-item><i class=„icon ion-person“></i>About</a>
<a class=tab-item><i class=„icon ion-calendar“></i>Calendar</a>
</div>
</ion-pane>
</body>
</html>