A different thought angular js part-3
Download as PPTX, PDF3 likes1,073 views
The document discusses AngularJS core services like $location and $http, creating custom services and directives. It provides an agenda that includes discussing core services like $location for getting URL information and $http for making HTTP requests. It then discusses creating a custom TODO service and a keyEnter directive. It encourages reviewing the sample TODO application integrated with a REST API on GitHub for examples of implementing these concepts.
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-10-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-11-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-12-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-14-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-15-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-16-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-18-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-19-320.jpg)
![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);](https://image.slidesharecdn.com/adifferentthought-angularjspart-3-150526074357-lva1-app6892/85/A-different-thought-angular-js-part-3-20-320.jpg)
A different thought angular js part-3
- 1. A Different Thought AngularJS Part-3
- 2. Agenda
- 4. Agenda 1. Core Service a. $location
- 5. Agenda 1. Core Service a. $location b. $http
- 6. Agenda 1. Core Service a. $location b. $http 2. Custom Service
- 7. Agenda 1. Core Service a. $location b. $http 2. Custom Service 3. Custom Directive
- 8. Agenda 1. Core Service a. $location b. $http 2. Custom Service 3. Custom Directive 4. Integrate TODO app with REST API
- 9. About Me Amit Thakkar Tech Blogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
- 10. 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);
- 11. 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);
- 12. 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);
- 13. You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 14. 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);
- 15. 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);
- 16. 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);
- 17. You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 18. 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);
- 19. 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);
- 20. 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);
- 21. You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 22. 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
- 23. 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
- 24. 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
- 25. You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 26. TODO App with RESP API You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 27. Questions??