• Java
    • JAXB Tutorial
      • What is JAXB
      • JAXB Marshalling Example
      • JAXB UnMarshalling Example
  • Spring Tutorial
    • Spring Core Tutorial
    • Spring MVC Tutorial
      • Quick Start
        • Flow Diagram
        • Hello World Example
        • Form Handling Example
      • Handler Mapping
        • BeanNameUrlHandlerMapping
        • ControllerClassNameHandlerMapping
        • SimpleUrlHandlerMapping
      • Validation & Exception Handling
        • Validation+Annotations
        • Validation+ResourceBundle
        • @ExceptionHandler
        • @ControllerAdvice
        • Custom Exception Handling
      • Form Tag Library
        • Textbox Example
        • TextArea Example
        • Password Example
        • Dropdown Box Example
        • Checkboxes Example
        • Radiobuttons Example
        • HiddenValue Example
      • Misc
        • Change Config file name
    • Spring Boot Tutorial
  • Hibernate Tutorial
  • REST Tutorial
    • JAX-RS REST @PathParam Example
    • JAX-RS REST @QueryParam Example
    • JAX-RS REST @DefaultValue Example
    • JAX-RS REST @Context Example
    • JAX-RS REST @MatrixParam Example
    • JAX-RS REST @FormParam Example
    • JAX-RS REST @Produces Example
    • JAX-RS REST @Consumes Example
    • JAX-RS REST @Produces both XML and JSON Example
    • JAX-RS REST @Consumes both XML and JSON Example
  • Miscellaneous
    • JSON Parser
      • Read a JSON file
      • Write JSON object to File
      • Read / Write JSON using GSON
      • Java Object to JSON using JAXB
    • CSV Parser
      • Read / Write CSV file
      • Read/Parse/Write CSV File – OpenCSV
      • Export data into a CSV File
      • CsvToBean and BeanToCsv – OpenCSV

JavaInterviewPoint

Java Development Tutorials

AngularJS Hello World Example

April 7, 2016 by javainterviewpoint Leave a Comment

In this first article on AngularJS, let’s build the traditional “hello world” application. For this simple AngularJS Hello World application, we will have an input field which allows users to type their name. Then we will take the user name and display user’s name along with the welcome message.

For building up an AngularJS application we need to include “angular.js” file  and it can  be included in 2 different ways.

  • Go to angularjs.org site –> click on Download –> Copy the CDN URL  and use it in the application.
  • Download that angular.js file into your local folder and you can include it.

HelloWorld.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>HelloWorld Application</title>
</head>
<body ng-app="">
   <input type="text" ng-model="username" placeholder="Enter your name">
   <h2>
     Welcome <span ng-bind="username"></span>!!!
   </h2>
   <script
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
   </script>
</body>
</html>

Simply copy paste the above code in any text editor and save it the extension of “.html”. Finally open the saved “HelloWorld.html” in your browser.

Output

AngularJS Hello World Example

Whatever we type in the textbox will get appended to the “Welcome” String dynamically.

How everything works ?

  • The ng-app directive is added to the <body> tag. ng-app defines the starting point of the angular js application flow. I have not given any value to the ng-app, as of now leave it as such we will discuss more about it in my later articles. Just remember that it is a directive.
  • We have an input tag, with a directive called ng-model on it. The ng-model directive can be used on any html element whenever we want to enter a data and want the value to be accessed through JavaScript. Here, we are telling AngularJS to store the value entered by the user in the text field to be stored in the variable “username”.
  •  We also have used another directive called ng-bind. ng-bind or double-curly {{}} brackets are almost the same,instead of using <span ng-bind=”username”></span>, we can use {{username}}. Both will give the same result only. Angular will be binding the model value here. The model used in the above line is “username” and the value entered by the user is “JavaInterviewPoint” , angularjs will place the value of the model in the place of ng-bind=”username”.
  • That’s it we have built and executed our first AngularJS Hello World Example application.

Other interesting articles which you may like …

  • AngularJS – Modules and Controllers
  • Two-Way Data Binding in AngularJS Example
  • ngBind, ngBindHtml and ngBindTemplate
  • AngularJS Form Validation with ngMessages
  • AngularJS Routing Example using ngRoute
  • AngularJS Spring MVC integration
  • AngularJS Spring MVC CRUD Example using $http service

Filed Under: AngularJS, J2EE, Java Tagged With: AngularJS, Hello World Example

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Java Basics

  • JVM Architecture
  • Object in Java
  • Class in Java
  • How to Set Classpath for Java in Windows
  • Components of JDK
  • Decompiling a class file
  • Use of Class.forName in java
  • Use Class.forName in SQL JDBC

Oops Concepts

  • Inheritance in Java
  • Types of Inheritance in Java
  • Single Inheritance in Java
  • Multiple Inheritance in Java
  • Multilevel Inheritance in Java
  • Hierarchical Inheritance in Java
  • Hybrid Inheritance in Java
  • Polymorphism in Java – Method Overloading and Overriding
  • Types of Polymorphism in java
  • Method Overriding in Java
  • Can we Overload static methods in Java
  • Can we Override static methods in Java
  • Java Constructor Overloading
  • Java Method Overloading Example
  • Encapsulation in Java with Example
  • Constructor in Java
  • Constructor in an Interface?
  • Parameterized Constructor in Java
  • Constructor Chaining with example
  • What is the use of a Private Constructors in Java
  • Interface in Java
  • What is Marker Interface
  • Abstract Class in Java

Java Keywords

  • Java this keyword
  • Java super keyword
  • Final Keyword in Java
  • static Keyword in Java
  • Static Import
  • Transient Keyword

Miscellaneous

  • newInstance() method
  • How does Hashmap works internally in Java
  • Java Ternary operator
  • How System.out.println() really work?
  • Autoboxing and Unboxing Examples
  • Serialization and Deserialization in Java with Example
  • Generate SerialVersionUID in Java
  • How to make a class Immutable in Java
  • Differences betwen HashMap and Hashtable
  • Difference between Enumeration and Iterator ?
  • Difference between fail-fast and fail-safe Iterator
  • Difference Between Interface and Abstract Class in Java
  • Difference between equals() and ==
  • Sort Objects in a ArrayList using Java Comparable Interface
  • Sort Objects in a ArrayList using Java Comparator

Follow

  • Coding Utils

Useful Links

  • Spring 4.1.x Documentation
  • Spring 3.2.x Documentation
  • Spring 2.5.x Documentation
  • Java 6 API
  • Java 7 API
  • Java 8 API
  • Java EE 5 Tutorial
  • Java EE 6 Tutorial
  • Java EE 7 Tutorial
  • Maven Repository
  • Hibernate ORM

About JavaInterviewPoint

javainterviewpoint.com is a tech blog dedicated to all Java/J2EE developers and Web Developers. We publish useful tutorials on Java, J2EE and all latest frameworks.

All examples and tutorials posted here are very well tested in our development environment.

Connect with us on Facebook | Privacy Policy | Sitemap

Copyright ©2023 · Java Interview Point - All Rights Are Reserved ·