{"id":17366788,"url":"https://github.com/alonza0314/angular-framework-study","last_synced_at":"2026-02-19T05:01:34.271Z","repository":{"id":256144371,"uuid":"854405963","full_name":"Alonza0314/Angular-Framework-Study","owner":"Alonza0314","description":"This documentation provides a basic introduction to the Angular framework, covering key concepts and providing a simple demonstration.","archived":false,"fork":false,"pushed_at":"2024-10-04T15:58:25.000Z","size":71820,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T15:10:41.344Z","etag":null,"topics":["angular","nodejs","typescript"],"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/Alonza0314.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":"2024-09-09T05:42:52.000Z","updated_at":"2024-10-04T15:58:29.000Z","dependencies_parsed_at":"2024-09-09T08:26:41.602Z","dependency_job_id":"679d3ef9-5b97-48a1-b7ec-1badb42c3d5c","html_url":"https://github.com/Alonza0314/Angular-Framework-Study","commit_stats":{"total_commits":18,"total_committers":4,"mean_commits":4.5,"dds":0.5,"last_synced_commit":"8eb94e951e3707ec771c4724aa2ffae78c5ca009"},"previous_names":["alonza0314/angular-framework-study"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alonza0314/Angular-Framework-Study","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alonza0314%2FAngular-Framework-Study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alonza0314%2FAngular-Framework-Study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alonza0314%2FAngular-Framework-Study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alonza0314%2FAngular-Framework-Study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alonza0314","download_url":"https://codeload.github.com/Alonza0314/Angular-Framework-Study/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alonza0314%2FAngular-Framework-Study/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29604108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T04:38:07.383Z","status":"ssl_error","status_checked_at":"2026-02-19T04:35:50.016Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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","nodejs","typescript"],"created_at":"2024-10-15T22:04:56.186Z","updated_at":"2026-02-19T05:01:34.245Z","avatar_url":"https://github.com/Alonza0314.png","language":"TypeScript","readme":"# Angular Framework Study\r\n\r\n![angular-logo](/img/angular-logo.png)\r\n\r\nThis documentation provides a basic introduction to the Angular framework, covering key concepts and providing a simple demonstration.\r\n\r\n## Index\r\n\r\n[Introduction](#introduction)\r\n\r\n[Environment Setup](#environment-setup)\r\n\r\n[Angular Basics](#angular-basics)\r\n\r\n[Routing](#routing)\r\n\r\n[Simple Demonstration](#simple-demonstration)\r\n\r\n[Reference](#reference)\r\n\r\n## Introduction\r\n\r\nAngular is a popular web application framework developed by Google, known for building efficient and scalable single-page applications, which provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow.\r\n\r\n## Environment Setup\r\n\r\n|Package|Version|\r\n|-|-|\r\n|Node.js|18|\r\n|npm|\u003e=8.1|\r\n|ng|18|\r\n\r\n### Install\r\n\r\n```bash\r\ncurl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash\r\nsudo apt install -y nodejs\r\nnpm install -g @angular/cli@18\r\n```\r\n\r\n### Check\r\n\r\n```bash\r\nng version\r\n```\r\n\r\nExprected to see ouput like this\r\n\r\n```bash\r\n\r\n     _                      _                 ____ _     ___\r\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\r\n   / △ \\ | '_ \\ / _` | | | | |/ _` | '__|   | |   | |    | |\r\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\r\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\r\n                |___/\r\n\r\n\r\nAngular CLI: 18.2.7\r\nNode: 18.20.4\r\nPackage Manager: npm 10.7.0\r\nOS: linux x64\r\n\r\nAngular:\r\n...\r\n\r\nPackage                      Version\r\n------------------------------------------------------\r\n@angular-devkit/architect    0.1802.7 (cli-only)\r\n@angular-devkit/core         18.2.7 (cli-only)\r\n@angular-devkit/schematics   18.2.7 (cli-only)\r\n@schematics/angular          18.2.7 (cli-only)\r\n```\r\n\r\n## Angular Basics\r\n\r\n### Angular Architechture\r\n\r\nThe core architecture of Angular includes the following key parts:\r\n\r\n+ **Modules**: Modules group related components and services to organize Angular applications into functional areas.\r\n+ **Components**: Components control a view and its logic, forming the building blocks of an Angular application.\r\n+ **Templates**: Templates define the HTML structure and behavior of a component using Angular's template syntax.\r\n+ **Metadata**: Metadata provides extra information to Angular classes, guiding how they should be processed.\r\n+ **Data Binding**: Data binding connects the component's data with the view, allowing interaction and dynamic updates.\r\n+ **Directives**: Directives modify the DOM by altering element behavior or structure.\r\n+ **Services**: Services encapsulate reusable logic or data operations and can be shared across components.\r\n+ **Dependency Injection**: Dependency Injection allows services and objects to be efficiently shared and managed in an Angular application.\r\n\r\n### Directory Structure\r\n\r\nA typical Angular project is as follows:\r\n\r\n```bash\r\nAn-angular-project/\r\n├── src/\r\n│   ├── app/\r\n│   │   ├── app.component.css (or .scss)\r\n│   │   ├── app.component.html\r\n│   │   ├── app.component.spec.ts\r\n│   │   ├── app.component.ts\r\n│   │   └── app.module.ts\r\n│   ├── assets/\r\n│   ├── environments/\r\n│   │   ├── environment.node.ts\r\n│   │   └── environment.ts\r\n│   ├── favicon.ico\r\n│   ├── index.html\r\n│   └── main.ts\r\n├── node_modules/\r\n├── angular.json\r\n├── package.json\r\n└── tsconfig.json\r\n```\r\n\r\n+ `src/`: Contains the actual source code of the application.\r\n  + `app/`: Main application code.\r\n    + `app.component.css (or .scss)`: The stylesheet for the root component.\r\n      + `.css` files contain standard CSS syntax.\r\n      + `.scss` files use SASS syntax, offering advanced features like variables, nesting, and mixins.\r\n    + `app.component.html`: The HTML template file for the root component of the application. It defines the structure and layout of the main app component.\r\n    + `app.component.spec.ts`: The unit test file for the root component, used to write and run automated tests for the component, ensuring its functionality works as expected.\r\n    + `app.component.ts`: TypeScript file defines the logic for the root component. It contains the component class, decorators, and any methods or properties used by the component.\r\n    + `app.module.ts`: The root module of the Angular application. It's responsible for bootstrapping the application and declaring which components, services, and modules are part of the app.\r\n  + `assets/`: Stores the static assets (images, texts, fonts, etc.).\r\n  + `environments/`: Stores configuration settings for different environments.\r\n    + `environment.node.ts`: For the production environment.\r\n    + `environment.ts`: For the development environment.\r\n  + `favicon.ico`: The icon that appears in the browser tab.\r\n  + `index.html`: The main HTML file that serves as the entry point for the application.\r\n  + `main.ts`: The main entry point for the application, where the application is bootstrapped. Everthing starts from here.\r\n+ `node_modules/`: Stores all the 3rd-party libraries that the application depends on. When we compile the application, parts of the 3rd-party libraries are put in the bundle and deployed with the application.\r\n+ `angular.json`: Angular workspace configuration file. It contains the configuration settings for the Angular CLI.\r\n+ `package.json`: npm package management configuration file.\r\n+ `tsconfig.json`: TypeScript compiler configuration file.\r\n\r\n## Routing\r\n\r\n### What is Angular Routing?\r\n\r\nAngular routing is a navigation mechanism that allows us to switch between different views or pages within the same [Single Page Application (SPA)](https://en.wikipedia.org/wiki/Single-page_application#:~:text=A%20single-page%20application%20%28SPA%29%20is%20a%20web%20application,the%20website%20feel%20more%20like%20a%20native%20app.). With the routing system, different components can be loaded based on the requested URL without reloading the entire page.\r\n\r\n### Basic Concepts\r\n\r\nThr routing system is built upon the following key concepts:\r\n\r\n+ **Routes Configuration**: This is an array that contains the routing rules for the application, used to define the mapping between URLs and their corresponding components.\r\n+ **RouterModule**: One of Angular's core modules, it enables routing functionality within an application. The root routes of the application are defined using the RouterModule.forRoot() method.\r\n+ **RouterLink Directive**: This is used to create navigation links in the template. It binds to a specified route path, and when clicked, triggers navigation to the associated route.\r\n+ **RouterOutlet**: This is a placeholder directive that defines where the view components will be loaded. Based on the active route, Angular displays the corresponding component in this location.\r\n\r\n## Basic Usage\r\n\r\n+ **Create a Project**:\r\n\r\n    ```bash\r\n    ng new my-project\r\n    ```\r\n\r\n+ **Create a Component**:\r\n\r\n    ```bash\r\n    ng generate component my-component\r\n    ```\r\n\r\n+ **Create a Service**:\r\n\r\n    ```bash\r\n    ng generate service my-service\r\n    ```\r\n\r\n+ **Data Binding**:\r\n  + **Interpolation**: `{{ variable }}`\r\n  + **Property Binding**: `[property]=\"value\"`\r\n  + **Event Binding**: `(event)=\"handler()\"`\r\n  + **Two-Way Binding**: `[(ngModel)]=\"property\"`\r\n+ **Using Directives**:\r\n  + **Structural Directives**: `*ngIf`, `*ngFor`\r\n  + **Attribute Directives**: `ngClass`, `ngStyle`\r\n\r\n## Simple Demonstration\r\n\r\n### Steps\r\n\r\n1. Create a new project:\r\n\r\n    ```bash\r\n    ng new my-project\r\n    cd my-project\r\n    ```\r\n\r\n2. Create a new component:\r\n    This command will create a component named \"hello-angualr\" under `src/app/` and refresh the module configuration.\r\n\r\n    ```bash\r\n    ng generate component hello-angular\r\n    ```\r\n\r\n3. Rewrite `src/app/hello-angular/hello-angular.component.html`\r\n\r\n    ```html\r\n    \u003ch1\u003eHello Angular\u003c/h1\u003e\r\n    ```\r\n\r\n4. Rewrite `src/app/app.component.html`\r\n\r\n    ```html\r\n    \u003capp-hello-angular\u003e\u003c/app-hello-angular\u003e\r\n    ```\r\n\r\n5. Run\r\n   1. If you have just clone this repo, you need to run this command to install dependencies before run `ng serve`\r\n\r\n        ```bash\r\n        npm install\r\n        ```\r\n\r\n   2. Access on the same host via: `localhost:4200`\r\n\r\n        ```bash\r\n        ng serve\r\n        ```\r\n\r\n   3. Access on different host via: `x.x.x.x:4200`\r\n\r\n        ```bash\r\n        ng serve --host 0.0.0.0\r\n        ```\r\n\r\n### Demonstration\r\n\r\nClick the link and move to the directory: [my-project](/my-project/README.md)\r\n\r\nAnother example: [todo-list](/todo-list/README.md)\r\n\r\n## Reference\r\n\r\n[Angular Official Website](https://angular.dev/)\r\n\r\n[Angular Tutorial for Beginners: Learn Angular \u0026 TypeScript](https://www.youtube.com/watch?v=k5E2AVpwsko/)\r\n\r\n[ChatGPT](https://openai.com/chatgpt/)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falonza0314%2Fangular-framework-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falonza0314%2Fangular-framework-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falonza0314%2Fangular-framework-study/lists"}