Initialize AngularJS in HTML page
by
السلام عليكم ورحمة الله وبركاته .
اليوم سنحاول اكمال سلسلة 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>
