Created
November 20, 2015 01:10
-
-
Save luisangelma/fdf653c3178554841ad5 to your computer and use it in GitHub Desktop.
Angular to-do + $http
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="mainApp"> | |
| <head> | |
| <title>Todo Angular</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> | |
| </head> | |
| <body ng-controller="mainController" ng-init="getTodos()"> | |
| <div class="grid"> | |
| <section class="add-todo"> | |
| <ul> | |
| <li> | |
| <label for="">Todo Name:</label> | |
| <input type="text" class="input" ng-model="todoItems.title"> | |
| </li> | |
| <li> | |
| <label for="">Todo Description:</label> | |
| <input type="text" class="input" ng-model="todoItems.description"> | |
| </li> | |
| <li> | |
| <label for="">Todo Price</label> | |
| <input type="text" class="input" ng-model="todoItems.price"> | |
| </li> | |
| <li> | |
| <label for="">Todo Image</label> | |
| <input type="text" class="input" ng-model="todoItems.image"> | |
| </li> | |
| <li> | |
| <input value="Add Todo" type="button" ng-click="addTodo(todoItems)"> | |
| </li> | |
| </ul> | |
| </section> | |
| <section class="show-todo"> | |
| <ul> | |
| <li ng-repeat="item in items"> | |
| <p>{{ item.title }}</p> | |
| <p>{{ item.description }}</p> | |
| <p>{{ item.price }}</p> | |
| </li> | |
| </ul> | |
| </section> | |
| </div><!-- /grid --> | |
| <script type="text/javascript"> | |
| var app = angular.module('mainApp', []); | |
| app.controller('mainController', ['$scope', '$http', 'todoList', function($scope, $http, todoList){ | |
| $scope.todoItems = {}; | |
| $scope.items = []; | |
| $scope.success = function(data) { | |
| $scope.items = data; | |
| }; | |
| $scope.error = function(err) { | |
| console.log('Todo error: ' + err); | |
| }; | |
| $scope.getTodos = function() { | |
| todoList.getItems($scope.success, $scope.error) | |
| }; | |
| $scope.addTodo = function(item) { | |
| todoList.addItem(item, $scope.getTodos, $scope.error); | |
| }; | |
| console.log($scope.items); | |
| }]); | |
| app.service('todoList', ['$http', function($http){ | |
| var self = this; | |
| var url = 'http://mean.codingcamp.us/todo/angelmarquez'; | |
| this.getItems = function(success, error) { | |
| $http.get(url).success(success).error(error); | |
| }; | |
| this.addItem = function(data, success, error) { | |
| var item = { | |
| title: data.title, | |
| description: data.description, | |
| price: data.price, | |
| imgUrl: data.image | |
| }; | |
| $http.post(url, item).success(success).error(error); | |
| }; | |
| }]); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment