آموزش توسعه برنامه در برنامه نویسی انگولار

4 سال پیش

امتیاز دهید post

آموزش توسعه برنامه در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش توسعه برنامه در برنامه نویسی انگولار خواهیم پرداخت.

در این درس، ما در مورد استفاده از AngularJS و Ionic برای توسعه برنامه بحث خواهیم کرد.

Ionic یک چارچوب منبع باز است که برای توسعه برنامه های موبایل استفاده می شود. این ابزار و خدمات را برای ساخت UI موبایل با ظاهر و احساس بومی فراهم می کند. چارچوب یونی برای اینکه بتواند در دستگاه های تلفن همراه اجرا شود ، به لفافه بومی نیاز دارد.

در این درس، ما فقط اصول مربوط به چگونگی استفاده از UI زاویه ای یونی و متحرک را برای توسعه برنامه شما یاد خواهیم گرفت.

برای جزئیات مراجعه به لینک زیر مراجعه کنید

– https://www.tutorialspoint.com/ionic/index.htm.

برای شروع کار با یونی و angularjs ، ابتدا باید cordova را نصب کنیم. دستور به شرح زیر است –

npm install -g cordova

1	npm install -g cordova

ایجاد راه اندازی پروژه با استفاده از Cordova

یک پوشه ایجاد کنید ionic_mobileui / و در آن به ما اجازه دهید تنظیمات پروژه خود را با استفاده از دستور زیر ایجاد کنیم –

cordova create ionic-mobileui-angularjs

1	cordova create ionic-mobileui-angularjs

در اینجا ionic-mobileui-angularjs نام برنامه ما است.

اکنون اجازه دهید بسته های مورد نیاز پروژه خود را نصب کنیم. لیست زیر ارائه شده است –

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

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

پرونده ها نصب شده و ساختار پوشه در زیر نشان داده شده است –

Files Structure

تمام پرونده های زاویه ای و یونی درون node_modules هستند. ما قصد داریم از پوشه www / استفاده کنیم. از این رو فایلهای js و css زاویه ای و یونی را درون پوشه های www / css / و www / js / حرکت دهید.

اجازه دهید index.html را با م componentsلفه های UI گوشه ای تلفن همراه اصلاح کنیم و همچنین app.js را در پوشه js / اضافه کنیم.

index.html

&lt;!DOCTYPE html&gt; 
&lt;!-- 
   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. 
--&gt; 
&lt;html&gt; 

   &lt;head&gt; 
      &lt;!-- 
      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-&gt;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 
      --&gt; 
      &lt;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:;"&gt; 
      &lt;meta name="format-detection" content="telephone=no"&gt; 
      &lt;meta name="msapplication-tap-highlight" content="no"&gt; 
      &lt;meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"&gt; 
      &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt; 
      &lt;title&gt;Mobile Angular UI Demo&lt;/title&gt; 
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt; 
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /&gt; 
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="yes" /&gt; 
      &lt;link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /&gt;
      &lt;link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" /&gt; &lt;link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" /&gt; 
      &lt;link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" /&gt; 
      &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt; 
      &lt;script src="js/mobile-angular-ui.min.js"&gt;&lt;/script&gt; 
      &lt;script src="js/ionic.js"&gt;&lt;/script&gt; 
      &lt;link rel="stylesheet" href="css/app.css" /&gt; 
      &lt;script src="js/app.js"&gt;&lt;/script&gt; 
      &lt;/head&gt; 
      &lt;body ng-app="myFirstApp" ng-controller="MainController"&gt; 
         &lt;!-- Sidebars --&gt; 
            &lt;div class="sidebar sidebar-left"&gt; 
               &lt;div class="scrollable"&gt; 
                  &lt;h1 class="scrollable-header app-name"&gt;Tutorials&lt;/h1&gt; 
                  &lt;div class="scrollable-content"&gt; &lt;div class="list-group" ui-turn-off='uiSidebarLeft'&gt; 
                  &lt;a class="list-group-item" href="/"&gt;Home Page &lt;/a&gt; 
                  &lt;a class="list-group-item" href="#/academic"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Academic Tutorials &lt;/a&gt; 
                  &lt;a class="list-group-item" href="#/bigdata"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Big Data &amp; Analytics &lt;/a&gt; 
                  &lt;a class="list-group-item" href="#/computerProg"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Computer Programming &lt;/a&gt; 
                  &lt;a class="list-group-item" href="#/computerscience"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Computer Science &lt;/a&gt; 
                  &lt;a class="list-group-item" href="#/databases"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Databases &lt;/a&gt; &lt;a class="list-group-item" href="#/devops"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;DevOps &lt;/a&gt; 
               &lt;/div&gt; 
            &lt;/div&gt; 
         &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div class="sidebar sidebar-right"&gt; 
         &lt;div class="scrollable"&gt; 
            &lt;h1 class="scrollable-header app-name"&gt;eBooks&lt;/h1&gt;
               &lt;div class="scrollable-content"&gt; 
                  &lt;div class="list-group" ui-toggle="uiSidebarRight"&gt; 
                     &lt;a class="list-group-item" href="#/php"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;PHP &lt;/a&gt; 
                     &lt;a class="list-group-item" href="#/Javascript"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Javascript &lt;/a&gt; 
                  &lt;/div&gt; 
               &lt;/div&gt; 
            &lt;/div&gt; 
      &lt;/div&gt; 
      
      &lt;div class="app"&gt; 
         &lt;div class="navbar navbar-app navbar-absolute-top"&gt; 
            &lt;div class="navbar-brand navbar-brand-center" ui-yield-to="title"&gt; 
               TutorialsPoint 
            &lt;/div&gt; 
            &lt;div class="btn-group pull-left"&gt; 
               &lt;div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"&gt; 
                  &lt;i class="fa fa-th-large "&gt;&lt;/i&gt; Tutorials 
               &lt;/div&gt; 
            &lt;/div&gt; 
            &lt;div class="btn-group pull-right" ui-yield-to="navbarAction"&gt; 
               &lt;div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"&gt; 
                  &lt;i class="fal fa-search"&gt;&lt;/i&gt; eBooks 
               &lt;/div&gt; 
            &lt;/div&gt; 
         &lt;/div&gt; 
         &lt;div class="navbar navbar-app navbar-absolute-bottom"&gt; 
            &lt;div class="btn-group justified"&gt; 
               &lt;a ui-turn-on="aboutus_modal" class="btn btn-navbar"&gt;&lt;i class="fal fa-globe"&gt;&lt;/i&gt; About us&lt;/a&gt; 
               &lt;a ui-turn-on="contactus_overlay" class="btn btn-navbar"&gt;&lt;i class="fal fa-map-marker-alt"&gt;&lt;/i&gt; Contact us&lt;/a&gt; 
            &lt;/div&gt; 
         &lt;/div&gt;
         
         &lt;!-- App body --&gt; 
         &lt;div class='app-body'&gt; 
            &lt;div class='app-content'&gt; 
               &lt;ng-view&gt;&lt;/ng-view&gt; 
            &lt;/div&gt; 
         &lt;/div&gt; 
      &lt;/div&gt;&lt;!-- ~ .app --&gt;

      &lt;!-- Modals and Overlays --&gt; 
      &lt;div ui-yield-to="modals"&gt;&lt;/div&gt; 
      
      &lt;div class="app"&gt; 
         &lt;h1&gt;Apache Cordova&lt;/h1&gt; 
         &lt;div id="deviceready" class="blink"&gt; 
            &lt;p class="event listening"&gt;Connecting to Device&lt;/p&gt; 
            &lt;p class="event received"&gt;Device is Ready&lt;/p&gt; 
         &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt; 
   &lt;/body&gt; 
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!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

