{"id":17137427,"url":"https://github.com/easingthemes/restapi-angular","last_synced_at":"2025-03-24T07:16:24.249Z","repository":{"id":26688322,"uuid":"30145186","full_name":"easingthemes/restapi-angular","owner":"easingthemes","description":"Restapi clone with angular","archived":false,"fork":false,"pushed_at":"2015-02-01T20:45:39.000Z","size":272,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-16T21:23:09.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easingthemes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-01T12:16:45.000Z","updated_at":"2015-02-01T20:45:39.000Z","dependencies_parsed_at":"2022-08-25T22:20:31.774Z","dependency_job_id":null,"html_url":"https://github.com/easingthemes/restapi-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easingthemes%2Frestapi-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easingthemes%2Frestapi-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easingthemes%2Frestapi-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easingthemes%2Frestapi-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easingthemes","download_url":"https://codeload.github.com/easingthemes/restapi-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245224582,"owners_count":20580367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T20:07:00.986Z","updated_at":"2025-03-24T07:16:24.224Z","avatar_url":"https://github.com/easingthemes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##Restapi on angular\nStep 1: Intro in MEAN stack with app on jQuery - https://github.com/easingthemes/restapi\nStep 2: Replacing jQuery with Angular, real MEAN stack - this repo.\n\n## If you want to try it\nStart mongodb\n```\nmongod\n```\nstart project\n```\ngit clone https://github.com/easingthemes/restapi-angular.git\ncd restapi-angular\nnpm install\ngrunt serve\n```\n## If you want to learn\nFollow this readme and build your app from scratch.\n\n## Angular\n1.Add files, for now keep jquery:\n```\n\u003cscript type=\"text/javascript\" src=\"lib/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"lib/jquery-1.11.2.min.js\"\u003e\u003c/script\u003e\n```\n2.Name your app:\n```\n\u003cbody ng-app=\"Restapi\"\u003e\n```\n\n3.Create some partials: header.html, footer.html and home.html\n```\n  \u003cheader  ng-include=\"'partials/header.html'\" scope=\"\" onload=\"\"\u003e\u003c/header\u003e\n\n  \u003cfooter  ng-include=\"'partials/footer.html'\" scope=\"\" onload=\"\"\u003e\u003c/footer\u003e\n```\n4.Initialize main app.js\n```\nangular.module('Restapi', []);\n```\n:: You should see **header** and **footer** now.\n5.ROUTES\n```\nangular.module('Restapi', [ \n  'ngRoute' \n])\n/** * Configure the Routes */ \n.config(['$routeProvider', function ($routeProvider) { \n  $routeProvider \n  // Home \n  .when(\"/\", {\n    templateUrl: \"partials/home.html\"\n  })\n}]);\n```\n6.Add `ngRoute` to index.html\n```\n\u003cscript type=\"text/javascript\" src=\"lib/angular-route.min.js\"\u003e\u003c/script\u003e\n```\n7.Add ng-view for rendering home route\n```\n\u003csection  ng-view=\"\"\u003e\u003c/section\u003e\n```\n8.You should see whole page as with jQuery.\n\n\nYou just created basic angular page with Partials and Routes\n\n\n## CLIENT: use created CRUD functions from frontend\n\n#### ROUTER: Remember API router?\n```\nrouter.get('/', controller.index);\nrouter.get('/:id', controller.show);\nrouter.post('/', controller.create);\nrouter.put('/:id', controller.update);\nrouter.patch('/:id', controller.update);\nrouter.delete('/:id', controller.delete);\n```\n\n```\n## CRUD - jQuery to Angular\n\n###READ\n\n####jQuery: \n* app.js\n```\nshowPosts: function(){\n  //READ: get all items from API uri\n  $.get('/api/items', function(data) {\n    $.each(data, function(index, val) {\n      $('\u003cli id=\"'+val._id+'\"\u003e\u003cp\u003e'+val.title+'\u003c/p\u003e \u003ca href=\"\"\u003edelete\u003c/a\u003e\u003c/li\u003e').appendTo('ul');\n    });\n  });\n}\n```\n* index.html\n```\n\u003cdiv\u003e\n  \u003ch2\u003eRead \u003cspan\u003eDelete\u003c/span\u003e\u003c/h2\u003e\n  \u003cul\u003e\u003c/ul\u003e\n\u003c/div\u003e\n```\n\nBasicly with jQuery we used AJAX to get data and then we builded DOM and appened it to `ul` in index.html. We also used `$.each` to create all items.\n\n####Angular:\n\nIn Angular we are going to use controller to comunicate with API\n\n5.CONTROLER: controller.js\n```\nangular.module('Restapi')\n/** * Controls the Pages */ \n.controller('ItemsCtrl', function ($scope, $location, $http) {\n\n    $http.get('/api/items').\n      success(function(data, status, headers, config) {\n            $scope.items = data;\n    });\n        \n});\n```\n6.Add controller.js file\n```\n\u003cscript src=\"js/controllers.js\"\u003e\u003c/script\u003e\n```\n\nThen we are going to build DOM directlly with `ng-repeat`\n\n7.READ data: home.html\n```\n\u003cdiv ng-controller=\"PageCtrl\"\u003e\n  \u003ch2\u003eRead \u003cspan\u003eDelete\u003c/span\u003e\u003c/h2\u003e\n  \u003cul\u003e\n      \u003cli ng-repeat=\"item in items\" id=\"{{ item._id }}\"\u003e\u003cp\u003e{{ item.title }}\u003c/p\u003e \u003cbutton class=\"delete\"\u003edelete\u003c/button\u003e\u003c/li\u003e\n   \u003c/ul\u003e\n\u003c/div\u003e\n```\nWe replaced READ part from jQuery with Angular\n\n###DELETE\n####jQuery\n```\n  deletePost: function(itemId){\n    //DELETE: delete item\n    $.ajax({\n      url: '/api/items/'+itemId,\n      type: 'DELETE'\n    });\n  },\n```\nand event:\n```\n$(document).on('click', '.delete', function(event) {\n  event.preventDefault();\n  app.deletePost($(this).parent().attr('id'));\n});\n```\n####Angular:\n1.Use controller\n```\n.controller('ItemsCtrl', function ($scope, $location, $http) {\n\n    $http.get('/api/items').\n      success(function(data, status, headers, config) {\n            $scope.items = data;\n    })\n    $scope.deleteItem = function(item) {\n        $http.delete('/api/items/' + item._id);\n    };\n\n});\n```\n2.Add event\n```\n\u003cbutton class=\"delete\" ng-click=\"deleteItem(item)\"\u003edelete\u003c/button\u003e\n```\n\nWe replaced DELETE part from jQuery with Angular\n\n###CREATE:\n####jQuery\n```\ncreatePost: function(data){\n  //CREATE: create new item\n  $.ajax({\n    url: '/api/items',\n    type: 'POST',\n    contentType: 'application/json',\n    dataType: 'json',\n    data: data\n  })\n  .done(function(data) {\n    $('\u003cli id=\"'+data._id+'\"\u003e\u003cp\u003e'+data.title+'\u003c/p\u003e \u003cbutton class=\"delete\"\u003edelete\u003c/button\u003e\u003c/li\u003e').appendTo('section \u003e div \u003e ul');\n    app.checkItems();\n  });\n},\n```\nEvent:\n```\n$(document).on('click', '.create', function(event) {\n  event.preventDefault();\n  var itemTitle = $('input').val();\n  var itemContent = $('textarea').val();\n  var jsonItem = JSON.stringify({title: itemTitle, content: itemContent});\n  app.createPost(jsonItem);\n});\n```\n####Angular\n1.Use controller:\n```\n$scope.addItem = function() {\n    $http.post('/api/items', { \n        title: $scope.itemTitle,\n        content: $scope.itemContent\n    });\n};  \n```\n2. Add event:\n```\n\u003ch2\u003eCreate\u003c/h2\u003e\n\u003cinput type=\"text\" placeholder=\"Enter item Title\" ng-model=\"itemTitle\"\u003e\n\u003ctextarea placeholder=\"Enter item Content\" ng-model=\"itemContent\"\u003e\u003c/textarea\u003e\n\u003cbutton class=\"create\" type=\"submit\" ng-click=\"addItem()\"\u003ecreate\u003c/button\u003e\n```\nWe replaced CREATE part from jQuery with Angular\n\n###UPDATE:\n####jQuery\n```\n  updatePost: function(itemId, newData){\n    //UPDATE: update item\n    $.ajax({\n      url: '/api/items/'+itemId,\n      type: 'PUT',\n      contentType: 'application/json',\n      dataType: 'json',\n      data: newData\n    })\n    .done(function(data) {\n      $('#'+data._id+' p').text(data.title);\n    });\n  },\n```\nEvent:\n```\n$(document).on('click', 'article .update', function(event) {\n  var newTitle = $(this).siblings('h3').text();\n  var newContent = $(this).siblings('div').text();\n  var jsonItem = JSON.stringify({title: newTitle, content: newContent});\n  app.updatePost($(this).parent().data('id'), jsonItem);\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasingthemes%2Frestapi-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasingthemes%2Frestapi-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasingthemes%2Frestapi-angular/lists"}