Mobile Angular UI – Layouts

Mobile Angular UI – Layouts ”; Previous Next In this chapter, we will understand the basic layout display available in Mobile Angular UI. The structure of basic layout is as follows <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> The screen of your mobile or desktop is divided into sections. Sidebar The body section starts with sidebar div containers, one for left side and the next one for the right side − <!– Sidebars –> <div class=”sidebar sidebar-left”><!– … –></div> <div class=”sidebar sidebar-right”><!– … –></div> A sidebar helps well to utilize the space efficiently specially on mobile and that makes the UI very interactive and neat. By sidebar, the windows open from the left side and right side. Navbars The next section is the navbars. Following are the div containers for navbars to be shown − <div class=”navbar navbar-app navbar-absolute-top”><!– Top Navbar –></div> <div class=”navbar navbar-app navbar-absolute-bottom”><!– Bottom Navbar –></div> They are shown at the top and at the bottom. App Body Section This section is the main place where your contents are displayed for the user to interact or read. <div class=”app-body”> <div class=”app-content”> <ng-view></ng-view> </div> </div> It makes use of <ng-view></ng-view> directive that will get replaced with actual contents based on user interaction on the UI. AngularJS NgRoute is used here to replace the views. Modals and Overlays The last section is the modals and overlays section. The div container to show modals and overlays are as follows − <!– Modals and Overlays –> <div ui-yield-to=”modals”></div> Print Page Previous Next Advertisements ”;

Mobile Angular UI – Dropdowns

Mobile Angular UI – Dropdowns ”; Previous Next To work with dropdowns in mobile angular ui, you need to make use of class .dropdown-menu. Here is an example that displays dropdown. We will add the changes in 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> We are having a list of Tutorials shown in the dropdown. The output on the screen is as follows − Print Page Previous Next Advertisements ”;

Mobile Angular UI – My First App

Mobile Angular UI – My First App ”; Previous Next In this chapter, we will create our first app that will run on mobile as well as on desktop. The project setup we created in previous chapter has the following structure − uiformobile/ node_modules/ src/ package.json index.html Follow the steps to build a simple UI using Mobile Angular UI. Step 1 Add following css files in the html head section as shown below − <!– 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” /> Next add the js files − <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> The index.html file will look as follows − <!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> Step 2 We will see the basic layout of the mobile angular UI as below − <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> Step 3 Create a js/ folder in src/ and add app.js to it. Define the module and add Mobile angular UI and Angular Route as dependency as shown below − <script type=”text/javascript”> ”ngRoute”, angular.module(”myFirstApp”, [ ”mobile-angular-ui” ]); </script> Add ng-app=”myFirstApp” to the <body> tag − <body ng-app=”myFirstApp”> The mobile-angular-ui module has the following list of modules − 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 */ ]); The mobile-angular-ui.min.js, has all the above core and components modules in it. You can also load the required components as per your requirement instead of loading the entire mobile-angular-ui.min.js. Step 4 Add controller to your body tag as shown below − <body ng-app=”myFirstApp” ng-controller=”MainController”> Step 5 In the basic layout, we have added <ng-view></ng-view>, that will load the views for us. Let us define the routes in app.js using ngRoute. The files that are required for routing are already added in the head section. Create a folder home/ in src/. Add home.html to it with the following details − <div class=”list-group text-center”> <div class=”list-group-item list-group-item-home”> <h1>{{msg}}</h1> </div> </div> Now when we start the app, by default, we want home.html to be displayed inside <ng-view></ng-view>. The routing is configured inside app.config() as shown below − app.config(function($routeProvider, $locationProvider) { $routeProvider .when(“/”, { templateUrl : “src/home/home.html” }); $locationProvider.html5Mode({enabled:true, requireBase:false}); }); Step 6 We have added {{msg}} inside home.html as shown below − <div class=”list-group text-center”> <div class=”list-group-item list-group-item-home”> <h1>{{msg}}</h1> </div> </div> Let us define the same in the controller as shown below − app.controller(”MainController”, function($rootScope, $scope, $routeParams) { $scope.msg=”Welcome to Tutorialspoint!” }); Step 7 Now run the command to start the app using the below command − node server.js Step 8 Load your app at http://localhost:3000 in the browser − You will see the following screen in mobile mode − You will see the following screen in Desktop mode − Let us understand the details of each component in Mobile Angular UI in the next chapters. Here is the final code for the above display. The folder structure so far is as follows − 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> Print Page Previous Next Advertisements ”;

Mobile Angular UI – Accordions

Mobile Angular UI – Accordions ”; Previous Next Accordions are mostly used when the content is supposed to be in section type of view and any one section is visible at a time. You can hide and open the next section to view the contents in it. Let us work on an example to see the working of an Accordion in Mobile Angular UI. 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!”; }); The accordion template is added inside src/home/home.html. <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> Following is the display in the browser − Print Page Previous Next Advertisements ”;

Mobile Angular UI – Installation

Mobile Angular UI – Installation ”; Previous Next In this chapter, we will install Mobile Angular UI, so that we can use it in our project. There are two ways to install Mobile Angular UI − Download from Github Using Npm Download from Github Go to the following github link − https://github.com/mcasimir/mobile-angular-ui/releases and you can download the latest angular mobile UI. The github link for mobile angular ui is as follows Click on the Clone or download button (highlighted in blue) and it shows you the GitHub link (highlighted in orange) that can be cloned and a Download ZIP (highlighted in black) wherein you can download the full code of Angular Mobile UI. To clone the GitHub link you need to install git. Make sure you have git installed on your system if you don’t have to follow this link to install GIT. First will clone the github link − https://github.com/mcasimir/mobile-angular-ui.git. To get the mobile angular UI files − cd mobile-angular-ui/src/js. The files that you need are present as shown above. Using Npm Using npm is the easiest way to install. Make sure you have nodejs and npm installed. If not, follow this link to install nodejs on your system. Open your command prompt and create a directory called uiformobile/. Go inside the uiformobile/ using cd command. Now execute the following command − npm init The command npm init will initialize the project − It will create package.json as shown below − { “name”: “uiformobile”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1″ }, “author”: “”, “license”: “ISC” } Now run the following command to install mobile angular UI. npm install –save mobile-angular-ui You are done with installing the mobile angular UI, let us now see how to make use of it to create a mobile app. Print Page Previous Next Advertisements ”;