معرفی
این مقاله نحوه ایجاد یک دستورالعمل سفارشی و استفاده از آن را در پروژه خود در js زاویه ای نشان می دهد. این آموزش برای مبتدیان / تازه واردها یا دانش آموزان است. همچنین استفاده از عملیات دستوری را در کدنویسی یک صفحه توضیح می دهد. امیدوارم استفاده از دستورالعمل سفارشی در برنامه برای شما مفید باشد. دستورالعمل بخش کوچکی از عنصر DOM است که می توانیم در صفحه طراحی خود استفاده کنیم. کامپایلر HTML از دستورالعمل و تبدیل عناصر کوچک در صفحه ما در کودکی استفاده می کند. بسیاری از عناصر دستورالعمل از پیش ساخته شده در Angular js وجود دارد، مانند ng-app، ng-controller، ng-init، ng-model، ng-bind و غیره.
Angular JS Code Points
- ng-app - این دستورالعمل برای بوت استرپ برنامه استفاده می شود. به طور معمول، در یک عنصر سطح بالا مانند HTML یا تگ بدن قرار داده می شود.
- ng-controller - جزء اصلی AngularJS است که هر دو حالت و منطق را در خود دارد. به عنوان پلی بین خدمات و نماها عمل می کند.
- $scope - داده ها و نماها را فراهم می کند و پیوند می دهد. تمام داده های مورد نیاز برای نماها و استفاده در قالب HTML را در خود نگه می دارد.
- {{expression}} - به این اصطلاح گفته می شود و کدهای جاوا اسکریپت مانند را می توان در داخل آن نوشت. این باید برای عملیات عمدتا کوچک در یک صفحه HTML استفاده شود.
- ng-init -این دستورالعمل راهی برای مقداردهی اولیه یک متغیر در صفحه در اختیار ما قرار می دهد.
- ng-repeat - در واقع عنصری را که روی آن استفاده شده است، بر اساس لیست دادههای ارائه شده، تکرار میکند.
نمونه اسکرین شات
بخش 1
بخش 1 نمای کوتاهی از قسمت کد را نشان می دهد. ما یک ویژگی ng-app myApp را به تگ HTML اضافه می کنیم و در قسمت بدن ما ng-controller myDirtveCtrl را اضافه می کنیم. هر دو ng-app و ng-controller دو بخش اصلی Angular js هستند. یکی دیگر از تگهای هدر ما angular.min.js و پیوند bootstrap.min.css را برای اجرای عملکردهای angular js و طراحی CSS اضافه میکنیم. در HTML با استفاده از تابع angular.module کدی را برای دریافت یک برنامه Angular اضافه می کنیم تا بتوانیم با استفاده از تابع ()appName.controller به کنترلر دسترسی پیدا کنیم.
<html ng-app="myApp">
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<title>AngularJS Custom Directives</title>
<style type="text/css">
<!-- style in source code section-->
</style>
<script>
// script code below or available in source code.
</script>
</head>
<body ng-controller="myDirtveCtrl">
</body>
</html>