<!DOCTYPE html> <html> <head> <title>Access Data From HTML</title> </head> <body ng-app="app" ng-controller="TodoCtrl as todoCtrl"> <div ng-repeat="todo in todoCtrl.todos"> {{todo.item}} </div> <form> <input type="text" ng-model="newTodo"/> <input type="submit" ng-click="todoCtrl.addTodo(newTodo)"/> </form> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> </body> </html>
/** * Created by Answer1215 on 11/29/2014. */ function ToDoServices($q, $timeout) { var ToDoServices = {}; ToDoServices.getTodos = function() { return $q(function(resolve, reject) { $timeout(function() { resolve( { todos: [ {item: "Clean room", done: false}, {item: "Eat lunch", done: false}, {item: "Wash car", done: false} ] } ) }, 500); }); }; ToDoServices.addTodo = function(item) { this.todos.push({item: item, done: false}) } return ToDoServices; } function TodoCtrl(ToDoServices) { var vm = this; vm.todos = []; vm.getTodos = ToDoServices.getTodos; vm.addTodo = ToDoServices.addTodo; vm.getTodos(vm.isReject).then(function(res) { vm.todos = res.todos; }); } angular.module("app", []) .factory("ToDoServices", ToDoServices) .controller("TodoCtrl", TodoCtrl);