AngularJS Fundamentals

Author: Elliot Forbes | Posted at: 14.04.2017 20:27

AngularJS is a web framework designed and built by Google for the main purpose of building web apps. It provides automatic 2 way data-binding and eliminates the need to manually manipulate the DOM. This is exceptionally useful as it allows developers to focus purely on the business logic behind their applications as opposed to tedious boilerplate code.

The models that angularjs uses are plain old javascript objects, this again makes it far easier to test, maintain and reuse.

Overall it’s a hugely popular framework that has seen a huge rise in adoption in financial institutions and tech companies due to its relative ease of use and the power that it brings to the table.

Who is this Course For?

This course is designed to take someone that has knowledge of Javascript and set them on the right path to creating their own web applications.

You will require:

  • A Text Editor - I recommend Visual Studio Code

Course Content

In this course I’ll be demonstrating the absolute fundamentals to developing applications with AngularJS 1.X. We’ll begin by creating a very simple admin application that will perform multiple tasks such as consuming RESTful APIs, Lazy Loading articles and more.

We’ll begin by creating some very simple Single Page Applications or SPAs and then build up on these until we’ve covered everything you need in order to develop your own web applications using the AngularJS framework.

1

AngularJS Scope and Scope Inheritance

Scopes are what allow us to manipulate data in the backend controller and have that data reflected instantaneously in the frontend. Scopes provide APIs which what any objects we define and then when they detect changes, they propogate these changes through the system.

Read Now
3

AngularJS Controllers Tutorial

Controllers are what we typically use to define our web application’s behavior. They should be used to manipulate our $scope objects and pull all of our applications together.

Read Now
4

AngularJS Directives Tutorial

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Read Now
5

AngularJS Event Handling Tutorial

One of the best features of AngularJS is the fact it abstracts away from you all the complex event handling code that you would typically deal with using other frameworks such as JQuery. In this section of the course we look at the numerous ways you can easily handle events in your AngularJS Applications:

Read Now
6

AngularJS Form Validation Tutorial

In this section we'll be looking at how we can effectively work with forms.

Read Now
7

AngularJS Filters Tutorial

By definition filters select a subset of items from an array and returns it as a new array. For front-end applications this can be a very powerful tool that helps us to manipulate the data we've got into a format that suits our needs.

8

AngularJS $http Tutorial

Here we'll look at how you can utilize AngularJS's $http Service in order to communicate with servers and REST APIs using the browsers XMLHttpRequest object or JSONP.

Read Now

Factories and Services

In this section we’ll examine how to create and use AngularJS Factories and Services.

Routing

AngularJS’s routing functionality gives us the ability to have a single master page in which we dynamically load in the necessary views that we need. In this section we’ll explore the power of the ng-view directive and the $routeProvider service.

An interesting problem that comes up with regards to routing is how to pass data between route changes. Say for instance you want to pass form submission data to the next stage of an application, one of the best and easiest ways to do this is using a storage service. In this tutorial we look at exactly how we can implement this:

AngularJS Promises

In this section of the course we look at how we can effectively use AngularJS’s $q promise service:

Project Structure

The structure you choose for your project is hugely important. Having a clear, consise structure from the get go can help you to no end further down the line. In this section of the course we look at the just how you should structure your angularjs applications so that they can be easily maintained and extended.

Working with AngularJS Component Based Applications

In this section of the course we look at how you can effectively work with an extend angularjs applications that follow a component based architecture. We see how to define our own component, controller and any necessary routes needed for a new page within an existing application.

Automating Your AngularJS Workflow with Gulp

This section of the course looks at the build tools we can use to make our life a little easier as AngularJS devs.

Miscellaneous Tutorials

Become a Contributor!

Think you could improve the articles on this site? Feel free to submit a pull request to the sites github repo.