JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

    <form name="myForm" novalidate>
        <div class="control-group" ng-class="{error: myForm.FirstName.$invalid}">
            <label>Last Name</label>
            <input type="text" name="FirstName" ng-model="employeesApp.FirstName" required>
            <span ng-show="myForm.FirstName.$error.required" class="help-inline" style="color: red;">Required</span>

        </div>



        <div class="control-group" ng-class="{error: myForm.FullName.$invalid}">
            <label>First Name</label>
            <input type="text" name="FullName" ng-model="employeesApp.FullName" required>
            <span ng-show="myForm.FullName.$error.required" class="help-inline" style="color: red;">Required</span>

        </div>
        <div class="control-group" ng-class="{error: myForm.Company.$invalid}">
            <label>Company</label>
            <input type="text" name="Company" ng-model="employeesApp.Company" required>
            <span ng-show="myForm.Company.$error.required" class="help-inline" style="color: red;">Required</span>

        </div>
        <div class="control-group" ng-class="{error: myForm.WorkPhone.$invalid}">
            <label>Business Phone</label>
            <input type="number" name="WorkPhone" ng-model="employeesApp.WorkPhone" required>
            <span ng-show="myForm.WorkPhone.$error.required" class="help-inline" style="color: red;">Required</span>

        </div>
        <div class="control-group" ng-class="{error: myForm.HomePhone.$invalid}">
            <label>Home Phone</label>
            <input type="number" name="HomePhone" ng-model="employeesApp.HomePhone" required>
            <span ng-show="myForm.HomePhone.$error.required" class="help-inline" style="color: red;">Required</span>

        </div>
        <div class="control-group" ng-class="{error: myForm.Email.$invalid}">
            <label>Email</label>
            <input type="email"...

JavaScript

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


employeesApp.config(function ($routeProvider) {

    $routeProvider
      .when('/', {
          controller: 'EmployeesController',
          templateUrl: 'partials/list.html'


      })
      .when('/edit/:employeeId', {
          controller: 'EditCtrl',
          templateUrl: 'partials/edit.html'
      })
      .when('/new', {
          controller: 'CreateCtrl',
          templateUrl: 'partials/detail.html'
      })
      .otherwise({
          redirectTo: '/'
      });
});

employeesApp.factory('employeeListService', function ($http) {
    return {
        getEmployees: function (successcb, errorcb) {

            $http(
            {
                method: "GET",
                url: "http://mum-vhd-316/HR/_api/web/lists/getByTitle('Employee')/items",
                headers: { "Accept": "application/json;odata=verbose" }
            }
            ).success(function (data, status, headers, config) {

                successcb(data.d.results);
            }).error(function (data, status, headers, config) {

                errorcb(status);
            });
        }

    }
}
);



employeesApp.controller('EmployeesController',
function ($scope, $http, employeeListService) {

    employeeListService.getEmployees(
    function (data) {

        $scope.Employees = data
    },
    function () {

        alert('error');
    }
    );
}
);

employeesApp.controller('CreateCtrl',
function ($scope, $http, employeeListService) {
    $scope.save = function () {

        var item = {
            "__metadata": {
                "type": "SP.Data.EmployeeListItem"
            },
            "FirstName": $scope.employeesApp.FirstName,
            "FullName": $scope.employeesApp.FullName,
            "Company": $scope.employeesApp.Company,
            "WorkPhone": $scope.employeesApp.WorkPhone.toString(),
            "HomePhone": $scope.employeesApp.HomePhone.toString(),
            "Email":...