ما هو Angular JS؟

هذا المقال هو جزء من سلسلة  (جافا سكربت)، يمكنكم الإطلاع على أجزائها الأخرى لاستكمال الفهم عبر الروابط التالية: ما هي Vue.js و JavaScript ES6 و مكتبة Node.JS ، ما هي الـjQuery؟.

 

.

ما هو الأنجيولر Angular JS: هو عبارة عن إطار Frame Work مفتوح المصدر Open source من إنتاج شركة غوغل، وهو أحد أشهر الأطر المبنية على لغة جافا سكربت JavaScript.

 

ميزات الأنجيولر


ما يميز الأنجيولر سهولة مشاركة المعلومات بين المشهد "الموقع" وما يوجد في الكواليس، وذلك لأنها تتبع العديد من النماذج أو الأنماط في هندسة البرمجيات Software Engineering، وأهمها: Model–View–Controller و Model–View–Whatever وغيرها، مما يجعلها قادرة على رفع مستوى الأمان في صفحات الويب وكذلك ترتيب عملية تبادل المعلومات.

 

كمثال، نستطيع أن نرى نظم Model–View–Controller أو اختصاراً MVC، تفصل بين صفحة الويب التي تعرض المعلومات (View) ومخزن المعلومات (Model) باستخدام العقل المدبر أو المتحكم (Controller)، مما يجعل الأمر أسهل، حيث أن الفصل يقلل من كلفة التعديل ويزيد من نسبة الأمان.

 

مكتبة أنجيولر Angular js
مكتبة أنجيولر Angular js

 

تقسم الأنجيولر صفحات الويب (HTML Pages) إلى عدة أقسام من خلال حقن الأوسمة (Tags) ببعض المصطلحات الدلالية والتي تبدأ بالمقطع (ng). حتى يتم تفعيل الأنجيولر في صفحة ويب وربطه في نموذج أنجيولر، يجب أولاً تحديد منطقة العمل بـ (ng-app)، بحيث أن جميع الأوسمة التي تحقن بالأنجيولر داخل الوسام المحدد كنقطة عمل تصبح فعالة. (سيتم التوضيح بمثال لاحقاً).

 

نستطيع الوصول إلى المتغيرات أو الدالات الموجودة بالمتحكم أو استخدام العمليات الحسابية في الأنجيولر واستخدامها في صفحة الويب باستخدام إشارة الأقواس المضاعفة (double braces) {{}}، مثل:

{{30/3.14}}

 

عند تحديد المتحكم بالجزء المخصص له، يتم تمرير متغير مشترك بين هذا الجزء وهذا المتحكم ويسمى (scope $)، بحيث يستطيع التواصل مع صفحة الويب أو جزء منها بشكل سلس وبسيط، وهذا ما يسمى ربط المعلومات (data binding).

 

كون الأنجيولر تحتاج إلى متحكم، ويكون لكل صفحة متحكمات خاصة بها يتم تحديدها في مكانين، الأول وهو التوزيع (Routing) بحيث يشبك كل صفحة عند زيارتها مع المتحكم الخاص بها وكذلك تحديد الجزء المراد التحكم به من خلال حقن الوسام بسمات الأنجيولر (Angular Attributes)، والتي تربط بموجبها هذا الجزء مع المتحكم الخاص به باستخدام (ng-controller).

 

أما عن طريقة تواصل واجهة صفحة الويب مع المتحكم فتكون من خلال حقن الأوسمة بخاصية (ng-modal). تستطيع الأنجيولر إعطاء قيم أولية غير مهمة من خلال ng-init ويمتلك هذا الإطار خصائص تمكنه من أن يكون الأقوى مثل خاصية ng-repeat والتي تمكنك من تكرار وسام معين عدة مرات. مثال ذلك، لو أردت أن تعرض صور الطبيعة ولا تعلم كم من الصور تمتلك في قاعدة البيانات database، فيمكنك جعل الواجهة أكثر فعاليةً باستخدام هذه الخاصية وغيرها الكثير.

 

