002 AngularJS Environment Setup

What is MVC structure ?
 
            Model-View-Controller is an architecture pattern widely used in software development. MVC separate application into three parts .

Model : The model is an object to hold data associated with the business logic .A model maybe structured object  , single object to hold a data associated with the business requirement.

View :  View is user interface to interact with user. View display data from model and modify the model data also. View makes a bridging between user and the model.

Controller : Control controll the application .Controller process user  request , process data from database, fill  it to the model and return to view. There may be more than  one view associated with  a controller, but controller decide which view to render.

 
AjgularJs Environment :
 
                AjgularJs  is built on JavaScript and it is free  an open source JavaScript library . There are several version of AjgularJs . To setup environment , you need to first download the library.There are many version to download .Version 1.2x and  lower is consider Legacy version. Version 1.2x  and upper  considered as latest version.

We can download AjgularJs library from Google or  AjgularJs CDN. 

                 Here is the link of Google CDN

https://developers.google.com/speed/libraries/#angularjs

Reaching there , will find this type of link  which version number , you can download or copy the link and add to the page


              AjgularJs library form AjgularJs CDN

You can get , AjgularJs library form AjgularJs CDN. Below is the link of the CDN.

https://cdnjs.com/libraries/angular.js/

Reaching there you will get this kind of  string , you can download or copy paste the link to your application.

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js


                        AjgularJs 2

                AngularJS  recently introduces beta version  AngularJS  some new features , name is AjgularJs 2. AjgularJs 2  is faster then  AjgularJs and more mobile compatible then AngularJS.

AjgularJs steps
 
Library : You need to add library reference at the top of your program , it may be link to the library or local copy of the library. Both will work same. AjgularJs internally  use jQuery , but you do not need to add jQuery library at your application,  there is version JQlight   inbuilt added to the  AjgularJs library.

Example  


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

Application : 'ng-app'  directive define the AngularJS application.ng-app  directive inform the JavaScript compiler that is a new application.ng-app is the root element of an application , variable, function define under this application do not conflict with other javaScript application or  library out of this application. You can write , a single application (ng-app) in a html  page. If you want to create multiple application you need to use angular.bootsrap ( angular.bootstrap(document, ['example']);
 
Example

<div ng-app="myApp" ng-controller="myCtrl">

</div>

<script>
        var app = angular.module('myApp', []);

</script>

Controller : A controller control the application . 'ng-controller'

directive  is controller of angularJs application. It is actually javascript Object  and scope  to define some area and avoid conflict from other controller. You can define controller to a separate file, and put the link of the file in the HTML page. Controller is called by scope object, scope object pass to the controller as an argument. The main function of a controller  process data. View accept the data and passed to the model ,then  controller. Controller process the data, send to the view.


Example

<div ng-app="myApp" ng-controller="myCtrl">

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)

{

});
</script>


Model :'ng-model' attribute is directive of a model.ng-model bind value with HTML control , angularJs is two way binding.
Change in one control , will reflect to another control and vice versa.

Example

<div ng-app="">

<p>Enter Skill : <input type="text" ng-model="Skill"></p>

<h1>Hi ,I am Learning {{Skill}}</h1>

</div>

1) A simple example of input string binding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

      </head>

      <body>

      <div ng-app="">

               <p>Enter Skill : <input type="text" ng-model="Skill"></p>

               <h1>Hi ,I am Learning {{Skill}}</h1>

       </div>

   </body>

</html>

Output

2) A simple example of input to number , show as a sum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

              <head>

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

              </head>

              <body>

                      <div ng-app="" >

                                        First Number:

                                           <input type="number" ng-model="firstNumber"><br>

                                       Second Number:

                                           <input type="number" ng-model="SecondNumber"><br>

                   <br>

                        <p>Sum: {{ firstNumber + SecondNumber }}</p>

                  </div>

         </body>

</html>

Output

3)Creating a multiplication table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

</head>

<body>

<div ng-app="" ng-init = "i=0">

Enter Number:

<input type="number" ng-model="firstNumber" value=2><br>

             <p>{{ firstNumber}}X{{(i+1)}}= {{ firstNumber*(i+1) }}</p>

             <p>{{ firstNumber}}X{{(i+2)}}= {{ firstNumber*(i+2) }}</p>

             <p>{{ firstNumber}}X{{(i+3)}}= {{ firstNumber*(i+3) }}</p>

             <p>{{ firstNumber}}X{{(i+4)}}= {{ firstNumber*(i+4) }}</p>

             <p>{{ firstNumber}}X{{(i+5)}}= {{ firstNumber*(i+5) }}</p>

            <p>{{ firstNumber}}X{{(i+6)}}= {{ firstNumber*(i+6) }}</p>

            <p>{{ firstNumber}}X{{(i+7)}}= {{ firstNumber*(i+7) }}</p>

            <p>{{ firstNumber}}X{{(i+8)}}= {{ firstNumber*(i+8) }}</p>

           <p>{{ firstNumber}}X{{(i+9)}}= {{ firstNumber*(i+9) }}</p>

          <p>{{ firstNumber}}X{{(i+10)}}= {{ firstNumber*(i+10) }}</p>

</div>

</body>

</html>

Output

4)Example of Two way Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

</head>

<body>

          <div ng-app="" ng-init = "i=0">

                     Enter Your Text Here :

                    <input type="text" ng-model="myText" ><br>

                     OR

                   <br>

                      You May Enter Here :

                       <input type="text" ng-model="myText" ><br>

       </div> 

</body>

</html>

Output

As we have discussed , you have to link AngularJS library file to each page.You can write AngularJS code in two place .You can place your code in same file or can be place in the separate file.If you write AngularJS in separate Javascript file , you have to link , the javascript file with the page.

Below is the simple application of AngularJS ,here code is placed in the separate file.

Html file

<!DOCTYPE >

<head>

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

        <script src="jsscipt.js"></script>

     </head>

     </body>

             <div ng-app="myApp" ng-controller="myCtrl">

                        {{ firstString + " " + secondString }}

     </div>

Javascript file

var app = angular.module("myApp", []);

app.controller("myCtrl", function ($scope) 

{

       $scope.firstString = " AngularJS is in jsscipt.js .";

       $scope.secondString = " Page contain only link ";

});

Output :

AngularJS is in jsscipt.js . Page contain only link