بخش های اصلی

آموزش 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>

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

تبلیغات

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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