AngularJS is a JavaScript framework used to development web applications. Getting started with AngularJS is easy, should you have a basic understanding of HTML, CSS and JavaScript.
Many users will be familiar with using jQuery when developing web applications. What is the difference between using the two? The primary difference is that when using jQuery, you usually create the HTML/CSS markup for your pages, and then make them dynamic using jQuery. With AngularJS, you should start from the ground up with your architecture in mind.
To start using AngularJS, you should include the JavaScript file within your web page. The simplest way is to use the library provided by Google.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">&</script>AngularJS lets you extend HTML with new attributes called Directives. Some of these include:
ng-app – Initialise an AngularJS application.ng-init – Initialise application data.ng-model – Bind the values of HTML form controls (such as input,select, textarea) to application data.The ng-app is typically placed near the root element of the page, such as on the <body> or <html> tag.
When specifying a module name for the ng-app attribute, you can instantiate the module by using the AngularJS function angular.module.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>Welcome to your first AngularJS application</h1>
<script type="text/javascript">
var app = angular.module("myApp", []);
</script>
</body>
</html>This will allow you to start adding other directives to your application.
A basic example of AngularJS in use can be with the ng-model directive.
<p>Name: <input type="text" ng-model="firstName"></p>With this directive you can bind the value of an input field to a variable created in AngularJS. In the above example, the value of the input will be bound to a firstName variable.
An AngularJS expression, represented by a double curly brace notation, {{ }}, can then be bound to the element.
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>If you include this markup within your application, you should notice that when typing within the HTML input, the expression will also change.
That concludes a basic introduction into AngularJS. Other features such as data binding and AngularJS Controllers will be looked at in the next article.