News & Tips

Blog archive

Get Into Angular: 3 of the Best Angular Tutorials We’ve Found

The more Web design you do, the more likely it is you’re going to need or want to use Angular. It certainly helps streamline your front-end web application development, and simplifies some of the loading challenges with single-page apps. Thankfully, there are some excellent tutorials out there in the blog world. Here’s a look at some promising tutorial sites we’ve found:

Angular: Tour of Heroes Tutorial

Directly from the Angular creators themselves, the Tour of Heroes app and the complementary tutorial covers all the fundamentals. This tutorial takes you through the basic steps of building this app that demonstrates what Angular can bring to the table, including, “acquiring and displaying a list of heroes, editing a selected hero's detail, and navigating among different views of heroic data."

The tutorial introduction continues, describing some of the steps you'll take. "You'll use built-in directives to show and hide elements and display lists of hero data. You'll create components to display hero details and show an array of heroes. You'll use one-way data binding for read-only data. You'll add editable fields to update a model with two-way data binding. You'll bind component methods to user events, like keystrokes and clicks. You'll enable users to select a hero from a master list and edit that hero in the details view. You'll format data with pipes. You'll create a shared service to assemble the heroes. And you'll use routing to navigate among different views and their components. You'll learn enough core Angular to get started and gain confidence that Angular can do whatever you need it to do. You'll cover a lot of ground at an introductory level, and you'll find many links to pages with greater depth."

Guru99: AngularJS http, Ajax Tutorial

We have run into this site before, and if you haven't yet, this one is well worth a look. This site hosts a number of tutorials that take you by the hand, in a clearly outlined step-by-step fashion. Each major step is illustrated with examples and definitions. It starts off with a brief definition of Angular, sets the context, and defines some of the challenges it addresses. He writes, "AngularJS http, Ajax Tutorial: AJAX is the short form of Asynchronous JavaScript and XML. AJAX was primarily designed for updating parts of a web page, without reloading the whole page. The reason for designing this technology was to reduce the number of round trips which were made between the client and the server and the number of entire page refresh which used to take place whenever a user required certain information. AJAX allowed web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This meant that it was possible to update parts of a web page, without reloading the whole page. Many modern day web applications actually follow this technique for refreshing the page or getting data from the server."

Then the tutorial launches into high level server interactions using $resource, low-level server interactions using $http, and retrieving data from any server running SQL and MySQL.

Thinkster: A Better Way to Learn AngularJS

Getting into Angular is not without its speed bumps. This tutorial aims to smooth the process. And the introduction is brilliantly composed. "The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. However, building more complex apps often require understanding Angular's inner workings. Failure to do so will cause development to become awkward and cumbersome. With AngularJS, the 'Ready, Fire, Aim' learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. This curriculum is designed to properly guide you through each of the key Angular concepts thoroughly with a broad exposure to high quality content. With your eventual mastery of AngularJS, you will be able to fluently and efficiently construct large-scale applications."

This tutorial suggests you should already be familiar with HTML, CSS, and JavaScript; you know most of the basic concepts of the Model-View-Controller (MVC) construct; the Document Object Model (DOM); JavaScript functions, events, and error handling. If you've got that under your belt, you’re ready to rock.

There's also a clearly labeled link to A Better Way to Learn Angular 2, if you’re already ready to move on. That page describes Angular 2 as "truly a better Angular. It has replaced a lot of the old cruft that was present in Angular 1 and also exceeds the capabilities of other competing frameworks. However, Angular 2 is completely different than Angular 1." We'll give you a rundown of Angular 2 tutorials in a future post.

Posted by Lafe Low on 10/05/2017 at 2:25 PM


Upcoming Events