ما يجعل الأنجيولر إحدى الإطارات المهمة لدى المطورين كونها تستخدم في العديد من المجالات مثل برامج الهاتف المحمول، بغض النظر عن ماهية نظام الهاتف المحمول Cross Platform، وذلك كونها مستخدمة في أداة بناء هذه البرامج Ionic، عدا عن ذلك، فهي مستحسنة الاستخدام مع إطار النود Nodejs وذلك كونهما الأكثر تفاهماً وسهولة في الاتصال مع بعضهما البعض، وكذلك لرفع مستوى الأمان.

 

والجدير بالذكر أن إطار نود ما زال ضمن التطوير لوجود مشاكل في مستوى الأمان لديه، إلا أنه أحد أسهل الأطر التي تتعامل مع صفحات الويب التي تتضمن الإشعارات وغيرها بالزمن الحقيقي Real Time.

 

كما أوضحنا سابقاً، فإن إطار الأنجيولر يجب أن يبدأ بتحديد النموذج الذي يتبعه والذي يتم تعيينه في ng-app، في حال وجود أكثر من نموذج يجب تحديد اسم النموذج، كما في المثال التالي:

 

angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn AngularJS', done:true},
{text:'build an AngularJS app', done:false}];

todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};

todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};

todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});

 

 

<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>

من خلال الصور يتضح أنه بإمكانك إضافة أكثر من نموذج يتبعه أكثر من متحكم، كما ويمكنك إضافة أكثر من متحكم لنفس النموذج كالتالي:

 

 

var module = angular.module("nameOfModule",[]);

module.controller(...,function($scope){

//$scope can access any ng-modal inside html file .

})

 

يمكن من خلال هذا الموديول تحديد أشياء إضافية مثل الأنجيولر للتصميم Angular Material، وكذلك يمكن إضافة قاعدة بيانات Database، الذي يعتبر أسرع وأفضل قواعد البيانات تعاملاً مع إطار الأنجيولر FireBase وكذلك الموزع ngRoute وغيرها.

 

عملية توزيع صفحات الويب على المتحكمات تتم من خلال الموزع Router، ويتم إضافته من خلال دالة config للنموذج والتي يتم حقنها بمتغير مزود التوزيع الذي يمثل الموزع الرئيسي في الأنجيولر، وتتم على الشكل التالي:
 

config(function($routeProvider) {

. var resolveProjects = {
projects: function (Projects) {
return Projects.fetch();
}
};

$routeProvider
.when('/', {
controller:'ProjectListController as projectList',
templateUrl:'list.html',
resolve: resolveProjects
})
.when('/edit/:projectId', {
controller:'EditProjectController as editProject',
templateUrl:'detail.html',
resolve: resolveProjects
})
.when('/new', {
controller:'NewProjectController as editProject',
templateUrl:'detail.html',
resolve: resolveProjects
})
.otherwise({
redirectTo:'/'
});
})

 

الجدير بالذكر أن الأنجيولر مستخدمة بشكل خاص لدى غوغل في مسابقتها العالمية Hash Code وكذلك في Gmail ويوتيوب وغيرها، وكذلك تعد الأنجيولر أحد أشهر الأطر المستخدمة في مواقع الويب مثل: منصات العمل على الإنترنت مثل Freelancer و UpWork والمنصات التعليمية مثل Udemy.

 

المواقع التي تستخدم ANGUALR JS


هذه هي أهم المواقع التي تستخدم Angular js بالاعتماد على عدد نتائج Wappalyzer

  1.  upwork.com
  2.  rpm.newrelic.com
  3.  udemy.com
  4.  freelancer.com
  5.  youtube.com
  6.  angular.io
  7.  web.telegram.org
  8.  console.aws.amazon.com
  9.  ovh.com
  10.  projects.invisionapp.com

إمسح وإقرأ

المصادر

شارك

المساهمون


اترك تعليقاً () تعليقات