AngularJS - Ajax

Using $

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-app="myApp">

    <div class="container">
    
      <div ng-controller="MainCtrl" >
          
          <h1>$http usage</h1>
          
          <div ng-show="data.items.length" class="ng-cloak">
              <p>To do items:</p>
              <ul>
                  <li ng-repeat="item in data.items">
                      {{item.title}}
                      <!-- Ability to remove an item from the list
                      <a href="#" ng-click="removeItem($index)">Remove</a>
                      -->
                  </li>
              </ul>
          </div>
          
          <form name="itemForm" ng-submit="submitForm()">
              
              <h2>Add an item</h2>

              <div class="form-group">
                  <input type="text" ng-model="item.title" name="title" placeholder="Title" class="form-control" required  ng-minlength="3" />
                  
                  <span ng-show="itemForm.title.$invalid">
                      This title is not valid.
                  </span>
                  
                  <span ng-show="itemForm.title.$error.required">
                      Please enter a title.
                  </span>
                  
                  <span ng-show="itemForm.title.$error.minlength">
                      Title must be at least 3 characters long.
                  </span>
                  
              </div>
              
              <div class="form-group">
                  <label>Description</label>
                  <textarea ng-model="item.description" name="description" class="form-control" ></textarea>
              </div>
              
              <div class="form-group">
                  <label>Due on</label>
         ...

CSS

.ng-cloak,
      form span{
        display:none;
      }

      form.ng-dirty span{
        display:inline;
      }

      form {
        border:1px solid #ececec;
        border-radius: 5px;
        margin:10px;
        padding:10px;
      }

JavaScript

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

myApp.factory('ItemService', ['$http', function($http) {

	var items = [];

	return {

		list: function() {

			return $http.get('http://jsonplaceholder.typicode.com/todos');

		}

	}

}]);

myApp.controller('MainCtrl', ['$scope', 'ItemService', function($scope, ItemService) {

	$scope.data = {
		items: []
	};

	ItemService.list().then(function(response) {

		$scope.data.items = response.data;

	}, function(err) {

		console.log("Something went wrong");

	});
    
    // form submission handler
	$scope.submitForm = function() {

		// add new todo item
		//ItemService.add($scope.item);

		// flush the form
		$scope.item = {};
		$scope.itemForm.$setPristine();

	}
    
	/*// Ability to remove an item from the list
	$scope.removeItem = function(index) {

		$scope.data.items.splice(index, 1);

	};*/
    
}]);