برنامه نویس وب و موبایل


یکشنبه 25 آذر
MVC

راه اندازی برنامه ی AngularJs

یکشنبه, 15 مهر 1397

در مرحله اول می بایست رفرنس AngularJs  را به صفحه ی Html  خود بدهیم. از هر ادیتوری می توانید پروژه خود را راه اندازی کنید.

برای سادگی من از notepad استفاده می کنم.

خوب یک فایل notepad باز کرده و مقدمات تهیه  سند Html را به وجود می آوریم.

<html>
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>

<"" = div ng-app>
  
</div>

</body>
</html>

در قسمت head سند رفرنس AngularJs را می دهیم.رفرنس ها به دو صورت می باشد,روش اول به صورت CDN می باشد .که به این صورت می باشد که رفرنس AngularJs در یک سرور قدرتمند در فضای وب قرار گرفته است و با فراخوانی این اسکریپت در مرورگر کش می شود و در مراحل بعدی دیگر آن را دریافت نمی کند که این از مزایای استفاده از CDN می باشدو از معایب آن نیز اگر آن شرکت ما را تحریم کند و سرویس ارائه رفرنس را ببندد برنامه به مشکل می خورد.

روش دوم اسکریپت خود انگولار می باشد که آن را دانلود کرده و در کنار فایل های برنامه دخیره می کنیم. که می توان از وب سایت رسمی AngularJs که شامل مستندات این فریم ورک می باشد ، آن را دریافت کرد.

من از روش اول استفاده می کنم.

اسکریپت زیر را به بخش head سند اضافه می کنم.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

در این لحظه برنامه ما برای توسعه با AngularJs آماده شده است.

اولین برنامه ما به این صورت می باشد که یک تکست باکس در صفحه قرار بدهیم و مقدار تایپ شده در این تکست باکس را در پایین آن نمایش دهیم

در داخل تگ body یک div گذاشته و صفت ng-app را برای آن با مقدار خالی تنظیم می کنیم.صفت هایی که دارای ng می باشند به AngularJs مربوط می باشد.

الان باید قطعه کدی شبیه کد زیر داشته باشیم.

<html>
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>

<"" = div ng-app>
  
</div>

</body>
</html>

در ادامه یک تکست باکس در div گداشته .

<input type="text" ng-model="MyText" />

با توجه به قطعه کد بالا ، صفت ng-model را که مربوط به  AngularJs می باشد را تنظیم کرده و اسمی را به آن اختصاص می دهیم.

در ادامه قطعه کد زیر را می نویسیم.

{{MyText}}

علامت {{}} مربوط به AngularJs می باشد و برای بایند کردن مقادیر به کار میرود.

در حال حاضر باید قطعه کدی شبیه قطعه کد زیر داشته باشید.

<html>
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>

<div ng-app="">

  <input type="text" ng-model="MyText" />

<br />
  {{MyText}}
</div>

</body>
</html>

در ادامه سند را با پسوند html ذخیره کرده و در  مرورگر باز می کنیم.تبریک شما اولین برنامه خود را نوشتید.

در پست های بعدی با کنترلرها و سرویس ها و قسمت های مختلف این فریم ورک جذاب و دوست داشتنی آشنا خواهیم شد.wink

 

 



نظرات

Drag to order
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
نظر تایید شده ای برای این مطلب وجود ندارد .