-->

<title>Mobile Angular UI Demo</title>

</head>

<h1 class="scrollable-header app-name">Tutorials</h1>

<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>

<h1 class="scrollable-header app-name">eBooks</h1>

<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>

</div>

TutorialsPoint

</div>

<i class="fa fa-th-large "></i> Tutorials

</div>

<i class="fal fa-search"></i> eBooks

</div>

<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>

<ng-view></ng-view>

</div>

</div>

<h1>Apache Cordova</h1>

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</body>

</html>

تمام پرونده های js و css در قسمت head اضافه می شوند. همانطور که در زیر نشان داده شده است ، ماژول و کنترل کننده در داخل 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!"; 
});

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

});

پرونده home / home.html را در پوشه www / ایجاد کنید. در زیر جزئیات داخل home.html آورده شده است.

&lt;div class = "list-group text-center"&gt;
&lt;div class = "list-group-item list-group-item-home"&gt;
&lt;h1&gt; {{msg}} &lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>

برای اجرای برنامه با استفاده از cordova ، دستور زیر را اجرا کنید –

cordova platform add browser

1	cordova platform add browser

بعد ، دستور زیر را برای آزمایش برنامه در مرورگر اجرا کنید –

cordova run

1	cordova run

Cordova Run

برای آزمایش برنامه ، آدرس url: http: // localhost: 8000 را در مرورگر بزنید.

افزودن کامپوننت آیونیک به برنامه Angular Mobile

home/home.html را باز کنید. ، الگوی کارت آیونیک زیر را اضافه کنید –

home / home.html

&lt;ion-card&gt; 
   &lt;ion-card-header&gt; 
      &lt;ion-card-subtitle&gt;Ionic Card&lt;/ion-card-subtitle&gt; 
      &lt;ion-card-title&gt;Mobile Angular UI + Ionic&lt;/ion-card-title&gt;
   &lt;/ion-card-header&gt;

   &lt;ion-card-content&gt; 
      Welcome To TutorialsPoint! 
   &lt;/ion-card-content&gt; 
&lt;/ion-card&gt;

<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>

پس از اتمام ، Cordova را متوقف کنید و دوباره اجرا کنید. شما باید جزئیات کارت یونی را همانطور که در زیر نشان داده شده است مشاهده کنید –

Card Details
بنابراین اکنون می توانید با استفاده از AngularJs ، Mobile Angular UI و Ionic برنامه ای به انتخاب خود ایجاد کنید.

منبع.

لیست جلسات قبل آموزش برنامه نویسی انگولار

امتیاز دهید post

برچسب ها : آموزش انگولار آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش توسعه برنامه در برنامه نویسی انگولار

آموزش توسعه برنامه در برنامه نویسی انگولار

ایجاد راه اندازی پروژه با استفاده از Cordova

index.html

افزودن کامپوننت آیونیک به برنامه Angular Mobile

home / home.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

بدون دیدگاه

آموزش توسعه برنامه در برنامه نویسی انگولار

ایجاد راه اندازی پروژه با استفاده از Cordova

index.html

افزودن کامپوننت آیونیک به برنامه Angular Mobile

home / home.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه