ورود / ثبت نام
0
0

مقاله بررسی مقدمه ای برای AngularJS

274 بازدید
AngularJS

AngularJSAngularJS مقاله ای که سعی کردم در این مدت براتون آماده کنم،ایام امتحانات را آرزو دارم با موفقیت به پایان برسونید،مقاله و توضیحاتی در این مطلب براتون دارم که حتما براتون جالب خواهد بود در این مقاله آموزش های اولیه کار با اپلیکیشن های AngularJS را توضیح می دهیم. قبل از هز چیزی بزارید توضیح کوتاهی از AngularJS بدیم و سپس آن را اجرا کنیم.
AngularJS چیست؟
AngularJS یک اپلیکیشن وب open-source (سورس باز) است که توسط گوگل حفاظت میشه و در سال ۲۰۰۹ منتشر شد که به زبان جاوااسکیریپت نوشته شده است. AngularJS خواص HTML را گسترش میده و اطلاعات رو با HTML پیوند میزنه.

 

لینک توزیع فایل AngularJS
script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”>>

چرا AngularJS

موارد زیر برخی دلایل استفاده از AngularJS هستند

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

بیاید یک HTML صفحه اصلی مثل زیر بسازیم:

 

<!DOCTYPE html>

<!– define angular app –>
<html ng-app=”MyApp”>

<head>
<!– SCROLLS –>
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css” />
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css” />

<!– SPELLS –>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js”></script>
<script src=”script.js”></script>
</head>

<!– define angular controller –>
<body ng-controller=”mainController”>

<nav class=”navbar navbar-default”>
<div class=”container”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”/”>Angular Routing Example</a>
</div>

<ul class=”nav navbar-nav navbar-right”>
<li><a href=”#”><i class=”fa fa-home”></i> Home</a></li>
<li><a href=”#about”><i class=”fa fa-shield”></i> About</a></li>
<li><a href=”#contact”><i class=”fa fa-comment”></i> Contact</a></li>
</ul>
</div>
</nav>

<div id=”main”>
<!– this is where content will be injected –>
<div ng-view></div>

</div>
</body>

</html>

 

در صفحه شاخص ماقبل، ما یک HTML ایستا ساختیم و ما به کتابخانه جاوا اسکیریپت اشاره کردیم که در نهایت یک div نهایی برای تزریق به HTML از دیدگاه دیگر به وجود می آید.
کد زیر برای فایل جاوا اسکیریپت است که ما مسیریابی اپلیکیشن رو انجام میدیم برای دوباره مشخص کردن صفحات مربوطه:

 

// create the module and name it MyApp
var MyApp = angular.module(‘ MyApp ‘, [‘ngRoute’]);

// configure our routes
MyApp.config(function($routeProvider) {
$routeProvider

// route for the home page
.when(‘/’, {
templateUrl : ‘pages/home.html’,
controller  : ‘mainController’
})

// route for the about page
.when(‘/about’, {
templateUrl : ‘pages/about.html’,
controller  : ‘aboutController’
})

// route for the contact page
.when(‘/contact’, {
templateUrl : ‘pages/contact.html’,
controller  : ‘contactController’
});
});

 

کد زیر کدی است برای تزریق به کنترل کننده :

 

// create the controller and inject Angular’s $scope
MyApp.controller(‘mainController’, function($scope) {
// create a message to display in our view
$scope.message = ‘Hello Everyone ! I am in Home page !’;
});

MyApp.controller(‘aboutController’, function($scope) {
$scope.message = ‘Hello Everyone ! I am in About page !’;
});

MyApp.controller(‘contactController’, function($scope) {
$scope.message = ‘Hello Everyone ! I am in Contact page !’;
});

 

 

در مقاله بعدی AngularJS را در نرم افزار تحت وب برسی میکنیم.امید وارم استفاده کنید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=11216
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
محبوبه میرزائی
مطالب بیشتر
برچسب ها:

نظرات

2 نظر در مورد مقاله بررسی مقدمه ای برای AngularJS

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *