I'm finding it difficult to grasp the concept of AngularJS services as I am fairly new to AngularJS.
My goal is to pass a nested object between two controllers/views.
In my home page partial, I have a section that displays the project and task.
homePage.html
<div class="col-8" ng-repeat = "item in toDoList">
<h4>{{item.project}}</h4>
<p>{{item.task}}.</p>
</div>
And here is the section from the new item partial where users can add a new to-do task.
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>
Here 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 () {
});
After submitting the form on the new item page, a new object is added to the toDoList array with the input values.
The next step is to use the project and task values from that object to populate the H4 and p tags on the home page.
Using a service seems like the best way to achieve this, but I need help understanding the concept even after reading the documentation.
If someone could explain how to accomplish this and break down the process, I would greatly appreciate it.
It's important to note that clicking the add or cancel buttons on the new item page will navigate you back to the home page.
Thank you