آشنایی با دایرکتیو ngClock در AngularJs

در این مقاله قصد داریم شما را با دایرکتیو ngClock در AngularJS آشنا کنیم ، دایرکتیو ngClock جهت جلو گیری از نمایش کد های کامپایل نشده هنگام لود شدن صفحه را در قالب html استفاده می شود .

آشنایی با دایرکتیو ngClock در AngularJs

به طور عمده این دایرکتیو جزئیات ناخوش آیند را زمان کامپایل شدن قالب html را حذف می کند به عبارت دیگر زمانی که بر روی پروژه های بزرگ کار می کنیم ، گاهی اوقات زمانی که صفحه بارگذاری می شود با {{}} مواجه می شویم و این دستور از این مشکل جلوگیری می کند .

به طور کلی این دستور در عنصر body در صفحه html اعمال می شود اما این روش اصلی نیست . بکار بردن چند دایرکتیو ngClock برای قسمت کوچکی از صفحه html ، پیشرفت عرضه صفحه در مرورگر را نمایش میدهد.

ng\:cloak

ng-cloak

ng-cloak

x-ng-cloak

x-ng-cloak

data-ng-cloak

عنصر های html که با ngClock نشانه گذاری شده اند، زمانی که فایل css لود شود پنهان می شوند .

مثال :

در زیر مثال های که از دایرکتیو Cloak استفاده نکرده اند زمانی که صفحه بارگذاری شود با {{TestData}} مواجه می شوند . پس از چند ثانیه fail را مشاهده می کنید یا اگر کد شما به درستی کار کند Success را به شما نمایش می هد .

HTML ,Controller

1. <!DOCTYPE html>  
2. <html>  
3.   
4. <head>  
5.     <title>ngClock directive in AngularJS</title>  
6.     <script src="angular.js"></script>  
7. </head>  
8.   
9. <body ng-app="app">  
10.     <h4>ngClock Example</h4>  
11.     <div ng-controller="HomeController"> {{TestData}} </div>  
12.     <script>  
13.     var app = angular.module("app", []);  
14.     app.controller("HomeController", function($scope, $http)  
15.     {  
16.         $scope.init = function()  
17.         {  
18.             $http.get("dummy URL").then(function(result)  
19.             {  
20.                 $scope.TestData = "Success";  
21.             }, function(error)  
22.             {  
23.                 $scope.TestData = "Fail";  
24.             });  
25.         }  
26.         $scope.init();  
27.     });  
28.     </script>  
29. </body>  
30.   
31. </html>  

خروجی

AngularJs دایرکتیو ngCloak را که  عنصر های HTML  را پنهان می کند زمانی که صفحه در مراحل ابتدایی بارگذاری است فراهم می کند .

ساختار

<ANY ELEMENT ng-cloak>

...

</ANY ELEMENT>

مثال

1. <div ng-controller="HomeController" ng-cloak>   
2. </div>  

مشکل دایرکتیو ngCloak

ngCloak زمانی محتوای کامپایل نشده را پنهان می کند که  AngularJs داده ها را در قالب HTML  کنترل کند  .  

درصفحه های بزرگ HTML ، جزئیات نا خوش آیند نمایش داده می شوند چون AngularJs نمی تواند ngClock هایی که کار نمی کنند را پیدا کند .

 

میتوان با استفاده از روش های زیر مشکلات را برطرف کنید :

 1.اجتناب  از دایرکتیو ngInclude برای بارگذاری محتوای کوچک

دایرکتیو  ngInclude برای پشتیبانی قالب های کوچک استفاده می شود و در بارگذاری صفحه وقفه ایجاد می کند . این  عمل به ما کمک می کند تا بسیاری از قالب ها Html خود را از صفحه اصلی حذف کنیم و AngularJs محتوای پنهان را کنترل می کند .

2.اجتناب از استفاده عبارت روی markup page

در این موضوع عبارت اصلی را با استفاده از {{ }} نمایش می دهیم . ما میتوان به جای آن از دایرکتیو ngBind استفاده کنیم .

1. //With expression  
2. <div id = "myTest" > <a href = '#' >  
3.     {  
4.         {  
5.             itemNo  
6.         }  
7.     } </a> </div>  
8.     //with ngBind directive  
9.     <div class = "myTest" > <a href = "#"  
10. ng - bind = "itemNo"> </a> </div>  

3.افزودن استایل برای ngCloak به صورت دستی

همیچنین میتوانیم  استایل های css را که با استفاده از کدهای AngularJs به آن تزریق کنیم . اگر این عمل را انجام دهیم استایل ها بلافاصله بر روی قالب HTML  بارگذاری می شود .

تعریف استایل در برنامه :

1. [ng - cloak], .ng - cloak, [data - ng - cloak], [ng\: cloak], [x - ng - cloak], .x - ng - cloak  
2. {  
3.     display: none!important;  
4. }  

حال برای کار آماده است .

1. <div ng-controller="HomeController" ng-cloak>   
2. </div>

4.پنهان کردن محتوا به صورت دستی

 میتوان به صراحت گفت که استفاده از css انتخاب خوبی است چون میتوان کنترل کاملی بر آن داشت .در این، ایده ای بسیار ساده مطرح می شود که در ابتدا با استفاده از inline style یا CSS Class  قالب HTML را پنهان می کنیم . و با استفاده از یک تابع جاوا اسکریپتی آن را نمایش دهیم . در مثال زیر ما از app.run() استفاده می کنیم که وقتی بارگذاری صفحه به اتمام می رسد . اجرا می شود .

HTML:

1. <div ng-controller="HomeController" id="example" style="display:none">  
2. </div>  

JAVASCRIPT

1. var app = angular.module("app", []);  
2. app.run(function($rootScope, $location, cellService)  
3. {  
4.     $("#example").show();  
5. });  

آموزش angular

دانلود نسخه ی PDF این مطلب