{"id":18257002,"url":"https://github.com/mediacomem/comem-masrad-dfa-angular-exercise","last_synced_at":"2026-01-21T01:32:40.430Z","repository":{"id":73832410,"uuid":"86476473","full_name":"MediaComem/comem-masrad-dfa-angular-exercise","owner":"MediaComem","description":"Angular initiation","archived":false,"fork":false,"pushed_at":"2017-04-14T21:59:58.000Z","size":342,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-08T22:32:37.409Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/MediaComem.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-28T15:26:53.000Z","updated_at":"2017-03-28T15:29:28.000Z","dependencies_parsed_at":"2023-09-21T07:36:55.849Z","dependency_job_id":null,"html_url":"https://github.com/MediaComem/comem-masrad-dfa-angular-exercise","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MediaComem/comem-masrad-dfa-angular-exercise","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa-angular-exercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa-angular-exercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa-angular-exercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa-angular-exercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MediaComem","download_url":"https://codeload.github.com/MediaComem/comem-masrad-dfa-angular-exercise/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa-angular-exercise/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28621640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"ssl_error","status_checked_at":"2026-01-20T23:47:29.996Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-05T10:24:31.570Z","updated_at":"2026-01-21T01:32:40.416Z","avatar_url":"https://github.com/MediaComem.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Comem+ MAS-RAD DFA Angular Exercise\n\nThis repository contains a starter project for an Angular exercise in the MAS-RAD DFA course.\n\n## Exercise\n\nThe following step describes what you need to do to have a functional chat panel (on the right of the interface) with which you can add and remove messages.\nThe rest of the interface will be implemented in future exercises.\n\n### Basic module and controller\n\n* Create an Angular module named `DiaLog` and add an `ng-app` attribute on the body to use it\n* Create an Angular controller named `ChatPanelController`:\n  * The controller should be a named controller (it should store `this` in a variable, e.g. `var chatPanelCtrl = this;`)\n  * You should attach the controller to the `\u003cdiv class=\"panel ...\"\u003e` tag by adding the attribute `ng-controller=\"ChatPanelController as chatPanelCtrl\"`\n* Add a `chatPanelCtrl.user` variable to your controller containing the name of the person with whom you are chatting, e.g. `Ken Bogard`\n* Use Angular's double braces to insert this variable into the `\u003cstrong\u003e\u003c!-- TODO: insert user name here --\u003e\u003c/strong\u003e` tag in the view\n\n### Get and display the list of messages\n\n* Add the [`DataService`](#data-service) service to your script file (find code below)\n* Inject `DataService` into the controller\n* Add a call to retrieve the messages and attach them to the controller:\n\n  ```js\n  DataService.getMessages().then(function(messages) {\n    chatPanelCtrl.messages = messages;\n  });\n  ```\n* Add an `ng-repeat` attribute to the `\u003cdiv class=\"col-md-8\"\u003e` tag to repeat it for each message in the `chatPanelCtrl.messages` variable we just created\n* Insert the message's text into the template\n* Insert the message's time into the template, use the `date` filter to display a human-friendly version (e.g. with the format string `dd.MM.yyyy HH:mm`)\n* On the same tag as the `ng-repeat`, add an `ng-class` attribute to conditionally apply the `col-md-offset-4` class for your messages (when `message.mine` is true)\n* On the `\u003cdiv class=\"alert ...\"\u003e` tag, remove the hardcoded `alert-success` class and add an `ng-class` attribute to conditionally apply the `alert-warning` and `alert-success` classes for messages based on whether they are yours (you can use `message.mine` or `!message.mine` as conditions)\n\n### Adding messages\n\n* Add an `ng-model` attribute to the `\u003ctextarea ...\u003e` tag to attach its value to the controller\n* Add an `chatPanelCtrl.addMessage` function to your controller:\n  * It should push a new message object into `chatPanelCtrl.messages`\n  * It should also set the `ng-model` variable to an empty string (to clear the form after submitting a new message)\n* Add an `ng-submit` attribute to the `\u003cform\u003e` tag to trigger your `chatPanelCtrl.addMessage` function when the form is submitted\n\n### Removing messages\n\n* Add a `chatPanelCtrl.removeMessage` function to your controller:\n  * It should take the message object to remove as an argument\n  * It should remove that message from `chatPanelCtrl.messages`\n  * Add an `ng-click` attribute to the `\u003cbutton ...\u003e` tag with the trash icon to call your `chatPanelCtrl.removeMessage` function with the current message\n\n**Tip:** how to remove an element from an array in JavaScript\n\n```js\nvar array = [ 'a', 'b', 'c' ];\n\nfunction removeFromArray(element) {\n  var indexOfElement = array.indexOf(element);\n  array.splice(indexOfElement, 1);\n}\n\nremoveFromArray('b');\nconsole.log(array); // [ 'a', 'c' ]\n```\n\n### Validating the message form\n\n* Add a name to the `\u003cform\u003e` and `\u003ctextarea\u003e`\n* Add a `required` attribute to the `\u003ctextarea\u003e` to mark this field as required\n* Add an `ng-disabled` attribute to the last `\u003cbutton\u003e` in the form to disable it if the form is invalid\n\n## Data service\n\n```js\nangular.module('DiaLog').factory('DataService', function($q) {\n\n  var service = {};\n\n  service.getMessages = function() {\n    return $q.when([\n      {\n        text: 'Hi there!',\n        time: moment().hour(12).minute(40).toDate()\n      },\n      {\n        text: 'Hey, hello you!\\nWhat\\'s up?',\n        time: moment().hour(12).minute(50).toDate(),\n        mine: true\n      },\n      {\n        text: 'Same old, same old.\\nWanna come\\'n play some SFV?!',\n        time: moment().hour(13).minute(16).toDate()\n      }\n    ]);\n  };\n\n  return service;\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa-angular-exercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa-angular-exercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa-angular-exercise/lists"}