Hello World in AngularJS

2 Sep by vichu

Hello World in AngularJS

Reading Time: 2 minutes

Lets take the first example in nearly every programming language for every programmer, HELLO WORLD!!..

As I prefer calling my name instead of world, I am going to display this message little interactive by printing your name instead of traditional world. Hope you enjoy the first example of AngularJS.

For this, we will have an input field that allows users to type in their name. Then, as the user types, we will update the UI with the latest value from the text box. Sound complicated? Let’s see how it would look:

See the Pen Simple DataBinding in Angularjs by Vishal Srinivasan (@vishal_srini) on CodePen.0

We have added:

  • The AngularJS source code has ng-app directive has present inside <body> tag.
  • We have an input tag, with a directive called ng-model on it. The ng-model directive is used with input fields whenever we want the user to enter any data and get access to the value in JavaScript. Here, we tell AngularJS to store the value that the user types into this field in a variable called name.
  • We also have another directive called ng-bind. ng-bind and the double-curly notation are interchangeable, so instead of <span ng-bind=”name”></span>, we could have written {{ name }}. Both accomplish the same thing, which is putting the value of the variable name inside the tag, and keeping it up to date if it changes.

Conclusion:

The above example showcased the power of AngularJS two-way data-binding. The best part was that we were able to do that without writing a single line of JavaScript. The same application in pure JavaScript would require us to create listeners and jQuery DOM manipulators. We were able to do away with all of that.

Frequently Asked Questions in AngularJS:

  1. What Backend Do I Need?
    One of the first questions we usually get is regarding the kind of a backend one would need to be able to write an AngularJS application. The very short answer is: there are no such requirements. AngularJS has no set requirements on what kind of a backend it needs to work as a Single-Page Application.You are free to use Java, Python, Ruby, C#, or any other language you feel comfortable with. The only thing you do need is a way of communicating back and forth with your server. Ideally, this would be via XHR (XML HTTP requests) or sockets.If your server has REST or API endpoints that provide JSON values, then it makes your life as a frontend developer even easier. But even if your server doesn’t return JSON, that doesn’t mean you should abandon AngularJS. It’s pretty easy to teach AngularJS to talk with an XML server, or any other format for that matter.
  2. Does My Entire Application Need to Be an AngularJS App?
    In a word, no. AngularJS has a concept (technically, a directive, as shown above) called ng-app. This allows you to annotate any existing HTML element with the tag (and not just the main <html> or <body> tag). This tells AngularJS that it is only allowed to work on, control, and modify that particular section of the HTML. This makes it pretty simple to start with a small section of an existing application and then grow the part that AngularJS controls over time gradually.

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

One Comments “Hello World in AngularJS

Leave a Reply

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