{"id":21251597,"url":"https://github.com/ntshvicky/basicofangular","last_synced_at":"2026-05-02T20:40:16.045Z","repository":{"id":216555955,"uuid":"741628105","full_name":"ntshvicky/BasicOfAngular","owner":"ntshvicky","description":"This is an example of angular app. using Type Script.","archived":false,"fork":false,"pushed_at":"2024-01-10T20:09:11.000Z","size":148,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T15:59:05.242Z","etag":null,"topics":["angular","angular-basics","angular-cli","angular-component","angular-pipe","angular-service","angularjs"],"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/ntshvicky.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-01-10T19:32:11.000Z","updated_at":"2024-01-10T20:11:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"9081a917-0310-428d-a913-7007fbb99d77","html_url":"https://github.com/ntshvicky/BasicOfAngular","commit_stats":null,"previous_names":["ntshvicky/basicofangular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ntshvicky/BasicOfAngular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntshvicky%2FBasicOfAngular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntshvicky%2FBasicOfAngular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntshvicky%2FBasicOfAngular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntshvicky%2FBasicOfAngular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ntshvicky","download_url":"https://codeload.github.com/ntshvicky/BasicOfAngular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntshvicky%2FBasicOfAngular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32549386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T19:18:06.202Z","status":"ssl_error","status_checked_at":"2026-05-02T19:16:21.335Z","response_time":132,"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","angular-basics","angular-cli","angular-component","angular-pipe","angular-service","angularjs"],"created_at":"2024-11-21T03:42:53.094Z","updated_at":"2026-05-02T20:40:11.035Z","avatar_url":"https://github.com/ntshvicky.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Basic of Angular\n* TypeScript\n* Angular2+\n* CSS\n\n## This is an basic example of an Angular application. Which has option to create two different modules for admin and public separates, Option for crerate service and use in components and create pipe and call in components.\n\n## How to create a basic Angular application (You should have installed node)\n1. First, make sure you have Angular CLI installed. If not, you can install it using npm:\n\u003e npm install -g @angular/cli \n* -g mean globally installed Angular CLI\n\n2. create a new Angular project:\n\u003e ng new test-angular\n\n3. create two modules for admin and public\n\u003e ng generate module public --routing\n\u003e ng generate module admin --routing\n* --routing will create route files for both modules\n\n4. create home component with header \u0026 footer component in both modules and call header/footer\n\u003e ng generate component public/home\n\u003e ng generate component admin/home\n\u003e ng generate component public/header\n\u003e ng generate component public/footer\n\u003e ng generate component admin/header\n\u003e ng generate component admin/footer\n\n\n5. create pipes \n\u003e ng generate pipe pipes/capitalize\n\u003e ng generate pipe pipes/upper\n\n6. create service\n\u003e ng generate service services/data\n\n## Required to do in code\n\u003e to access the pipes in components, you will need to add pipes to their modules like here in public/public.module.ts and admin/admin.module.ts\n\n# What is Angular \n\u003e An Angular application typically contains the following components:\n\n**Modules:** Organizes the application into cohesive blocks of functionality. Each Angular app has at least one module, the root module.\n\n**Components:** The basic building blocks of the UI. Each component consists of a TypeScript class, an HTML template, and styles.\n\n**Templates:** Define the views. They are HTML files with Angular-specific elements and attributes.\n\n**Services:** Provide specific functionality not directly related to views. Services can be injected into components and other services through dependency injection.\n\n**Routing:** Manages navigation between views. It interprets browser URLs as instructions to navigate to a client-generated view.\n\n**Directives:** Extend HTML with new attributes and behaviors.\n\n**Pipes:** Transform displayed values within templates.\n\n**Dependency Injection:** Angular's dependency injection system provides services or objects to components, enhancing modularity and reusability.\n\n## Structure of a Module:\n\u003e An Angular module is a class decorated with @NgModule. It typically has the following parts:\n\n**declarations:** This is where you declare the components, directives, and pipes that belong to the module.\n\n**imports:** Here you can import other modules and their exported declarations. For example, BrowserModule for browser-based apps, FormsModule for template-driven forms, etc.\n\n**providers:** This is where you list the service providers. It's used for dependency injection within the module.\n\n**exports:** The set of components, directives, and pipes that can be used in the template of any component that is part of an Angular module that imports this module.\n\n**bootstrap:** It's specifically used in the root module to define the root component. The root component is the main view of the application.\n\n\n## Structure of a Component:\n**Selector:** A custom HTML tag that represents the component.\n**Template:** HTML that describes how the component renders.\n**Styles:** CSS specific to the component.\n**Class:** Contains the logic for the component. It's where you define properties, methods, etc.\n\n\n## Types of Pipes:\n\u003e Angular provides several built-in pipes, and you can also create your own custom pipes. Some of the common built-in pipes include:\n\n**DatePipe:** Formats a date value according to locale rules.\n**UpperCasePipe:** Transforms text to uppercase.\n**LowerCasePipe:** Transforms text to lowercase.\n**CurrencyPipe:** Transforms a number to a currency string.\n**DecimalPipe:** Transforms a number into a string with a decimal point.\n**PercentPipe:** Transforms a number into a percentage string.\n**JsonPipe:** Transforms an object into a JSON string.\n\n+ Syntex : \n* {{ value | pipeName:arg1:arg2:... }}\n+ Examples : \n* \u003cp\u003e{{ currentDate | date:'fullDate' }}\u003c/p\u003e\n* \u003cp\u003e{{ message | uppercase }}\u003c/p\u003e\n* \u003cp\u003e{{ amount | currency:'USD':true }}\u003c/p\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntshvicky%2Fbasicofangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fntshvicky%2Fbasicofangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntshvicky%2Fbasicofangular/lists"}