AngularUI Utils

ספריית UI Utils היא מדהימה שמאפשרת מגוון פתרונות לאפליקציות שמריצות Angular.

אז מה נותנת לנו ספריית ui-utils:

• input masking
• custom event handling
• custom formatting
• jQuery passthrough directives
• string inflector
• fragment inclusion based on selectors
• text highlighting
• ועוד הרבה..

Mask

ui-mask מאפשר לנו לתת mask לפי כללים ל input text.

שלב ראשון יש להכניס את קובץ ה mask.js בדף:

<script type="text/javascript" src="app/bower_components/angular-ui-utils/modules/mask/mask.js"></script>

בשלב השני נגדיר את ui-mask כתלות לאפליקציה שלנו:

angular.module('myApp', ['ui.mask'])

הכללים של ui-mask הם:

A – כל אות
9 – כל מספר
* – כל תו

לדוגמה Mask לכרטיס אשראי:

<input name="ccnum" ui-mask="9999 9999 9999 9999" ng-model="user.cc" placeholder="Credit card number" />

ui-event

כאשר אנו רוצים לטפל באירועים שאינם נתמכים באופן מקורי על ידי AngularJS (למשל, אם אנחנו רוצים שהמשתמש לוחץ לחיצה כפולה על אלמנט או להתמודד עם אירוע טשטוש), שהיינו צריך לכתוב מעטפת כלשהי לאירוע.

ui-event אנחנו יכולים להשתמש בו כדי לממש אירועים שהדפדפן יורה.

שלב ראשון יש להכניס את קובץ ה event.js בדף:

<script type="text/javascript" src="app/bower_components/angular-ui-utils/modules/event/event.js"></script>

בשלב השני נגדיר את ui-event כתלות לאפליקציה שלנו:

angular.module('myApp', ['ui.event'])

לדוגמה האירוע של דאבל קליק יפעיל את הפונקציה show():

<img src="/images/ui/ginger.png" ui-event="{dblclick:'show()'}" />

ui-format:

הספרייה מאפשרת לנו בדרכים שונות לעבוד עם מחרוזות.

שלב ראשון יש להכניס את קובץ ה format.js בדף:

<script type="text/javascript" src="app/bower_components/angular-ui-utils/modules/format/format.js"></script>

בשלב השני נגדיר את ui-mask כתלות לאפליקציה שלנו:

angular.module('myApp', ['ui.format'])

לדוגמה יש לנו את ה Controller הבא:

.controller('FormatController', ['$scope', function($scope) {
  $scope.person = {
    name: 'Daniel',
    email: 'danielts86@gmail.com'
  }
}]);

ובדף נכתוב:

{{ "Hello :name. Your email is :email" | format: person }}

התוצאה תהיה:

Hello Daniel. Your email is danielts86@gmail.com

Goggle Maps:

Ui Utils מאפשרת לנו לעבוד עם Google Maps בצורה מאוד נוחה בכך שהיא נותנת לנו directive מוכנים.

שלב ראשון יש להכניס את קובץ ה map.js בדף:

<script type="text/javascript" src="app/bower_components/angular-ui-map/src/map.js"></script>

בשלב השני נגדיר את ui-map כתלות לאפליקציה שלנו:

angular.module('myApp', ['ui.map'])

בשלב שלישי נטען את Goggle Maps Api:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>

בתוך הטעינה של ה Api נתנו פונקציית callback שתתרחש כאשר ה Api סיים להיטען. בתוך הפונקציה הזאת נגדיר את ה bootstrap ל app:

function onGoogleReady() {
  angular.bootstrap(document.getElementById("mapApp"), ['appMap']);
}

בשלב זה אנחנו בטוחים של ה Api נטען לפני שהאפליקציה של פועלת.

נמקם את ה div שיכיל את המפה:

<section id="mapApp" ng-controller="MapController">
  <div ui-map="myMap" 
        ui-options="mapOptions" 
        class="map-canvas"></div>
</section>

כך יראה ה Controller שלנו לדוגמה:

angular.module('appMap', ['ui.map'])
  .controller('MapCtrl', ['$scope', function ($scope) {
  $scope.mapOptions = {
    center: new google.maps.LatLng(37.7833, -122.4167),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  };
  $scope.mapTypes = [
    google.maps.MapTypeId.ROADMAP,
    google.maps.MapTypeId.SATELLITE,
    google.maps.MapTypeId.HYBRID,
    google.maps.MapTypeId.TERRAIN
  ]
  $scope.$watch('mapOptions.zoom', function(n) {
    if (n) {
      $scope.myMap.setOptions($scope.mapOptions);
    }
  });
  $scope.$watch('mapOptions.mapTypeId', function(n) {
    if (n) {
      $scope.myMap.setOptions($scope.mapOptions);
    }
  })
}]);

יש עוד מגוון רחב של כלים אותם ניתן למצוא בדף הבית של Ui Utils

‹ Angular New Router – ngNewRouter

Angular – Code Standards ›

עם התגית: Angular, Angular UI, Goggle Maps Api, Input Mask, String Formats
פורסם ב-Angular, AngularUi, Goggle Maps Api, Input Mask, String Formats