This project helps evelopers to get started with building websites with Angular using Material Design.
Angular comes with several tools, but one part that misses is a sample website. Although the team leaves on developers to build sites.
-
The
ng new <project>command does create all the boilerplate code but does not come with a sample website and related components, page structure. -
The other complexity with Angular is that it being an opiniated framework, files and directories need to be in certain specific structure.
-
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.
The project has a sample website home page with:
- Header
- Left sidebar
- Body
- Split into a grid
- Footer
The project is built with the following:
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
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".
<project-root><project-root>/package.json- Includes
"@angular/cdk": "^9.2.4"and"@angular/material": "^9.2.4"
- Includes
<project-root>/angular.json- Includes the default layout as
"styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ],
- Includes the default layout as
<project-root>/src/<project-root>/src/styles.scss- Includes the default styles used across the project.
<project-root>/src/index.html-
Is the primary binding file for Angular projects. The key to observe here is the usage of Material typography.
<body class="mat-typography">
-
<project-root>/src/app<project-root>/src/app/app.routing.module.tsprimary routing module for the project.<project-root>/src/app/app.component.htmlprimary entry html file that has all code for building the website.<project-root>/src/app/app.component.scssempty.<project-root>/src/app/app.component.tsprimary component, also includesMatSideNav.<project-root>/src/app/app.module.tsprimary module. Also incudes only required material components.
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.
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.
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.