{"id":13340368,"url":"https://github.com/skepee/HTML2Angular-migration-example","last_synced_at":"2025-03-11T17:31:00.233Z","repository":{"id":49259949,"uuid":"273283301","full_name":"skepee/HTML2Angular-migration-example","owner":"skepee","description":"Html to Angular refactoring","archived":true,"fork":false,"pushed_at":"2021-06-22T10:39:03.000Z","size":5031,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-07-30T20:59:48.922Z","etag":null,"topics":["angular","angular-cli9","css","html5","javascript","jquery","nodejs","npm","npm-package","typescript","visual-studio-code"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/skepee.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":"2020-06-18T16:08:54.000Z","updated_at":"2022-12-29T09:53:28.000Z","dependencies_parsed_at":"2022-08-30T01:40:14.102Z","dependency_job_id":null,"html_url":"https://github.com/skepee/HTML2Angular-migration-example","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/skepee%2FHTML2Angular-migration-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skepee%2FHTML2Angular-migration-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skepee%2FHTML2Angular-migration-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skepee%2FHTML2Angular-migration-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skepee","download_url":"https://codeload.github.com/skepee/HTML2Angular-migration-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221238812,"owners_count":16782744,"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":["angular","angular-cli9","css","html5","javascript","jquery","nodejs","npm","npm-package","typescript","visual-studio-code"],"created_at":"2024-07-29T19:22:32.570Z","updated_at":"2024-10-23T21:31:21.168Z","avatar_url":"https://github.com/skepee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# From HTML, JQuery, Bootstrap to Angular, TypeScript, Ngx-Bootstrap, Json\n\n\n## Description \nThis is an example of migration from one block single HTML page to Angular components. Data are supposed to be retrieved from json. Part of the migration is also to design the structure of json.\n\nWhat we want to do is showed in this image:\n![Objective](https://github.com/skepee/BYH-Angular/blob/master/description/Slide3.PNG)\n\n\n\n## HTML page\nLet us consider a simple HTML page to book holidays. An example of how it works can be found here:\n\n[Dribbble](https://dribbble.com/shots/5043578-Book-your-holidays-with-parallax)\n\n[Pinterest](https://www.pinterest.co.uk/pin/800655639979829791/)\n\nBasically it is a simple page with three different destinations for holidays.\nMoreover, show/hide panels are used to choose three different type of breakfast (one on them) and up to three different type of sightseeing.\n\nTechnically is formed by  a single html page and an external CSS file. That's it.\n\n\n## Angular process migration\n\nLet's start to migrate the booking holidays page in an Angular app.\n\n# Migration process\nThe migration can be summarized in the following steps:\n\n## 1. Component design\nThe migration starts from a design of the new page. Let's identify which are our potential components of our angular app.\n\nAngular components are in this way designed:\n\n![Component design](https://github.com/skepee/BYH-Angular/blob/master/description/Slide1.PNG)\n\n## 2. Json \nData are supposed come from Json, not existing in the old HTML. This is the structure of our Json data: \n\n```json\n[\n  {\n    \"destination\":{\n      \"cardId\": number,\n      \"title\": string,\n      \"description\": string,\n      \"imageUrl\": string\n    },\n    \"statistics\":string[],\n    \"info\":string[],\n    \"services\":string[],\n    \"booking\":\n    {\n      \"roundTripImage\":string,\n      \"breakFast\":\n      {\n        \"items\":string[],\n        \"imageUrl\":string\n      },     \n      \"placesToVisit\":\n      {\n        \"items\":string[],\n        \"imageUrl\":string\n      }\n    }\n  }\n  ]  \n```\n\n\n## 3. Angular Interface\nNow it is possible to design our interfaces in this way:\n\n```angular\nexport interface IDestination{\n  cardId:number;\n  title: string;\n  description: string;\n  imageUrl: string;  \n}\n\nexport interface ICard {\n  destination: IDestination;\n  statistics: string[];\n  info:string[];\n  services:string[];\n  booking: IBooking;\n}\n\nexport interface IBooking {\n  roundTripImage: string;\n  breakFast:IListItemsAndOneLogo;\n  placesToVisit:IListItemsAndOneLogo;\n}\n\nexport interface IListItemsAndOneLogo\n{\n  items:string[];\n  imageUrl:string;\n}\n```\n\n\n## 4. the Angular component architecture:\n\n![Component architecture](https://github.com/skepee/BYH-Angular/blob/master/description/Slide2.PNG)\n\n\n\n\n# Conclusion:\n\nWith Angular it is possible to create a modular design of our app. Evenf is the example is very simple, we can create multiple connected components. In our case ten modules in total have been used.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskepee%2FHTML2Angular-migration-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskepee%2FHTML2Angular-migration-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskepee%2FHTML2Angular-migration-example/lists"}