A different thought angular js part-3

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??

References:Service in AngularJS