السلام عليكم ورحمة الله وبركاته .

اليوم سنحاول اكمال سلسلة AngularJS  . 

في هذا المقالة سنتحدث على طرق تهيئة صفحة الويب , كي تكون جاهزه او قابلة لقراءاة كود Angular  .

هناك ثلاث طرق , من اجل تعريف Angular في تطبيقك .

الطريقة الاولى يتم التهيىة بشكل اتومتيكي , وهي الطريقة الاسهل .

اما الطريقة الثانية وهي ايضا بشكل اوتومتيكي , لكن اصعب بالتعامل من الطريقة الاولى .

الطريق الثالثة وهي الاصعب , ويتم كل شي فيها بشكل يدوي . 

سوف نتعرف على كل طريقه على حدها , والتعرف متى يجب ان نختار اي طريقة مناسبة لمشروعنا .

ملاحظة:

الشي الموجود في كل الطرق هو اضافة او تضمين ملف AngularJS  من الموقع الرسمي, كرابط CDN  او تحميل نسخة منه على جهازك .

 

الطريقة الاولى :

في هذه الطريقة يتم فقط اضافة ng-app  في ترويسة الصفحة بالتحديد في اول Tag  , كما في التالي 

<HTML ng-app>

ويتم تعرف الــ Controller  كتابع ضمن كود JAVASCRIPT  , كما التالي :

<script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>

Code:

<html ng-app>
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثانية : 

في الطريقة الثانية يتم اعطاء قيمة لــ ng-app  من خلال كود الجافاسكريب بستخدام 

 

Angular.modile 

اسم الكنترولر , يتم تعريفه ايضا كاسم تابع في جافاسكريبت Controller()  .

 

كود :

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
 angular.module('Test',[]).controller('HelloWorld',function HelloWorld($scope){
        $scope.text="World";
    });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثالثة :

من الاعتياد ان يكون هناك تطبيق Angular  واحد  في صفحة HTML  , لكن اذا اردت ان يكون هناك اكثر من تطبيق Angular  في صفحة واحده ,

تحتاج لاستخدام طريقة BootStrap في تهيىه مشروعك بشكل يدوي .

 

كود :

 

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
  angular.element(document).ready(function(){
      angular.module('Test',[]).controller('HelloWorld',function($scope){
          $scope.text='World'
      });
      angular.bootstrap(document,['Test']);
  });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

 

 



Share

Comments