- Mobile Angular UI - Discussion
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Examples
- Mobile Angular UI - APP Development
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Touch Events
- Mobile Angular UI - Core Details
- Mobile Angular UI - Sections
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Forms
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Tabs
- Mobile Angular UI - Accordions
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Components
- Mobile Angular UI - Layouts
- Mobile Angular UI - My First App
- Mobile Angular UI - Project Setup
- Mobile Angular UI - Installation
- Mobile Angular UI - Overview
- Mobile Angular UI - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Mobile Angular UI - My First App
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 --> <pnk rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <!-- Mandatory CSS --> <pnk rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <!-- Required for desktop --> <pnk 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 --> <pnk rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <!-- Mandatory CSS --> <pnk rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <!-- Required for desktop --> <pnk 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 --> <span class="sidebar sidebar-left"><!-- ... --></span> <span class="sidebar sidebar-right"><!-- ... --></span> <span class="app"> <span class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></span> <span class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></span> <!-- App body --> <span class= app-body > <span class= app-content > <ng-view></ng-view> </span> </span> </span><!-- ~ .app --> <!-- Modals and Overlays --> <span ui-yield-to="modals"></span> </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 pst of modules −
angular.module( mobile-angular-ui , [ mobile-angular-ui.core.activeLinks , /* adds .active class to current pnks */ mobile-angular-ui.core.fastcpck , /* polyfills overflow: auto */ mobile-angular-ui.core.sharedState , /* SharedState service and directives */ mobile-angular-ui.core.outerCpck , /* outerCpck 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 −
<span class="pst-group text-center"> <span class="pst-group-item pst-group-item-home"> <h1>{{msg}}</h1> </span> </span>
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 −
<span class="pst-group text-center"> <span class="pst-group-item pst-group-item-home"> <h1>{{msg}}</h1> </span> </span>
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
![Run Command](/mobile_angular_ui/images/run_command.jpg)
Step 8
Load your app at http://localhost:3000 in the browser −
You will see the following screen in mobile mode −
![Mobile Mode](/mobile_angular_ui/images/mobile_mode.jpg)
You will see the following screen in Desktop mode −
![Desktop Mode](/mobile_angular_ui/images/desktop_mode.jpg)
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 −
![Display Mode](/mobile_angular_ui/images/display_mode.jpg)
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" /> <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /> <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <pnk 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 --> <span class="sidebar sidebar-left"><!-- ... --></span> <span class="sidebar sidebar-right"><!-- ... --></span> <span class="app"> <span class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></span> <span class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></span> <!-- App body --> <span class= app-body > <span class= app-content > <ng-view></ng-view> </span> </span> </span><!-- ~ .app --> <!-- Modals and Overlays --> <span ui-yield-to="modals"></span> </body> </html>
js/app.js
/* espnt 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
<span class="pst-group text-center"> <span class="pst-group-item pst-group-item-home"> <h1>{{msg}}</h1> </span> </span>Advertisements