Mobile Angular UI - APP Development-alljchome-开发者的教程家园

Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - APP Development

In this chapter, we will discuss the use of Using AngularJS and Ionic for app development.

Ionic is an open source framework used for developing mobile apppcations. It provides tools and services for building Mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices.

In this chapter, we will learn just the basics on how we can make use of ionic and mobile angular UI to develop your app.

For details of ionic refer −

To start working with ionic and angularjs, we need to first install cordova. The command is as follows −


npm install -g cordova

Creating Project Setup Using Cordova

Create a folder ionic_mobileui/ and in that let us create our project setup using the below command −


cordova create ionic-mobileui-angularjs

Here ionic-mobileui-angularjs is the name of our app.

Now let us install the packages that we need in our project. The pst is given below −


npm install --save-dev angular angular-route mobile-angular-ui @ionic/core

The files are installed and the folder structure is shown below −

All the angular and ionic files are inside node_modules. We are going to make use of www/ folder. Hence move the angular and ionic js and css files inside www/css/ and www/js/ folders.

Let us modify the index.html with mobile angular UI components and also add app.js in js/ folder.

index.html


<!DOCTYPE html> 
<!-- 
   Licensed to the Apache Software Foundation (ASF) under one or more contributor pcense agreements. 
   See the NOTICE file distributed with this work for additional information regarding copyright 
   ownership. The ASF pcenses this file to you under the Apache License, Version 2.0 (the 
   "License"); you may not use this file except in comppance with the License. You may obtain a 
   copy of the License at
   
   http://www.apache.org/pcenses/LICENSE-2.0
   
   Unless required by apppcable 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 impped. See the License for the specific language governing permissions and 
   pmitations under the License. 
--> 
<html> 

   <head> 
      <!-- 
      Customize this popcy to fit your own app s needs. For more guidance, see: 
         https://github.com/apache/cordova-plugin-whitepst/blob/master/README.md#content-security-popcy
      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 inpne scripts in order to mitigate risk of XSS vulnerabipties. To change this: 
            * Enable inpne JS: add  unsafe-inpne  to default-src 
      --> 
      <meta http-equiv="Content-Security-Popcy" content="default-src  self  data: gap: https://ssl.gstatic.com  unsafe-eval ; style-src  self   unsafe-inpne ; media-src *; img-src  self  data: content:;"> 
      <meta name="format-detection" content="telephone=no"> 
      <meta name="msapppcation-tap-highpght" content="no"> 
      <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"> 
      <pnk 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" /> 
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" /> <pnk rel="stylesheet" href="css/mobile-angular-ui-base.min.css" /> 
      <pnk 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> 
      <pnk rel="stylesheet" href="css/app.css" /> 
      <script src="js/app.js"></script> 
      </head> 
      <body ng-app="myFirstApp" ng-controller="MainController"> 
         <!-- Sidebars --> 
            <span class="sidebar sidebar-left"> 
               <span class="scrollable"> 
                  <h1 class="scrollable-header app-name">Tutorials</h1> 
                  <span class="scrollable-content"> <span class="pst-group" ui-turn-off= uiSidebarLeft > 
                  <a class="pst-group-item" href="/">Home Page </a> 
                  <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a> 
                  <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a> 
                  <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a> 
                  <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a> 
                  <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a> <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a> 
               </span> 
            </span> 
         </span> 
      </span> 
      <span class="sidebar sidebar-right"> 
         <span class="scrollable"> 
            <h1 class="scrollable-header app-name">eBooks</h1>
               <span class="scrollable-content"> 
                  <span class="pst-group" ui-toggle="uiSidebarRight"> 
                     <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a> 
                     <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a> 
                  </span> 
               </span> 
            </span> 
      </span> 
      
      <span class="app"> 
         <span class="navbar navbar-app navbar-absolute-top"> 
            <span class="navbar-brand navbar-brand-center" ui-yield-to="title"> 
               TutorialsPoint 
            </span> 
            <span class="btn-group pull-left"> 
               <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"> 
                  <i class="fa fa-th-large "></i> Tutorials 
               </span> 
            </span> 
            <span class="btn-group pull-right" ui-yield-to="navbarAction"> 
               <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"> 
                  <i class="fal fa-search"></i> eBooks 
               </span> 
            </span> 
         </span> 
         <span class="navbar navbar-app navbar-absolute-bottom"> 
            <span 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> 
            </span> 
         </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> 
      
      <span class="app"> 
         <h1>Apache Cordova</h1> 
         <span id="deviceready" class="bpnk"> 
            <p class="event pstening">Connecting to Device</p> 
            <p class="event received">Device is Ready</p> 
         </span> 
      </span> 
      <script type="text/javascript" src="cordova.js"></script> 
      <script type="text/javascript" src="js/index.js"></script> 
   </body> 
</html>

All the js and css files are added in the head section. The module and controller is created inside app.js as shown below −


/* 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 : "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!"; 
});

Create home/home.html file in www/ folder. Following are details inside home.html.


<span class="pst-group text-center"> 
   <span class="pst-group-item pst-group-item-home">
      <h1>{{msg}}</h1> 
   </span> 
</span>

To run the app using cordova, execute the following command −


cordova platform add browser

Next, execute the below command to test the app in the browser −


cordova run

Hit the url : http://localhost:8000 in the browser, to test the app.

Adding Ionic Component to Mobile Angular UI App

Open home/home.html, add the following ionic card template −

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>

Once done stop cordova run and run it again. You should see the ionic card details as shown below −

So now you can create an app of your choice by using AngularJs, Mobile Angular UI and Ionic.

Mobile Angular UI - APP Development

Creating Project Setup Using Cordova

Adding Ionic Component to Mobile Angular UI App

home/home.html

友情链接