{"id":21058368,"url":"https://github.com/gokemon/angular-cli-todos","last_synced_at":"2026-04-24T11:33:07.588Z","repository":{"id":122180837,"uuid":"89426592","full_name":"gokemon/Angular-CLI-ToDos","owner":"gokemon","description":"Using Angular CLI to create a ToDos list using App Module, Components, Services \u0026 Router","archived":false,"fork":false,"pushed_at":"2017-05-07T02:09:01.000Z","size":836,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T20:05:32.648Z","etag":null,"topics":["angular-cli-todos","angular2","dumb-components","router"],"latest_commit_sha":null,"homepage":"https://gokemon.github.io/Angular-CLI-ToDos/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gokemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-04-26T02:04:46.000Z","updated_at":"2017-05-16T18:46:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ce0faa1-4ea8-40ec-9217-956489f67ee8","html_url":"https://github.com/gokemon/Angular-CLI-ToDos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gokemon/Angular-CLI-ToDos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokemon%2FAngular-CLI-ToDos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokemon%2FAngular-CLI-ToDos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokemon%2FAngular-CLI-ToDos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokemon%2FAngular-CLI-ToDos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gokemon","download_url":"https://codeload.github.com/gokemon/Angular-CLI-ToDos/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokemon%2FAngular-CLI-ToDos/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32221411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"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":["angular-cli-todos","angular2","dumb-components","router"],"created_at":"2024-11-19T17:07:40.938Z","updated_at":"2026-04-24T11:33:07.571Z","avatar_url":"https://github.com/gokemon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular-CLI-ToDos\nUsing Angular CLI to create a ToDos list using App Module, Components, Services \u0026amp; Router\n\nThis should be working; that you can deploy to gh-pages, and its suppose to run\n[https://gokemon.github.io/Angular-CLI-ToDos/todo-app/](https://gokemon.github.io/Angular-CLI-ToDos/todo-app/)\n\n# Application Architecture #\nIn the FirstBasicAppComponent branch, we created:\n\n- Created our Todo application using the Angular CLI\n- Created an AppComponent component to display the user interface\n- Created a Todo class to represent individual todos\n- Created a TodoDataService service to create, update and remove todos\n\nIn the ComponentRefactoring branch, we created:\n\n- a TodoListComponent to display a list of todo’s\n- a TodoListItemComponent to display a single todo\n- a TodoListHeaderComponent to create a new todo\n- a TodoListFooterComponent to show how many todo’s there are\n\n\nIn the process, we learned:\n\n- the basics of Angular component architecture\n- how to pass data into a component using property bindings\n- how to listen for events emitted by a component using event listeners\n- how splitting components into smaller reusable components makes our code easier to reuse and maintain\n- how we can use smart and dumb to make our life a whole lot easier when we need to refactor our application’s business logic\n\n\n\n## app.component.html ##\nHere is a super-short primer on Angular’s template syntax in case you haven’t seen it yet:\n\n- `[property]=\"expression\"`: set property of an element to the value of expression\n- `(event)=\"statement\"`: execute statement when event occurred\n- `[(property)]=\"expression`\": create two-way binding with expression\n- `[class.special]=\"expression\"`: add special CSS class to element when the value of expression is truthy\n- `[style.color]=\"expression\"`: set color CSS property to the value of expression\n- `[(ngModel)]=\"newTodo.title\"`: adds a two-way binding between the input value and newTodo.title\n- `(keyup.enter)=\"addTodo()\"`: tells Angular to execute addTodo() when the enter key was pressed while typing in the input element\n- `*ngIf=\"todos.length \u003e 0\"`: only show the section element and all its children when there is at least one todo\n- `*ngFor=\"let todo of todos\"`: loop over all todo’s and assign current todo to a variable called todo for each iteration\n- `[class.completed]=\"todo.complete\"`: apply CSS class completed to li element when todo.complete is truthy\n- `(click)=\"toggleTodoComplete(todo)\"`: execute toggleTodoComplete(todo) when the checkbox is clicked\n- `[checked]=\"todo.complete\"`: assign the value of todo.complete to the property checked of the element\n- `(click)=\"removeTodo(todo)\"`: execute removeTodo(todo) when the destroy button is clicked\n\nIf you’re not familiar with Angular’s template syntax, you should definitely read the [official template syntax documentation](https://angular.io/docs/ts/latest/guide/template-syntax.html).\n\n## In Summary ##\nBy the end of this project I should understand:\n\n- the basics of Angular component architecture\n- how you can pass data into a component using property bindings\n- how you can listen for events emitted by a component using event listeners\n- why it is a good practice to split components into smaller reusable components\n- the difference between smart and dumb components and why keeping components dumb is a good practice\n\nStill looking to ***Master Routing!***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgokemon%2Fangular-cli-todos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgokemon%2Fangular-cli-todos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgokemon%2Fangular-cli-todos/lists"}