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>

 

 

 

Angular First App

by

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

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

طبعا هي احد منصات TypeScript  , التي تساعدنا في برمجة صفحات الويب  مثل (JavaScript , jQuery ….) ,و الكثير .

الاصدار الحالي هو Angular 4  ,

سوف نتعرف اكثر على محتواها وميزاتها بمثال صغير .

طبعا كما قلنا هي JavaScript Framework   .

يتم تعريفها على النحو التالي , في راس الصفحة يتم اضافة الـــ CDN  , من موقع Angular  .

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

االخطوة التالية , وهي تعرف الجزء الدي سيعمل على Angular  , على سبيل المثال

<div ng-app="">
   </div>

يجب اضافة ng-app=""  حتى يتم التعرف عليها من قبل Angular     .

يتم اضافة نص , من اجل ادخال الاسم كما التالي :

 <p>Name: <input type="text" ng-model="name"></p>

 مع ذكر  ng-model="name"  , الذي يعتبر كمرجع للقراءه منه في ما بعد .

وايضا يتم اضافة <p> لعرض محتوى صندوق النص name  .

<p ng-bind="name"></p>

يدل الكود السابقة للـ p  على انها تعمل bind  من name  التي هي من نوع Text  .

الكود كامل :

 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

 االناتج :

 

Start With AngularJS

by

AngularJS is a client-side JavaScript framework developed by Google and the community for developing single-page applications that only require CSS, HTML and JavaScript on the client side.

Features

  • Directives
  • Data Binding
  • Filters
  • Modules
  • Routes
  • Controllers

AngularJS Directives

AngularJS Directives are commands that allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements as in the following:

  • ng-app: It will load the dependencies and the module.
  • ng-bind: Automatically changes the text of an HTML element to the value of a given expression.
  • ng-model: Similar to ng-bind, but allows two-way data binding between the view and the scope.
  • ng-class: Allows class attributes to be dynamically loaded.
  • ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.
  • ng-repeat: Angular control structure act as for loop.
  • ng-click: Angular on click event

Install: Open the website angularjs.

 

Download

Now select Branch and build if you want to uncompress or Zip. And click Download. 

Getting Started

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

Add angular.min.js to the scripts directory.

Now let's work on the view part.

To begin let's see how to do data binding using AngularJS:

First of all add a new HTML page and provide a relevant name, now add a angularjs reference to the page.

<script src="Scripts/angular.min.js"></script>

Now add the ng-app directive on the top root of the page or in any div like this.

<html ng-app=""><div class="container" ng-app="">Let's<div class="container" ng-app="">        <h3>AngularJS Data Binding Template </h3>               Name: <input type="text" ng-model="name" placeholder="Type something" />&nbsp;&nbsp; {{ name }}        <br />        Country: <input type="text" data-ng-model="country" placeholder="Type something" />&nbsp;&nbsp; {{ country }}</div>

One more example that calculates 2 numbers:

<div>        <h3>AngularJS Data Binding Template</h3>        <input type="number" ng-model="FirstValue" value="0" placeholder="Enter First value here">        +        <input type="number" ng-model="SecondValue" placeholder="Enter Second value here">        ={{FirstValue+SecondValue}}</div><script src="Scripts/angular.min.js"></script>

Output

 

 

Source :csharpcorner,AngularJS