JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="projectsApp" ng-controller="ProjectsCtrl as ctrl">
    <form ng-submit="ctrl.addProject()">
        <input type="text" ng-model="ctrl.new_project.name" placeholder="Project Name">
    </form>
    <hr>
    <ul>
        <li ng-repeat="p in ctrl.projects">{{p.name}}</li>
    </ul>
</div>

JavaScript

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

app.factory('Service', function () {
    var service = {
        projects: [],
        getProjects: getProjects,
        addProject: addProject
    }

    return service;

    function getProjects() {
        return service.projects;
    }

    function addProject(project) {
        // make request and if successful then push new projet
        service.projects.push(project);
    }

})

app.controller('ProjectsCtrl', function (Service) {
    var vm = this;

    vm.new_project = {};
    vm.addProject = addProject;

    init();

    function init() {
        vm.projects = Service.projects;
    }

    function addProject() {
        Service.addProject(vm.new_project);
        vm.new_project = {};
    }
})