Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thesurenk/angular-material-starter-website
Build a website with Angular and Material Design
https://github.com/thesurenk/angular-material-starter-website
Last synced: 6 days ago
JSON representation
Build a website with Angular and Material Design
- Host: GitHub
- URL: https://github.com/thesurenk/angular-material-starter-website
- Owner: thesurenk
- License: mit
- Created: 2020-06-09T19:13:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-27T22:01:47.000Z (over 3 years ago)
- Last Synced: 2024-12-15T01:02:23.242Z (14 days ago)
- Language: TypeScript
- Size: 148 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Material Starter Website
This project helps evelopers to get started with building websites with [Angular](https://angular.io/) using [Material Design](https://material.io/).
# Why?
Angular comes with several tools, but one part that misses is a sample website. Although the team leaves on developers to build sites.
1. The `ng new ` command does create all the boilerplate code but does not come with a sample website and related components, page structure.
2. The other complexity with Angular is that it being an opiniated framework, files and directories need to be in certain specific structure.
3. There are not many active starter projects that has a pre-built sample website built with Angular and using only Material design components. There are several such projects exist but most of them use some 3rd party framework or addtional code to build the website.
# What's Included
The project has a sample website home page with:
- Header
- Left sidebar
- Body
- Split into a grid
- Footer
# Architecture
## Technical Stack
The project is built with the following:
### Angular
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
### Material Design components for Angular
Material design is one of the most used design systems and Angular team also has developed a comprehensive list of Angular components using Material, called as the "Material Design Components for Angular".
## Key Wirings Angular with Material
- ``
- `/package.json`
- Includes
`"@angular/cdk": "^9.2.4"` and `"@angular/material": "^9.2.4"`
- `/angular.json`
- Includes the default layout as
```
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
```
- `/src/`
- `/src/styles.scss`
- Includes the default styles used across the project.
- `/src/index.html`
- Is the primary binding file for Angular projects. The key to observe here is the usage of Material typography.
``
- `/src/app`
- `/src/app/app.routing.module.ts` primary routing module for the project.
- `/src/app/app.component.html` primary entry html file that has all code for building the website.
- `/src/app/app.component.scss` empty.
- `/src/app/app.component.ts` primary component, also includes `MatSideNav`.
- `/src/app/app.module.ts` primary module. Also incudes only required material components.
# Build
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Production
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
# Contribute
I started this as an Open Source by Default project and will always be free.
We'd love your contribution and appreciate it. We need support to make this a bigger, better project. Of all be more helpful to users.