Introduction to AngularJS

By | December 25, 2015

Introduction to AngularJS

AngularJS is a Javascript MVC Framework , mainly as a Framework use for SPAs (Single Page Applications). AngularJS developed by Google from engineers and gradual support on issues they Developer. the implementation and problems or have any questions then.

Advantages of AngularJS that will make the work front end of a web application that development easier because the MVC or MVVM Model . Web developer or Front End developer can modular development web application easier to use AngularJS is also the MVC design model orientation when the model has changed. The View will make changes to simplify the process of development. And that is familiar to many developer  be used to the View template that takes the form {{}} template engine, which many of them take the form itself.

Introduction to AngularJS

 

Let’s see how to get start  AngularJS also First, the Download Library itself is website angularjs.org well when downloaded will have javascript file, which is similar to jquery library when the file already took. files to the demand. I will keep in the folder js, example by figure below.

Introduction to AngularJS

Introduction to AngularJS

Then I will create ang01.html then write code to start it now.

 


<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Thaicoding - Angular</title>
<script src="js/angular.min.js"></script>
</head>
<body>





</body>
</html>


Notice that the tag html to attibute ng-app, which tells AngularJS that tag starts to make AngularJS begin the tag where we can move ng-app to tag another example <body ng-app>, <div. ng-app>, etc. when me start writing code, then I will add the tag input tag p and the tag span.

 




Name: <input type="text" ng-model="name">
<span ng-bind="name"></span>
{{name}}


When I try to run this web page will see that when me type in input will span messages are typed immediately notice <input> is attibute ng-model = “name” it is sytax of AngularJS an indication that the message in the textbox. to keep the model named name of the <span> that are ng-bind, to determine whether to bind the data from the model name, which in this case is called name in the ng-bind can also use the Template has. Type {{model}} The name, which think that if use Jquery continues to write multiple code lines to get  this event work. You will see that just the ability to write code for this preliminary work for the Front end web application or website easily.

Introduction to AngularJS

All Code

<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Thaicoding - Angular</title>
<script src="js/angular.min.js"></script>
</head>
<body>


Name: <input type="text" ng-model="name">
<span ng-bind="name"></span>
{{name}}


</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *