AngularJS Services - Pass object between views/controllers

Question

I'm struggling to understand the concept of AngularJS services, I'm relatively new to AngularJS.

I'm essentially trying to pass a nested object between two controllers/views.

So I have this section in my home page partial that will have the project and task.

homePage.html

<div class="col-8" ng-repeat = "item in toDoList">
    <h4>{{item.project}}</h4>
    <p>{{item.task}}.</p>
</div>

Then I have this section from the new item partial, which is where the new to do task is added.

newitem.html

<form class="form" ng-submit="addNewToDoTask()">
    <div class="row projectInput text-center">
        <div class="col-12">
            <input type="text" ng-model="projectInput"
                   placeholder="Enter a project title">
        </div>
    </div>
    <div class="row taskInput text-center">
        <div class="col-12">
            <input type="text" ng-model="taskInput"
                   placeholder="Enter your task details">
        </div>
    </div>

    <button type="submit" class="btn-lg btn-success addItemButton">Add</button>
    <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
</form>

This is my app.module.js

var app = angular.module('ToDoListApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider
        .when("/", {
            templateUrl: "app/home/homePage.html",
        })
        .when("/newItem", {
            templateUrl: "app/newItem/newitem.html",
        })
        .otherwise({
            redirectTo: '/'
        });
});

controller for home page

app.controller('homePageCtrl', function ($scope) {

});

controller for new item page

app.controller('newItemCtrl', function ($scope) {

    $scope.toDoList = [{
        project: null,
        task: null,
        done: false
    }];

    $scope.addNewToDoTask = function () {
        $scope.toDoList.push({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

service to persist data across views

app.service('newToDoTaskService', function () {

});

So essentially when the form is submitted on the new item page, it will push a new object into the toDoList array, with the corresponding input values.

What I then want to do, is use the project and task values from that object, to populate the H4 and p tags on the home page.

I know a good way of achieving this is to use a service, I'm just struggling to understand the concept even after reading the documentation.

If someone could explain how I achieve this and breakdown the process, I would really appreciate it.

It's also worth mentioning clicking the add or cancel buttons on the new item page, will navigate you back to the home page.

Thanks

Answer 1

example service to persist data across views

app.service('taskService', function () {
    var taskArr = [];
    this.getTasks = function() {
        return taskArr;
    };
    this.addTask = function(task) {
        taskArr.push(task)
    };
});

To use, inject into the controller:

controller for new item page

app.controller('newItemCtrl', function ($scope, taskService) {

    $scope.addNewToDoTask = function () {
        taskService.addTask({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

controller for home page

app.controller('homePageCtrl', function ($scope, taskService) {

    $scope.toDoList = taskService.getTasks();

});

For more information, see

• AngularJS Developer Guide - Creating Services