HomeAngularJS

JavaScript AngularJS Hello World Example For Beginner

Learn JavaScript framework AngularJS indonesia : how to create simple aplication 'Hello World' using JavaScript Framework AngularJS Framework tutorials just for beginner?

Laravel 5 Tutorial : Laravel 5.3 Simple CRUD Application With Angular JS
AngularJS Tutorial : AngularJS 2.0 Released, What’s New?
Kelebihan & Kekurangan AngularJS JavaScript Terpopuler 2016
Learn AngularJS - The most popular JavaScript th 2016 is AngularJS which is a front-end framework JavaScript developed first by Google Misko Hevery Abrons and Adam. With this JavaScript Framework excellence and abundance of the powerful features of AngularJS, in the process of developing or making an application becomes very easy, as well as for a beginner though. In addition the AngularJS JavaScript framework is open source free used by anyone without having to pay.

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:

  1. NG-app that serves as a preliminary definition of a referral link from the application of the Angular and JS to html.
  2. NG-model serves for referral data from the application to the control input of the Angular JS html.
  3. NG-bind function as referral data from application of the AngularJS to the html tag.

The advantage if using AngularJS:

  1. 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.
  2. AngularJS framework capable of interacting with HTML and have the capability of data bindings on html with high efficiency.
  3. 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.
  4. By using the AngularJS as the developer application developers can create functions and code better and more succinct.
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.

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.
AngularJS Hello World Example For Beginner

AngularJS Hello World Example For Beginner

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 :

AngularJS Hello World Example For Beginner

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>

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.
See you on next AngularJS lessons.

Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


COMMENTS

DISQUS
Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,89,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,6,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: JavaScript AngularJS Hello World Example For Beginner
JavaScript AngularJS Hello World Example For Beginner
Learn JavaScript framework AngularJS indonesia : how to create simple aplication 'Hello World' using JavaScript Framework AngularJS Framework tutorials just for beginner?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBz8KkbQzBCJXCNzszPXalAGCNKTHkggEnCF-cYx8Si9otuXfYOpExGjTA6BzhDsP-yO79LP-5dGkrxooS3MmfZ2wCzXZDgCF3DF-vm6AZAcYGeSssXvBOxer9G3VVUgcFZkjiHNtwq4/s320/belajar-angular-js-pemula.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBz8KkbQzBCJXCNzszPXalAGCNKTHkggEnCF-cYx8Si9otuXfYOpExGjTA6BzhDsP-yO79LP-5dGkrxooS3MmfZ2wCzXZDgCF3DF-vm6AZAcYGeSssXvBOxer9G3VVUgcFZkjiHNtwq4/s72-c/belajar-angular-js-pemula.jpg
KODE AJAIB
https://scqq.blogspot.com/2016/06/angularjs-hello-world-example.html
https://scqq.blogspot.com/
https://scqq.blogspot.com/
https://scqq.blogspot.com/2016/06/angularjs-hello-world-example.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy