मोबाइल कोणीय यूआई - एपीपी विकास
इस अध्याय में, हम एप्लिकेशन विकास के लिए AngularJS और Ionic का उपयोग करने के उपयोग के बारे में चर्चा करेंगे।
आयनिक एक खुला स्रोत ढांचा है जिसका उपयोग मोबाइल अनुप्रयोगों के विकास के लिए किया जाता है। यह देशी रूप और अनुभव के साथ मोबाइल यूआई के निर्माण के लिए उपकरण और सेवाएं प्रदान करता है। मोबाइल उपकरणों पर चलने में सक्षम होने के लिए आयोनिक ढांचे को देशी आवरण की आवश्यकता होती है।
इस अध्याय में, हम आपके ऐप को विकसित करने के लिए आयनिक और मोबाइल कोणीय यूआई का उपयोग कैसे कर सकते हैं, इसके बारे में सिर्फ मूल बातें जानेंगे।
आयनिक संदर्भ के विवरण के लिए - https://www.tutorialspoint.com/ionic/index.htm.
आयनिक और कोणीयज के साथ काम करना शुरू करने के लिए, हमें पहले कॉर्डोवा को स्थापित करना होगा। कमांड इस प्रकार है -
npm install -g cordovaकॉर्डोवा का उपयोग करके प्रोजेक्ट सेटअप बनाना
एक फ़ोल्डर बनाएं आयनिक_मोबाइल / और उसमें हम नीचे दिए गए कमांड का उपयोग करके अपना प्रोजेक्ट सेटअप बनाते हैं -
cordova create ionic-mobileui-angularjsयहाँ आयनिक-मोबाइलुइ-कोणीयारस हमारे ऐप का नाम है।
अब हम अपने प्रोजेक्ट में उन पैकेजों को स्थापित करते हैं जिनकी हमें आवश्यकता है। सूची नीचे दी गई है -
npm install --save-dev angular angular-route mobile-angular-ui @ionic/coreफ़ाइलें स्थापित हैं और फ़ोल्डर संरचना नीचे दी गई है -
सभी कोणीय और आयनिक फाइलें नोड_मॉड्यूल्स के अंदर हैं। हम उपयोग करने जा रहे हैंwww/फ़ोल्डर। इसलिए कोणीय और आयनिक जेएस और सीएसएस फ़ाइलों को अंदर ले जाएंwww/css/ तथा www/js/ फ़ोल्डरों।
आइए हम index.html को मोबाइल कोणीय UI घटकों के साथ संशोधित करें और जोड़ें app.js में js/ फ़ोल्डर।
index.html
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements.
See the NOTICE file distributed with this work for additional information regarding copyright
ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License. You may obtain a
copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable 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 implied. See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
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 inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link 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" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" />
<link 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>
<link rel="stylesheet" href="css/app.css" />
<script 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>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>सब js तथा cssफ़ाइलें सिर अनुभाग में जोड़ी जाती हैं। मॉड्यूल और नियंत्रक नीचे दिखाए गए अनुसार 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 : "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!";
});Www / फ़ोल्डर में घर / home.html फ़ाइल बनाएँ। Home.html के अंदर विवरण दिए गए हैं।
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>कॉर्डोवा का उपयोग करके ऐप चलाने के लिए, निम्नलिखित कमांड निष्पादित करें -
cordova platform add browserअगला, ब्राउज़र में ऐप का परीक्षण करने के लिए नीचे दिए गए कमांड को निष्पादित करें -
cordova run
यूआरएल मारो: http://localhost:8000 ब्राउज़र में, एप्लिकेशन का परीक्षण करने के लिए।
मोबाइल कोणीय यूआई ऐप में आयनिक घटक जोड़ना
खुला घर / home.html, निम्नलिखित आयनिक कार्ड टेम्पलेट जोड़ें -
घर / 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>एक बार स्टॉप कॉर्डोवा चलाने और इसे फिर से चलाने के लिए। आपको नीचे दिए गए अनुसार आयनिक कार्ड का विवरण देखना चाहिए -
तो अब आप AngularJs, Mobile Angular UI और Ionic का उपयोग करके अपनी पसंद का ऐप बना सकते हैं।