{"id":18283593,"url":"https://github.com/thesmartmonkey/create-angular-app","last_synced_at":"2025-10-13T13:32:08.258Z","repository":{"id":59710868,"uuid":"477417125","full_name":"TheSmartMonkey/create-angular-app","owner":"TheSmartMonkey","description":"Simple Angular 14 template with lazy loading that follows google architecture recommendation","archived":false,"fork":false,"pushed_at":"2022-09-26T19:46:04.000Z","size":1104,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T05:42:53.229Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","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/TheSmartMonkey.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}},"created_at":"2022-04-03T17:37:16.000Z","updated_at":"2022-10-12T07:57:56.000Z","dependencies_parsed_at":"2023-01-18T22:45:56.595Z","dependency_job_id":null,"html_url":"https://github.com/TheSmartMonkey/create-angular-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/TheSmartMonkey/create-angular-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSmartMonkey%2Fcreate-angular-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSmartMonkey%2Fcreate-angular-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSmartMonkey%2Fcreate-angular-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSmartMonkey%2Fcreate-angular-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheSmartMonkey","download_url":"https://codeload.github.com/TheSmartMonkey/create-angular-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSmartMonkey%2Fcreate-angular-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015312,"owners_count":26085684,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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"],"created_at":"2024-11-05T13:10:03.124Z","updated_at":"2025-10-13T13:32:08.225Z","avatar_url":"https://github.com/TheSmartMonkey.png","language":"TypeScript","readme":"# create-angular-app\n\nSimple Angular template with lazy loading that fallows google architecture recommendation\n\nThere is READMES in each folder to explain you there role\n\n## Installation\n\n```bash\nnpx degit https://github.com/TheSmartMonkey/create-angular-app ui\n```\n\n## Recommended rules to follow\n\n1. Follow the rule of [Smart \u0026 Dumb Components](https://dev.to/mquanit/concept-of-smart-dumb-components-in-angular-2fom) , [Smart \u0026 Dumb Components in depth](https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/)\n\n   a. **Smart components** : collect the data\n\n   b. **Dumb components** or isolated components : display the data\n\n   c. Use @Input to get the data\n\n   d. Finally a page component is composed of Smart \u0026 Dump components\n\n1. Ideally a component must not exceed 100 lines of code\n\n1. Adopte the SOLID Pattern and others : [Angular Patterns](https://angular-enterprise.com/en/ngpost/courses/design-patterns/)\n\n1. [Angular concepts](https://angular.io/guide/architecture)\n\n![APP IMAGE](https://github.com/TheSmartMonkey/create-angular-app/blob/main/.github/smart_and_dump_components.png)\n\n## Getting Started\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.1.\n\nMore explications here : `src\\app\\README.md`\n\n### Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n### Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n### Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n### Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n### Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n### Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n## Steps to update the repo\n\n1. Remove `angular.json`, `.vscode`\n\n1. Create a new project\n\n   ```sh\n   ng new ui\n   ```\n\n1. Download packages\n\n   ```sh\n   npm i @ngx-translate/core --save\n   npm i @ngx-translate/http-loader --save\n   npm i prettier --save-dev\n   npm i eslint --save-dev\n   npm i @angular-eslint/eslint-plugin --save-dev\n   npm i @typescript-eslint/parser --save-dev\n   npm i @typescript-eslint/eslint-plugin --save-dev\n   ```\n\n1. Remove readme\n\n1. Copy `package.json` commands\n\n1. Copy the code (app, assets, sass, angular.json)\n\n1. Format code `npm run format`\n\n1. Test the app\n\n   ```sh\n   npm run start\n   ```\n\n   ```sh\n   npm run test\n   ```\n\n## Folder tree\n\n```txt\nsrc\n|   favicon.ico\n|   index.html\n|   main.ts\n|   polyfills.ts\n|   test.ts\n|\n+---app\n|   |   app-routing.module.ts\n|   |   app.component.html\n|   |   app.component.scss\n|   |   app.component.spec.ts\n|   |   app.component.ts\n|   |   app.module.ts\n|   |   README.md\n|   |\n|   +---admin\n|   |       admin-routing.module.ts\n|   |       admin.module.ts\n|   |       README.md\n|   |\n|   +---core\n|   |   |   core.module.ts\n|   |   |   README.md\n|   |   |\n|   |   +---components\n|   |   |   +---navbar\n|   |   |   |       navbar.component.html\n|   |   |   |       navbar.component.scss\n|   |   |   |       navbar.component.spec.ts\n|   |   |   |       navbar.component.ts\n|   |   |   |\n|   |   |   \\---page-not-found\n|   |   |           page-not-found.component.html\n|   |   |           page-not-found.component.scss\n|   |   |           page-not-found.component.spec.ts\n|   |   |           page-not-found.component.ts\n|   |   |\n|   |   +---guards\n|   |   |       .gitkeep\n|   |   |\n|   |   +---interceptors\n|   |   |       .gitkeep\n|   |   |\n|   |   \\---services\n|   |           .gitkeep\n|   |\n|   +---models\n|   |       README.md\n|   |\n|   +---protected\n|   |       protected-routing.module.ts\n|   |       protected.module.ts\n|   |       README.md\n|   |\n|   +---public\n|   |   |   public-routing.module.ts\n|   |   |   public.module.ts\n|   |   |   README.md\n|   |   |\n|   |   +---home\n|   |   |   |   home-routing.module.ts\n|   |   |   |   home.component.html\n|   |   |   |   home.component.scss\n|   |   |   |   home.component.spec.ts\n|   |   |   |   home.component.ts\n|   |   |   |   home.module.ts\n|   |   |   |\n|   |   |   \\---components\n|   |   |           .gitkeep\n|   |   |\n|   |   \\---login\n|   |       |   login-routing.module.ts\n|   |       |   login.component.html\n|   |       |   login.component.scss\n|   |       |   login.component.spec.ts\n|   |       |   login.component.ts\n|   |       |   login.module.ts\n|   |       |\n|   |       \\---components\n|   |               .gitkeep\n|   |\n|   \\---shared\n|       |   README.md\n|       |\n|       +---components\n|       |       .gitkeep\n|       |\n|       +---directives\n|       |       .gitkeep\n|       |\n|       \\---pipes\n|               .gitkeep\n|\n+---assets\n|   +---icons\n|   |       .gitkeep\n|   |\n|   +---images\n|   |       .gitkeep\n|   |\n|   \\---languages\n|           en.json\n|           fr.json\n|\n+---environments\n|       environment.prod.ts\n|       environment.ts\n|\n\\---sass\n        global.scss\n        styles.scss\n        variables.scss\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesmartmonkey%2Fcreate-angular-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthesmartmonkey%2Fcreate-angular-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesmartmonkey%2Fcreate-angular-app/lists"}