In this blog post we will see how to get started with angularjs, what is it and the basics.
AngularJS is a javascript framework by google, to build highly dynamic web application and HTML5 mobile apps. Below are some of the main features which define angularjs
1. Bi-Directional data binding between data and view. Which means as soon as your underlying data changes, your html view changes accordingly and instantly.
2. Unit Testing and E2E Testing is built into its core.
3. Dependency Injection is used throughout for services.
4. Promise Pattern is used instead of callbacks got async operations.
4. Based on MVW pattern (Model-View-Whatever)
5. Ideal for making single page applications.
Without waiting further lets dig into the code aspect on angularjs and write our first helloworld application.
AngularJS HelloWorld
The latest version of angularjs can be found at https://code.angularjs.org/1.3.8/ or downloaded from homepage.
Create an index.html with content
[js]
<html>
<head>
<script type=’text/javascript’ src=’https://code.angularjs.org/1.3.8/angular.min.js’/>
<script type=’text/javascript’ src=’app.js’/>
</head>
<body ng-app=’helloworldApp’>
<div ng-controller=’MainCtrl’>
{{text}}
</div>
</body>
</html>
[/js]
Next create a javascript file app.js
[js]
var mainMod = angular.module(‘helloworldApp’, []);
mainMod.controller(‘MainCtrl’, function ($scope) {
$scope.text = ‘HelloWorld!!’;
});
[/js]
The final result can be seen above. As we can see, in our html file we defined {{text}} and it was replaced by HelloWorld!! in the browser.
Angular Module and ng-app
Lets get in the details of what happened in the above code.
The first thing to notice in the html code is the ng-app attribute. This acts as a starting point of an angular application. ng-app mentions that name of the module to load in our case it was helloworldApp
Without the ng-app directive angular won’t start.
In our app.js file, we defined the module
[js]
var mainMod = angular.module(‘helloworldApp’, []);
[/js]
Here we create a new module helloworldApp and assign to variable mainMod
In angularjs, application code is distributed across various modules and you can create multiple modules and extend them. We will see these things later.
The ng-app attribute acts as the starting point for angular, all DOM elements inside the ng-app element come under the scope of angular. Usually ng-app can be safely added to top level elements like html, body, document etc but if required it can be added to
Angular Controller
Controller acts a function to manage $scope, initial state, interact with various services.
In the above code, we had defined a controller as
[js]
mainMod.controller(‘MainCtrl’, function ($scope) {
$scope.text = ‘HelloWorld!!’;
});
[/js]
and ng-controller='MainCtrl'
The first argument of the controller is $scope. $scope is a very important service in angularjs which we will discuss in depth later. For now, we can consider $scope to be two way link between DOM and our data.
For e.g we have set the value of text as HelloWorld in our controller and it was dynamically replaced by {{text}} in our html.
Above we have seen a simple application in angularjs. Next lets dig more deeper into data binding in angularjs