Learning Management Platform for Written Tutorial Series.

AngularJS Tutorial

AngularJS Tutorial

Introduction

AngularJS is a JavaScript web development framework for creating single page applications. It is an open source framework and it is maintained by Google. Being a JavaScript framework, AngularJS is executed on the client side. Any modern JavaScript enable web browser will be able to execute AngularJS code.

The official website for AngularJS is https://angularjs.org/

AngularJS Logo

Topics to be covered

We will cover the following topics in this tutorial

  1. Pre-requisites for learning AngularJS
  2. Why AngularJS
  3. What can be done with AngularJS?

Pre-requisites for learning AngularJS

It will be an added advantage for you if you have basic knowledge of the following

  • JavaScript – This is the language that AngularJS is developed with. The code that you will be writing is JavaScript but tailored to work with AngularJS framework.
  • HTML - AngularJS is like an extension of HTML. AngularJS will be manipulating HTML elements most of the times when presenting data to the user.
  • Server side language – AngularJS is a client side framework. Most modern applications need to interact with a data source. The common trend when developing AngularJS applications is working with REST APIs. A server side language such as PHP can be used to create a simple API that interacts with the database and presents the data to the AngularJS client app. You can also use other languages for the server side such as Ruby on Rails, ASP.Net, and JSP etc.

What if you do not know the above?

You can still take the course. It will try as much as possible to explain the code and concepts in the tutorial series. If the explanations are not sufficient for you, feel free to ask for help using the comments section.

10+ Reasons Why AngularJS is a super heroic framework

Some of the reasons why you should consider learning and using AngularJS include;

  1. Single Page Application (SPA) – the future of software seems to be moving towards web application. Single Page Applications only have to load a single page. This greatly improves the performance of the application and user experience.
  2. It’s a framework – frameworks speed up application development because most of the common functionality is already implemented by the framework. In addition to that, frameworks tend to make developers follow guidelines.
  3. MVC architecture – AngularJS makes it easy for you to separate your application logic, data models and views
  4. Modular programming – AngularJS supports modular programming. The advantage of this is loose coupling. Dependencies between modules are handled via Dependency Injection
  5. Data binding – two way data-binding makes it easy to share data between views and models
  6. Directives – a directive is like a helper function. You can define a directive for common tasks and just add it as a class, attribute or element to a regular HTML tag. This will make AngularJS perform whatever you instructed the directive to do.
  7. Template engine - AngularJS has a powerful easy to use template engine. Designers can easily learn the template engine and create functional views.
  8. Partials – partials allow you to break down your user interface into many pages. You can include the navigation in the main page and break down other pages such as about-us, products, and services etc. into partials.
  9. Routing – AngularJS supports routing. Routing creates the illusion of actually moving to a different page from the user’s perspective but in reality, only the main section of the single page is updated in the background.
  10. Filters – filters allow you to display data based on the set query. This means you only load data once from the server and let filters decide what to display without making calls to the server.
  11. Unit testing – AngularJS supports test driven development. You can write tests for your application and run them as you proceed with the development

What can be done with AngularJS?

AngularJS is a tool. What can be done with it depends on the creativity of the tool user. The following gives you an idea of what can be done.

  • Web applications
  • Web sites
  • Games

You can visit this website for a list of web apps and sites built with AngularJS Built with AngularJS

Summary

According to the official AngularJS website, "AngularJS is a client-side technology, written entirely in JavaScript. It works with the long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before."

What’s next?

Use the tutorials index to move on to the next tutorial.

If you found this tutorial useful, support us by using the social media buttons to like and share the tutorial. If you didn’t find it useful, please use the comments section below to let us know how we can do better next time.

Each week, a new AngularJS tutorial is added to our collection. Subscribe to our newsletter, like our Facebook fan page or follow us on Twitter to get free updates when the collection is updated.

Tutorial History

Tutorial version 1: Date Published 2015-09-19



...