What is AngularJS?
AngularJS is web development framework maintained by Google and a large community of developers. It uses MVC (Model View Controller) capabilities to make both development and testing easier. It takes away all of the UI manipulation away while you can concentrate on working on the business logics.
Your First AngularJS
To demonstrate the basic AngularJS usage by making a simple page which allow the user to enter a name and the page will display a message follow by a message “Hello David”.
To get started we need to download the library from the web site or we can reference the library directly from Google’s CDN (Content Delivery Network) server. I am going to be referencing the CDN for all my demonstrations.
or
Use the CDN in your HTML.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
Now create a new file called Hello.html and enter the following code and view it in your browser:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
</head>
<body>
<div>
<label>What is your name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}</h1>
</div>
</body>
</html>
The first line in the <html> tag we have a ng-app directive, this means that anything within this tag can be processed by Angular.
In the <head> we are including the Angular library, this can be on your local folder or over the Internet from Google’s CDN.
In the <input> tag we have specified the ng-model directive to create and associate a model to the input, so when someone enter something the value will be stored in that model.
In the <h1> tag we output the value from the model using double curly braces, the curly braces is a method for data binding in Angular.
Download the source code for this blog from my GitHub repository:
https://github.com/csharpguy76/LearnAngularJS