Aug
13
Mobile Angular UI – Forms This chapter will focus on forms. Let us take a look at a working example to get a better understanding of forms. In index.html the code will be as follows − <!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> The src/app.js will have following details − /* 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!”); }; }); The display in browser is as follows − Enter the details in the form and click on the Save button. Learn online work project make money