You will learn following topics in this tutorial

  • What a view is in angularjs
  • Creating controllers to manage views
  • Declaring properties and methods in a controller
  • Binding to properties and expressions in an angularjs template
  • Best practices for creating views and controllers and how to test them

In this Tutorial, we’ll get into the most fundamental and important facet in angularjs. You’ll learn what views and controllers are in angularjs, and more importantly the relationship that they have with each other. There may be some edge case that we haven’t considered but by our approximation, everything in angularjs is designed to either support views and controllers, or to extend their functionality.

The goal of this Tutorial is to build out the Story sharing view in Angello, as seen in pic below This Story sharing view will give you plenty of opportunities to learn how a view works in angularjs and how you can control that view with a controller. You’ll learn how to take an array of JavaScript objects and display them as user stories, and then how to create, update, and delete items in the user story collection by exposing that functionality via the controller.

The Story sharing view

In Angello, we’re binding to an array of story objects in order to display them in the view, but we could just as easily bind to an array of song objects and display a playlist or an array of ingredients to make a recipe. You can literally take any collection of values and display them with an angularjs template. Using built-in angularjs directives, you can capture user interactions and then modify the collection by adding, updating, or deleting items within the collection