Missed you Angular

In a phase when I was developing Formia (our acadamic mini project), I needed to add a dynamic heading. hmm.., that means: I have an

<input type="text" name="title">

and a <p>...</p> tag.
I wanted to display the content of text box on <p> as I type on text box. At that point, I was unaware of AngularJS. I implemented that in pure JS. wired...

For the record, this feature could be implemented easily by Angular, as follows:

When you type on the box below, the content will dynamically display next to it.

{{message}}

(for best results use Chrome / Firefox)

Well, how's this happening?


Add the Angular CDN script to top of the HTML.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Add this 4 line to have that magic.

<div ng-app="">
<input type="text" ng-model="message">
{{message}}
</div>

Refresh your page. :)

This is because of 2-way data binding. You can read more at Angular Documentation.

Popular posts from this blog

How to pass variables to res.render() in Node.js

Talky Messenger Documentation & Setup