{"id":13432975,"url":"https://github.com/angular/material-start","last_synced_at":"2026-01-10T18:57:59.341Z","repository":{"id":25715758,"uuid":"29152618","full_name":"angular/material-start","owner":"angular","description":"Starter Repository for AngularJS Material","archived":true,"fork":false,"pushed_at":"2022-03-08T19:25:14.000Z","size":505,"stargazers_count":2205,"open_issues_count":2,"forks_count":1209,"subscribers_count":145,"default_branch":"master","last_synced_at":"2024-12-25T05:31:34.513Z","etag":null,"topics":["angularjs","angularjs-material","javascript","material-design","material-start"],"latest_commit_sha":null,"homepage":"https://angularjs-material-start.web.app","language":"JavaScript","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/angular.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":"2015-01-12T19:26:04.000Z","updated_at":"2024-12-17T11:11:07.000Z","dependencies_parsed_at":"2022-07-12T16:08:13.193Z","dependency_job_id":null,"html_url":"https://github.com/angular/material-start","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular","download_url":"https://codeload.github.com/angular/material-start/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"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","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":["angularjs","angularjs-material","javascript","material-design","material-start"],"created_at":"2024-07-31T02:01:19.279Z","updated_at":"2025-10-01T23:30:34.694Z","avatar_url":"https://github.com/angular.png","language":"JavaScript","readme":"# AngularJS Material-Start (ES6)\n[![Gitter](https://badges.gitter.im/angular/material2.svg)](https://gitter.im/angular/material?utm_source=badge\u0026utm_medium=badge)\n\nThis branch contains the final/complete version (i.e. `step-10-finished`) of the\n[Material Start ES6 Tutorial](https://github.com/angular/material-start/tree/es6-tutorial) branch\nin this repository. \n\nYou can see the [Live Demo here](https://angularjs-material-start.firebaseapp.com/).\n\nThere are many additional branches in this repository that you may find useful:\n\n - [`master`](https://github.com/angular/material-start/tree/master) (this branch) - A copy of the\n `es6` branch outlined below with additional notes about the available branches.\n - [`es5-tutorial`](https://github.com/angular/material-start/tree/es5-tutorial) - Step-by-step\n instructions that clearly demonstrate how the Starter application can be created in minutes using\n ES5. \n - [`es5`](https://github.com/angular/material-start/tree/es5) - The final ES5 version which you\n complete in the last step of the tutorials above.\n - [`es6-tutorial`](https://github.com/angular/material-start/tree/es6-tutorial) - Step-by-step\n instructions that clearly demonstrate how the Starter application can be created in minutes using\n ES6. \n - [`es6`](https://github.com/angular/material-start/tree/es6) - The final ES6 version which you\n complete in the last step of the tutorials above.\n - [`typescript`](https://github.com/angular/material-start/tree/typescript) - The final Starter\n Application built using Typescript.\n \n\u003e **Note:** We do not currently offer a `typescript-tutorial` branch as the steps are fairly similar\n  to the existing `es6-tutorial` branch.\n\n#### Purpose\n\nThis project uses the latest master branch of AngularJS Material to build the application outlined\nbelow.\n\n![material-starter-ux2](https://cloud.githubusercontent.com/assets/6004537/14996543/b588eb46-1137-11e6-803c-ce23996c9742.png)\n\nAbove is a snapshot of the Starter-App with a **Master-Detail** layout: showing a list of users\n(left) and a user detail view (right).\n\nAlso shown is the user experience that will be displayed for smaller device sizes. The responsive\nlayout reveals the **menu** button that can be used to hide the user list. And the **share** button\ncan be used to show the Share bottom sheet view.\n\nThis Starter app demonstrates how:\n\n*  AngularJS Material `layout` and `flex` options can easily configure HTML containers\n*  AngularJS Material components `\u003cmd-toolbar\u003e`, `\u003cmd-sidenav\u003e`, and `\u003cmd-icon\u003e` can quickly provide\n   a base application structure\n*  Custom controllers can be used and show `\u003cmd-bottomsheet\u003e` with HTML templates\n*  Custom controller can easily, and programmatically open/close the SideNav component\n*  Responsive breakpoints and `$mdMedia` are used\n*  Theming can be altered/configured using `$mdThemingProvider`\n\n\nThis sample application is purposed as both a learning tool and a skeleton application for a typical\n[AngularJS Material](http://angularjs.org/) web app, comprised of a side navigation area and a\ncontent area. You can use it to quickly bootstrap your angular webapp projects and dev environment\nfor these projects.\n\n- - -\n\n#### \"How to build an App\"\n\nHere are some generalized steps that may be used to conceptualize the application implementation\nprocess:\n\n1. Plan your layout and the components you want to use\n\n2. Use hard-coded HTML and mock content to make sure the components appear as desired\n\n3. Wire components to your application logic\n\n   \u003e Use the seamless integration possible with AngularJS directives and controllers.\u003cbr/\u003e\n   \u003e This integration assumes that you have unit tested your application logic.\n\n4. Add Responsive breakpoints\n\n5. Add Theming support\n\n6. Confirm ARIA compliance\n\n7. Write End-to-end (e2e) Tests\n\n   \u003e It is important to validate your application logic with AngularJS Material UI components.\n\n###### Wireframe\n\nThe illustration below shows how we planned the layout and identified the primary components that\nwill be used in the Starter app:\n\n\u003cbr/\u003e\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/210413/6444676/c247c8f8-c0c4-11e4-8206-208f55cbceee.png\"\u003e\n\n\u003e **Note:** The container #2 (above) is a simple `\u003cdiv\u003e` container and not an AngularJS Material\n  component.\n\n- - -\n\n##### Getting Started\n\nThis project uses [jspm.io](http://jspm.io), a package manager for SystemJS which is built on top\nof the dynamic ES6 module loader. This allows developers to load any module format (ES6, CommonJS,\nAMD, and globals).\n\n###### Prerequisites\n\nThis project assumes that you have NodeJS and any relevant development tools (like XCode) already\ninstalled.\n \n###### Getting Started\n\nClone this repository and execute the following commands in a terminal:\n\n* `git checkout master`\n* `npm install`\n* `npm run serve`\n\n\u003e **Note:** Open the dev console to see any warnings and browse the elements.\n\n###### Layout\n\nYou will notice a few files/directories within this project:\n\n 1. `app/src` - This is where all of your application files are stored.\n 2. `app/assets` - This folder contains some tutorial-provided images and icons which are used by\n    the application.\n 3. `index.html` - The entry point to your application. This uses System.js to load the\n    `app/src/boot/boot.js` bootstrap file which in turn loads the `app/src/app.js` file that imports\n     all of your dependencies and declares them as AngularJS modules, and configures the icons and\n     theming for the application.\n\n#### Troubleshooting\n\nIf you have issues getting the application to run or work as expected:\n\n1. Make sure you have installed JSPM and run the `jspm update` command.\n2. Reach out on our [Forum](https://groups.google.com/forum/#!forum/ngmaterial) to see if any other\n   developers have had the same issue.\n3. This project is based against the `master` branch of AngularJS Material, so it is always showing\n   the latest and greatest. You may want to update the `package.json` to use Version 1.1.0 or\n   another stable release to make sure it isn't because of something we changed recently.\n4. Search for the issue here on [GitHub](https://github.com/angular/material-start/issues?q=is%3Aissue+is%3Aopen).\n5. If you don't see an existing issue, please open a new one with the relevant information and the\n   details of the problem you are facing.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmaterial-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular%2Fmaterial-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmaterial-start/lists"}