Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted November 27th, 2015
Introduction to AngularJS

AngularJS is a JavaScript framework that is used for creating single-page applications. It aims to make the development of dynamic websites a lot easier by making use of the so called model-view-controller (MVC) architecture. Briefly explained, the MVC architecture is a way of separating the internal information of a website from the way that it is presented to the user. As the name indicates it consists of a model, a view and a controller. The model manages the data of the application by receiving commands from the controller. A controller is in charge of sending instructions to the model and the view according to input from the user. Finally, the view is the representation of the data for the end user.

A big advantage of Angular is its two-way data binding, which means that when the data in the model changes the view will update as well and the other way around. This makes it really easy to create dynamic pages with only a few lines of code.

In this blog post I will walk you through the basics of AngularJS by giving examples of things that you would like to start with when beginning the development of your application.

Including AngularJS to your project

As a start you have to download Angular, which can be done from here. Then in order to start building your app you will need to include the file in your HTML, right before the closing body tag. Your HTML will look something like this:

< !DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="js/vendor/angular.js"></script>
    </body>
</html>

Now we are ready to start writing our angular code.

Creating a module

First thing we will have to do is create a module. That module acts as a container for the different parts of the application that we will be adding, such as controllers, directives, services and filters. In there we also define the dependencies of our application. To create our module, we need to make a new JavaScript file named app.js and add to it the following code:

//Define a module called example-app
angular.module('example-app', [ ]);

The next step is to include that file in our HTML after the angular.js file.

<script type="text/javascript" src="js/app.js"></script>

Finally, we have to include our module and tell it to run when the document is loaded. That is done it the following way:


< !DOCTYPE html> <html ng-app="example-app"> <head></head> <body> <script type="text/javascript" src="js/vendor/angular.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>

Expressions

Angular uses expressions to bind data to the HTML. They are written like this {{ example }} and can contain literals, variables or operators. Here are a few examples:

<body>
    <span>Literal: {{ Example for literal }}</span>
    <span>Variable: {{ message }}</span>
    <span>Operator: {{ 6 + 3 }}</span>
</body>

We will be using those expressions in the following steps in order to display data on the page.

Controllers

Controllers are a main part of Angular. They are used to perform actions with the application data through functions. For our controller we will create a new file called main-contoller.js. We define a controller like this:

(function() {
    'use strict';
    angular.module('example-app')
    //Creates a controller called mainCtrl
    .controller('mainCtrl', function($scope) {
        //This is an example controller
        $scope.message = "My example Angular app";
    });
})();

Now we have a controlled called mainCtrl, which is invoked with a $scope object, which is the application object in Angular.
In our controller we define a variable message, which we will now display on our page.
That will be done through first including the newly created JavaScript file containing the controller. After that we link our controller to an html element of our choice, inside which the controller will be used. Finally, inside this html element we will be able to display the value of our variable through the use of an expression. Our HTML will be the following:

< !DOCTYPE html>
<html ng-app="example-app">
    <head></head>
    <body ng-controller="mainCtrl">
        //Display the message variable
        <h1> {{ message }} </h1>

        <script type="text/javascript" src="js/vendor/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/main-controller.js"></script>
    </body>
</html>

Directives

Directives in Angular are markers on HTML elements that enable specific behavior such as event listeners or even allow transformation of the element and its children. Angular comes with some built-in directives like ngModel, ngClass, ngShow, ngHide and others. In addition to that custom directives can also be created, in which custom behaviors can be specified.

For the sake of this example let’s take a look at one of the built-in directives called ngRepeat. This directive will let you take an array and display its content on the page with only a few lines of code by cloning html elements once for every array item. In addition to that filters can also be applied to ngRepeat in order to show only certain element.
To demonstrate how ngRepeat works, let’s first create an array inside our Main Controller:

(function() {
    'use strict';
    angular.module('example-app')
    //Creates a controller called mainCtrl
    .controller('mainCtrl', function($scope) {
        //This is an example controller
        $scope.message = "My example Angular app";

        //Example array of objects
        $scope.myArray = [
            { name: "Item 1", info: "This is the first item of the array"},
            { name: "Item 2", info: "This is a second item"},
            { name: "Item 3", info: "Third item of the array"}];
    });
})();

Now that we have an array let’s display its content on the page. Here is how our HTML will look like:

<h1> {{ message }} </h1>
<ul>
    //Creates a list item for each item of the array
    <li ng-repeat="item in myArray">{{ item.name }} : {{ item.info }}</li>
</ul>

The result should look something like this:

  • Item 1 : This is the first item of the array
  • Item 2 : This is a second item
  • Item 3 : Third item of the array

Those were just some of the basics of AngularJS, which might be useful to know when you are planning to start developing an app by using the framework.

Posted by Victoria Mineva

Leave a Reply

Your email address will not be published. Required fields are marked *