a different thought angular js part-3
TRANSCRIPT
A Different ThoughtAngularJS Part-3
Agenda
Agenda
1. Core Service
Agenda
1. Core Servicea. $location
Agenda
1. Core Servicea. $locationb. $http
Agenda
1. Core Servicea. $locationb. $http
2. Custom Service
Agenda
1. Core Servicea. $locationb. $http
2. Custom Service3. Custom Directive
Agenda
1. Core Servicea. $locationb. $http
2. Custom Service3. Custom Directive4. Integrate TODO app with REST API
About Me
Amit ThakkarTech Blogger @ CodeChutney.inJavaScript LoverWorking on MEAN Stack
Twitter: @amit_thakkar01LinkedIn: linkedin.com/in/amitthakkar01Facebook: facebook.com/amit.thakkar01
Core Services - $location
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$location", function ($location) { console.log($location.$$absUrl == "http://localhost:3000/TODO.html"); // true console.log($location.$$host == "localhost"); // true console.log($location.$$port == 3000); // true }]);})(angular);
Core Services - $location
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$location", function ($location) { console.log($location.$$absUrl == "http://localhost:3000/TODO.html"); // true console.log($location.$$host == "localhost"); // true console.log($location.$$port == 3000); // true }]);})(angular);
Core Services - $location
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$location", function ($location) { console.log($location.$$absUrl == "http://localhost:3000/TODO.html"); // true console.log($location.$$host == "localhost"); // true console.log($location.$$port == 3000); // true }]);})(angular);
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
Core Services - $http
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$http", function ($http) { $http.get("todo") .success(function (todo) { todoController.tasks = todo; }) .error(function (error) { // Handle error here. console.log(error); }); }]);})(angular);
Core Services - $http
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$http", function ($http) { $http.get("todo") .success(function (todo) { todoController.tasks = todo; }) .error(function (error) { // Handle error here. console.log(error); }); }]);})(angular);
Core Services - $http
(function (ng) { var todoApp = ng.module("todo", []); todoApp.controller("TODOController", ["$http", function ($http) { $http.get("todo") .success(function (todo) { todoController.tasks = todo; }) .error(function (error) { // Handle error here. console.log(error); }); }]);})(angular);
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
Custom Services - TodoService
(function (ng) { var todoApp = ng.module("todo"); todoApp.service("TODOService", ["$http", function ($http) { var API_URL = "todo"; var todoService = this; todoService.getTODOList = function () { return $http.get(API_URL); }; }]);})(angular);
Custom Services - TodoService
(function (ng) { var todoApp = ng.module("todo"); todoApp.service("TODOService", ["$http", function ($http) { var API_URL = "todo"; var todoService = this; todoService.getTODOList = function () { return $http.get(API_URL); }; }]);})(angular);
Custom Services - TodoService
(function (ng) { var todoApp = ng.module("todo"); todoApp.service("TODOService", ["$http", function ($http) { var API_URL = "todo"; var todoService = this; todoService.getTODOList = function () { return $http.get(API_URL); }; }]);})(angular);
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
var todoApp = ng.module("todo");todoApp.directive("keyEnter", function () { return { link: function (scope, element, attrs) { element.bind("keyup", function (event) { if (event.which === 13) { scope.$apply(function () { scope.$eval(attrs.keyEnter); }); event.preventDefault(); } }); } };});
Custom Directive - keyEnter
var todoApp = ng.module("todo");todoApp.directive("keyEnter", function () { return { link: function (scope, element, attrs) { element.bind("keyup", function (event) { if (event.which === 13) { scope.$apply(function () { scope.$eval(attrs.keyEnter); }); event.preventDefault(); } }); } };});
Custom Directive - keyEnter
var todoApp = ng.module("todo");todoApp.directive("keyEnter", function () { return { link: function (scope, element, attrs) { element.bind("keyup", function (event) { if (event.which === 13) { scope.$apply(function () { scope.$eval(attrs.keyEnter); }); event.preventDefault(); } }); } };});
Custom Directive - keyEnter
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
TODO App with RESP API
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
Questions??
