ورود

ورود کاربر

0%

یک شروع خوب با AngularJs

توی این مقاله قصد داریم یکم راجع به فریم ورک محبوب Angular صحبت کنیم و کارایی که انجام دادیم و انجام دادید رو به اشتراک بزاریم و مختصر آموزشی رو در حین معرفی کارامون ، بدیم .

من یک سری کار به صورت آزمایشی انجام دادم که می تونید از این آدرس ببینید .

نمونه کد های انگیولر

همون طور که در مقاله ی قبلی ، AngularJs رو معرفی کردیم ، تو این مقاله قصد داریم یه سری مفاهیم کلی و پایه رو با هم شروع کنیم و با هم بریم جلو .

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

همونطور که قبلا گفتم می تونید از سایت پلانکر به عنوان ادیتورکه می تونه شروع خیلی خوب و مفیدی واسه شروع باشه ، استفاده کنید

به این صورت که شما می تونید سورس مورد نظرتون رو از پنل سمت راست انتخاب و کلیک کنید . با این کار سورس مورد نظر به صفحه ی HTML شما اضافه میشه .

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

اضافه کردن این تکه کد در قسمت هدر سایت :

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

قدم دوم :

ایجاد یک فایل مجزا به نام script.js ومعرفی این فایل به پروژه از طریق تکه کد زیر در قسمت هدر :

<script src="script.js"></script>

تا اینجای قضیه ما انگیولر و فایلی که قراره در اون کد های جاواسکریپت رو بزنیم رو توی پروژمون تعریف کردیم .

قدم سوم :

اضافه کردن ng-app در قسمت تگ Html یا تگ body که به طور مثال به این صورت می شود .

<html ng-app>  یا <body ng-app>   .

Ng-app یک نوع Directive هست در انگیولر ، که وقتی ما این رو در فایلمون قرار می دهیم در اصل داریم به انگیولر می گیم که از این خط به بعد کد های انگیولر و اون  app  مورد نظر ماهست و اون رو بخونه .

ng مخفف یا کوتاه شده ی Angular هست و از این به بعد هر جایی ng دیدید بدونید که یک ربطی به  AngularJs داره .

یک مثال ساده :

نمونه کد در پلانکر

 

<!DOCTYPE html>
<html ng-app>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>{{4 + 3}}</h1>
  </body>

</html>


 در این مثال ما از طریق انگیولر 2 عدد را با هم جمع می کنیم  .

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


 

افزودن دیدگاه جدید