Angular.js Tutorial

Intro

Disclaimer: The author just learned Angular and can no way be called an expert. Please put any corrections in our feedback box please!

NimbusBase can be used with Angular.js to create apps. Since Angular does not have a native "Model" that it uses, apps easily can bind on the NimbusBase variable 'Nimbus.angularService.watcher()' for change and use its own events for CRUD.

The code from this example is taken from To-do MVC on Angular and NimbusBase. You should look at this as a working example.

Before doing this tutorial, you should already have finished the main tutorial: here

NimbusBase setup

Set up the app and write code to authenticate via step 3 and step 4.

Creating a Angular compatible service

Let's create an angular service that we will use to store data and call later in our controller:

todomvc.factory('nimbusbaseStorage', Nimbus.angularService)

Using it in our controller

This code references the file todoCtrl.js

Before we store any data, we should add the service to the scope and initialize the model we want to store.

todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, nimbusbaseStorage, 
filterFilter) { ...

The scope variable todo is the one that is rendered. On initialization, populate it with the model and the data inside.

var todos = $scope.todos = []; //todos is the collection we are rendering	
...
function init(){ ...
	store = nimbusbaseStorage.setup(MODEL_NAME, ['title', 'completed'], function(){
	var data = store.all();
	for (var i = 0; i < data.length; i++) {
		todos.push(data[i]);
	};	
...
}

Setup up a watcher variable to trigger re-rendering

$scope.watcher = nimbusbaseStorage.makeWatcher(MODEL_NAME);
...
$scope.$watch('watcher()', function () {
	$scope.remainingCount = filterFilter(todos, {completed: false}).length;
	$scope.completedCount = todos.length - $scope.remainingCount;
	$scope.allChecked = !$scope.remainingCount;
}, true);

Binding to the existing CRUD events

To do CRUD events, just integrate the existing NimbusBase events and update the todo variable. Here's the example for add. To see ones for delete and others, just check the code for the todoCtrl.js.

$scope.addTodo = function () {
	if(!$scope.newTodo.length || !store){
		return;
	}
	var todo = store.create({
		title: $scope.newTodo,
		completed: false
	});
	todos.push(todo);
	$scope.newTodo = '';
};

Try Angular with NimbusBase