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

saber

4 سال پیش

امتیاز دهید post

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

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

این درس به فرم ها تمرکز خواهد کرد. بیایید نگاهی به یک نمونه کار بیندازیم تا درک بهتری از فرم ها داشته باشیم.

در index.html کد به شرح زیر خواهد بود –

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8" /&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="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /&gt;
      &lt;link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /&gt;
      &lt;link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /&gt;
      &lt;script src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="src/css/app.css" /&gt;
      &lt;script src="src/js/app.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body ng-app="myFirstApp" ng-controller="MainController" class="listening"&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;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

In home/home.html

&lt;div class="scrollable"&gt;
   &lt;div class="scrollable-content section"&gt;

      &lt;form name="myform" role="form" ng-submit='myform.$valid &amp;&amp; addDetails()'&gt;
         &lt;fieldset&gt;
            &lt;legend&gt;Personal Details&lt;/legend&gt;
               &lt;div class="form-group has-success has-feedback"&gt;
                  &lt;label&gt;First Name&lt;/label&gt;
                  &lt;input type="text"
                     ng-model="fname"
                     class="form-control"
                     placeholder="Enter First Name" required&gt;
               &lt;/div&gt;
               &lt;div class="form-group has-success has-feedback"&gt;
                  &lt;label&gt;Last Name&lt;/label&gt;
                     &lt;input type="text"
                     ng-model="lname"
                     class="form-control"
                     placeholder="Enter Last Name" required&gt;
               &lt;/div&gt;
               &lt;div class="form-group has-success has-feedback"&gt;
                  &lt;label&gt;Email&lt;/label&gt;
                  &lt;input type="email"
                     ng-model="email"
                     class="form-control"
                     placeholder="Enter email" required&gt;
               &lt;/div&gt;
         &lt;/fieldset&gt;
         &lt;hr&gt;
         &lt;input class="btn btn-primary btn-block" type="submit" value="Save" /&gt;
      &lt;/form&gt;
   &lt;/div&gt;
&lt;/div&gt;

<legend>Personal Details</legend>

<label>First Name</label>

<input type="text"

ng-model="fname"

class="form-control"

placeholder="Enter First Name" required>

</div>

<input type="text"

ng-model="lname"

class="form-control"

placeholder="Enter Last Name" required>

</div>

<label>Email</label>

<input type="email"

ng-model="email"

class="form-control"

placeholder="Enter email" required>

</div>

</fieldset>

<hr>

</form>

</div>

src / 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',
   'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/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.addDetails=function() {
      alert("All details are saved!");
   };
});

/* 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',

'mobile-angular-ui.gestures'

]);

app.config(function($routeProvider, $locationProvider) {

$routeProvider

.when("/", {

templateUrl : "src/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.addDetails=function() {

alert("All details are saved!");

};

});

Browser

جزئیات را در فرم وارد کرده و بر روی دکمه ذخیره کلیک کنید.

Save Browser

منبع.

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

امتیاز دهید post

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

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

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

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

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

دیدگاه شما

بدون دیدگاه

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

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

دیدگاه شما

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

بدون دیدگاه