Introduction to AngularJS

Are you new to AngularJS? Good! Just because you’re reading this means you’re willing to jump onto the JavaScript train towards the future of web development. Over the past years, HTML5, CSS3 and JavaScript became a valuable alternative to desktop applications. This entire new trend also caused an entire wave of new JavaScript ideas, libraries and frameworks that are making JavaScript what it is today.
JavaScript is not only hip and trendy, it’s becoming mature as well.

In this small series (just three parts) I’m going to introduce you into the world of AngularJS. AngularJS is a framework by Google that allows you to write your code according to the ModelViewController pattern. If you’re already familiar with it, then you probably know that it allows you to design your application well and defining a good structure. It also makes it possible to decouple your view (HTML) from your logic (JavaScript) which makes it easy to test.

The application I’m going to build in this tutorial series will contain a controller, a filter, a factory and a directive, which are some of the basic (and even more advanced) features of AngularJS. But don’t worry, the complexity will only rise gradually. In the first tutorial we will just try to make a small app without having to worry about filters, factories or directives.
The app itself will show you a list of songs and give you the possibility to add new songs, to rate the songs and to delete them. And because we’re going to be using HTML5, we will store these inside the HTML5 Local Storage.

The code for the application is also available on Github, together with the full demo.

app-final

Introduction to AngularJS series

  1. Writing your first controller
  2. Filters and factories
  3. A rating directive
Tagged , , .

g00glen00b

Consultant at Cronos and Tech lead at Aquafin. Usually you can find me trying out new libraries and technologies. Loves both Java and JavaScript.

  • Majid Lotfi

    Hi,

    I downloaded your code it is missing the lib folder.

    • Majid Lotfi

      ohh, I forgot to do bower install to get the libs forlder, now I got this error :

      http://s3.postimg.org/g9obyd4xv/image.png

      thanks your help is appreciated.

      • It’s not able to find the Lodash library. I just noticed that in recent versions of Lodash the file was moved. Edit your Bower configuration file and replace the versions:{
        “name”: “angular-song-rate”,
        “version”: “0.0.1”,
        “dependencies”: {
        “angular”: “1.2.15”,
        “bootstrap”: “3.1.1”,
        “lodash”: “2.4.1”,
        “underscore.string”: “2.3.3”,
        “font-awesome”: “4.0.3”
        }
        }

        This should probably work (untested).

        • Majid Lotfi

          Thanks lot, it’s working now.