بخش های اصلی

آموزش AngularJS

آموزش AngularJS – کار با Viewها

AngularJS از طریق چندین view در یک صفحه، از برنامه ی تک صفحه ای پشتیبانی می کنه. برای انجام این کار AngularJS باید دستورات ng-view و ng-template و سرویس های $routeProvider را فراهم کنه.

ng-view

تگِ ng-view، به سادگی یک place holder ایجاد می کنه که view مرتبط (html یا ng-template view) می تواند بر اساس پیکربندی اش در آن قرار بگیره.

طرز استفاده

یک div به همراه یک ng-view داخل یک ماژولِ اصلی تعریف کنین.

<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div> 

ng-template

دستورِ ng-template، برای ایجاد html view با استفاده از تگِ script به کار میره. این دستور شامل خصیصه ی (attribute) “id” است که با $routeProvider، برای map کردن یک view با controller به کار میره.

طرز استفاده

یک بلاکِ اسکریپت که type آن ng-tamplate باشه، داخل ماژول اصلی تعریف کنین.

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

$routeProvider

$routeProvider، سرویس کلیدیِه و urlها را پیکربندی می کنه، آن ها را با صفحه ی html مربوطه یا ng-template، map می کنه و یک controller به آن متصل می کنه.

طرز استفاده

یک بلاکِ اسکریپت به همراه ماژول اصلی تعریف کنین و پیکربندیِ مسیریابی را انجام بدین.

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(['$routeProvider', function($routeProvider) {
   $routeProvider.
   
   when('/addStudent', {
      templateUrl: 'addStudent.htm', controller: 'AddStudentController'
   }).
   
   when('/viewStudents', {
      templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
   }).
   
   otherwise({
      redirectTo: '/addStudent'
   });
	
}]);

در ادامه نکات مهمی که در مثال بالا باید در نظر گرفته بشن، آمده.

  • $routeProvider با استفاده از کلیدی با نامِ ‘$routeProvider’، مثل یک تابع در زیر ماژولِ mainApp تعریف میشه.
  • $routeProvider.when ، url  “/addStudent” را که بعداً با “addStudent.html” ، map میشه، تعریف می کنه. html باید در مسیری مشابه بعنوان صفحه ی اصلی html ارائه بشه. اگه صفحه ی html تعریف نشه، ng-tamplate با id=”addStudent.html” استفاده میشه. ما از ng-tamplate استفاده کرده ایم.
  • “otherwise” برای مشخص کردن view پیش فرض استفاده شده.
  • “controller” برای قرار دادن controller مربوط به view استفاده شده.

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

 

<html>
   
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
            
            when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).
            
            when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).
            
            otherwise({
               redirectTo: '/addStudent'
            });
         }]);
         
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
			
      </script>
      
   </body>
</html>
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد