<div ng-app> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> Type some text and watch it appear below: <input type="text" ng-model="someText" /> <h1>Your text: {{ someText }}</h1> </div>
Your text: {{ sometext }}
- First, we create everything inside of a div and declare it as the root of the angular web app my putting the directive ng-app inside of your div tag.
- Next we'll load up the minified angular javascript libraries from their CDN. One nice thing about Javascript is that you can easily just copy that line into your own html file and it will load up fine without any "library files to add to the project".
- Next we will enter some regular text, and the web page will say quite literally "Type some text and watch it appear below:"
- We create a text input DOM html element. Inside if the <input> tag we add another Angular directive: ng-model. Ng-model allows us to create a two-way binding between the text input on the page and the variable "someText". This means that changing the text in the input will updates the variable's value, and vice versa.
- We then create some more regular text on the page, this time as an <h1> heading font style. We then print out some plain text and the binded value of the variable someText, which is the value of the text input.
- Add the closing </div> tag to complete the html file.