آشنایی با دایرکتیو ngClock در AngularJs
دوشنبه 3 آبان 1395در این مقاله قصد داریم شما را با دایرکتیو ngClock در AngularJS آشنا کنیم ، دایرکتیو ngClock جهت جلو گیری از نمایش کد های کامپایل نشده هنگام لود شدن صفحه را در قالب html استفاده می شود .
به طور عمده این دایرکتیو جزئیات ناخوش آیند را زمان کامپایل شدن قالب 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
- AngularJs
- 1k بازدید
- 1 تشکر