The AngularJs is also the JavaScript Framework was have structured data in the development and manufacture of dynamic website. It is suitable for you who want to enter the world of web designers only HTML and AngularJS capitalization. Some of the main features that in relying upon by AngularJS and JS Angular excess of making JavaScript Framework this one became popular among web designers.
The main sections on Framework AngularJS as follows:
- NG-app that serves as a preliminary definition of a referral link from the application of the Angular and JS to html.
- NG-model serves for referral data from the application to the control input of the Angular JS html.
- NG-bind function as referral data from application of the AngularJS to the html tag.
Directly we practice learn how to make "Hello World" Application with AngularJS, you need to prepare your preparation before you would have to install a webserver on localhost using XAMPP, and download AngularJS official https://angularjs.org/ at time of this writing are written the stable version of AngularJs is version 1.5.2.The advantage if using AngularJS:
- By using the Angular JS in the making of the application will make it easy for developers, because AngularJS alone have the ability in making a Single Page Application quickly and easily.
- AngularJS framework capable of interacting with HTML and have the capability of data bindings on html with high efficiency.
- AngularJS Provides Dependency Injection (DI) which will allow the developer to write several separate components and code with each other. We just need to call the component if needed and can be used repeatedly.
- By using the AngularJS as the developer application developers can create functions and code better and more succinct.
If all preparation is complete, let's continue our studies. Create a new folder on the server XAMPP you, and give the name of "AngularJS" (let me more presentable). In the AgularJS folder, create a new file with the name "angular.min.js" which contains the JavaScript code AngularJS already you downloaded earlier. Next create a new file with the name "index.html", which works for our Hello World application displays on the display screen.
Write this source code for index.html file :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Mari Belajar Angular JS</title>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<p>Your Name <input type="text" ng-model="yourname" /></p>
<p>Hello {{ yourname }}</p>
</body>
</html>
The source above will be display look like this :
Short Descriptions
Function "ng-app" AngularJS on HTML tags
We could see "ng-app" which is rendered in the HTML tags, according to you what is the function of the ng-app? Answer by declaring a ng-app in a tag in the HTML which means AngularJS will tell you where he's going to run. Like the example above, AngularJS is in the <html> tag and he will walk around the part of the tag.
In case if in another case we make "ng-app" are in other tags like tag is at <div>, then AngularJS will only run on the tag. Following the example of its use:
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Angular JS</title>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-app>
<!--
code AngularJS kamu disini !
-->
</div>
</body>
</html>
See you on next AngularJS lessons.Function "ng-model" AngularJS
Is the attribute of the ng-model on AngularJS is the attribute that is used to define a model, where AngularJS is an MVC-based framework. In the example of the use of the above model ng-attribute with the name "yourname" that function when the value of the specified textbox is modified, then the value of the model the model ng-also changed. While the command {{yourname}} would be useful for showing data on the model of "yourname" to your screen.