AngularJs #01 Installation of Module , Create and Use Controller , Use Directive ' ng-model ' ( Tutorial )

Image Source

What Will I Learn?

I will learn today how to install the module , create the controller and use directive ' ng-model'.

• How to install and use the module .
• Create and use the Controller
• Use the ng-model to import values in ( input , select and textarea ) .

Requirements

• Basic Knowledge of HTML language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

Firstly we must go to the official site of angularJS to download the framework based on pure JavaScript , you must download the ' min ' and ' uncompressed ' versions .
After download we must import them on our page HTML by the < script src="source">< /script> the value of src = source of our file exp : /JavaScript/angular.min.js or /JavaScript/angular.js for the two versions , we must also create a new page JavaScript for me I named it ' custom.js '

As you see in the picture , my page custom is empty now , I have just written the basic codes of HTML , now we go to the custom to create our module .
Before we install it , what's is the module ?
We can say the module is :

• The main() method of the angular like the main in Java for example is the very important element in angular language .
• The container of the controller , directives , services ..etc
  
  This is the code how to install the module , I have declare a new variable ' var app ' and into this variable I have created my module by the ' angular.module ' before I used the angular I announced it in the ' global angular ' the first line to define it .
  The module has as parameter the name of module to link it with the HTML file and the second is an array each case has a value like the ' ng-animate ' ..etc at the moment I will just install the module without the array but the name is very important we must put it , for me I choose ' Utopian-aymenz ' .
  
  Now we go to the second step is the controller , what's is the controller ?
• The controller is a JavaScript function .
• It builds a model for the view to display
  The way to create the controller is from the module just we put ' . ' point after module and write controller , it has 2 parameter the first is the name as the module to use it on the HTML page , the second is the function that do this controller , we have two methods to define the function , we can create a variable and declare the function into it and do a callback to the function by the name of the variable , or we can by simple method as the picture that I uploaded directly the name then the function , the function has a parameter which is the ' $scope ' is an object by the angular , by the scope you can define a propriety and affect a value to this propriety and use this value dynamically in our HTML page by the binding expression .
  Here I chose the propriety name is ' sayHello ' the value is a message ' Hello Utopian ' , finally we have created the module and the controller .
  We go to the next step which is very important how to link the angular module and controller by the HTML page ..
  
  The HTML language gives us a great to link the two languages , there is an attribute called ng-app which is the angular application name , you must write the name of module as a value of this attribute to activate the angular application , I prefer to put it in the top in the HTML tag to be accessible
  for all the tags , then to use the message in the sayHello we must define the controller also for the HTML by the ng-controller and put the name also to be a value of this attribute . I prefer also put it on the body tag to be accessible for all the tags into the body like ' Headings , paragraphs ..etc ' .
  
  How to import the message that I did on the controller function ?
  By the binding expression which is two braces {{ Here }} like it into the braces we put the value that you want to import , for this example the propriety called sayHello from the $scope , all expressions will be from the $scope object as here in this example we have the propriety sayHello just put the name intro the braces the value will appear like it
  
  I will give you another example of $scope to take the idea and how to use it
  
  In this example I have written a complex object named student has two proprieties ' fistName ' , 'lastName' I have assigned a new propriety of the $scope object which is student and the value of this propriety is the object that I have created before , now to take the values of firstName and lastName in HTML to view them
  
  As we know in JavaScript if we want to use a value in object we must write the name of object , point then the name of propriety in our case ' student ' is the name of the object and 'firstName ' is the propriety so to use the value of firstName we must write ' student.firstName' into div or paragraph ..etc any element of HTML .
  
  Great now we take almost the idea how to import values dynamically from the angular by the module , controller and the $scope parameter finally the binding expression {{ binding expression }}.
  
  The angular can do some calculations by the binding expression as here the sum of 40+50 I have created two divs to give you an idea , this is the result :
  
  The idea that I want to give you to understand more the role of ng-app which the relation between the angular and HTML
  
  I have deleted the ng-controller , and I move the ng-app to the first div , look at the result :
  
  The angular has calculated just the sum of the first div , why ? simply because of the ng-app the first time when I created the ng-app I put it on the HTML tag to apply it for all tags but know it's applied just for the first div so the second will appear like a sentence normal , to do the sum of the second div you must keep the ng-app on the HTML tag .
  Now we will talk about the Two way databinding which is keep the model and view in sync all the time , the view can change in the model updates and the model can change in the view updates .
  In the first method when I written {{ sayHello }} here is from the model to view now we will change a little to be from the view to the model , How ??
  
  This is simple message hello utopian to display to the users by the HTML
  
  Here we create the input code inside the input we put a new attribute called ' ng-model ' which is an attribute to import the value of message in angular page . we can use this attribute just in ' select , input and textarea ' .
  The second div normal message the same message but you can't modify it just by the input .
  
  
  I have written in the input text and the result appear in the {{ message }} so what we can understand that from the input from the view ' HTML ' with the attribute ng-model directive you can change the model which is the angular page and appear the new value , so the model and view in sync .
  
  I changed the name to test if I write on the input will change the message and this is the result .
  
  Nothing will change because the name of the ng-model or the value is different the the value in the message propriety , what's the solution ?
  
  This is the solution we create a binding expression and put inside braces the value of the ng-model attribute , now you can write what you want on the input it will appear ..
  

Curriculum

This is the first contribution .

---

Posted on Utopian.io - Rewarding Open Source Contributors

---