Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 2ba183a

Browse files
topherfangiotopherfangio
committed
Reset the master branch to ES6 and add branch info.
In order to reduce confusion and encourage developers to try newer technologies, we have updated the `master` branch of this repository to utilize ES6 and to have links and information which point users to the other available branches.
0 parents commit 2ba183a

30 files changed

+998
-0
lines changed

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
logs/*
2+
node_modules/
3+
bower_components/
4+
app/jspm_packages
5+
tmp
6+
.DS_Store
7+
.idea
8+
!.gitkeep

‎.jshintrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"globalstrict": true,
3+
"globals": {
4+
"angular": false,
5+
"describe": false,
6+
"it": false,
7+
"expect": false,
8+
"beforeEach": false,
9+
"afterEach": false,
10+
"module": false,
11+
"inject": false
12+
}
13+
}

‎LICENSE‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License
2+
3+
Copyright (c) 2010-2014 Google, Inc. http://angularjs.org
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+

‎README.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# Angular Material-Start (ES6)
2+
3+
This branch contains the final/complete version (i.e. `step-10-finished`) of the
4+
[Material Start ES6 Tutorial](https://github.com/angular/material-start/tree/es6-tutorial) branch
5+
in this repository.
6+
7+
There are many additional branches in this repository that you may find useful:
8+
9+
- [`master`](https://github.com/angular/material-start/tree/master) (this branch) - A copy of the
10+
`es6` branch outlined below with additional notes about the available branches.
11+
- [`es5-tutorial`](https://github.com/angular/material-start/tree/es5-tutorial) - Step-by-step
12+
instructions that clearly demonstrate how the Starter application can be created in minutes using
13+
ES5.
14+
- [`es5`](https://github.com/angular/material-start/tree/es5) - The final ES5 version which you
15+
complete in the last step of the tutorials above.
16+
- [`es6-tutorial`](https://github.com/angular/material-start/tree/es6-tutorial) - Step-by-step
17+
instructions that clearly demonstrate how the Starter application can be created in minutes using
18+
ES6.
19+
- [`es6`](https://github.com/angular/material-start/tree/es6) - The final ES6 version which you
20+
complete in the last step of the tutorials above.
21+
- [`typescript`](https://github.com/angular/material-start/tree/typescript) - The final Starter
22+
Application built using Typescript.
23+
24+
> **Note:** We do not currently offer a `typescript-tutorial` branch as the steps are fairly similar
25+
to the existing `es6-tutorial` branch.
26+
27+
#### Purpose
28+
29+
This project uses the latest master branch of Angular Material to build the application outlined
30+
below.
31+
32+
![material-starter-ux2](https://cloud.githubusercontent.com/assets/6004537/14996543/b588eb46-1137-11e6-803c-ce23996c9742.png)
33+
34+
Above is a snaphot of the Starter-App with a **Master-Detail** layout: showing a list of users
35+
(left) and a user detail view (right).
36+
37+
Also shown is the user experience that will be displayed for smaller device sizes. The responsive
38+
layout reveals the **menu** button that can be used to hide the user list. And the **share** button
39+
can be used to show the Share bottom sheet view.
40+
41+
This Starter app demonstrates how:
42+
43+
* Angular Material `layout` and `flex` options can easily configure HTML containers
44+
* Angular Material components `<md-toolbar>`, `<md-sidenav>`, and `<md-icon>` can quickly provide
45+
a base application structure
46+
* Custom controllers can be used and show `<md-bottomsheet>` with HTML templates
47+
* Custom controller can easily, and programmatically open/close the SideNav component
48+
* Responsive breakpoints and `$mdMedia` are used
49+
* Theming can be altered/configured using `$mdThemingProvider`
50+
51+
52+
This sample application is purposed as both a learning tool and a skeleton application for a typical
53+
[AngularJS Material](http://angularjs.org/) web app, comprised of a side navigation area and a
54+
content area. You can use it to quickly bootstrap your angular webapp projects and dev environment
55+
for these projects.
56+
57+
- - -
58+
59+
#### "How to build an App"
60+
61+
Here are some generalized steps that may be used to conceptualize the application implementation
62+
process:
63+
64+
1. Plan your layout and the components you want to use
65+
66+
2. Use hard-coded HTML and mock content to make sure the components appear as desired
67+
68+
3. Wire components to your application logic
69+
70+
> Use the seamless integration possible with Angular directives and controllers.<br/>
71+
> This integration assumes that you have unit tested your application logic.
72+
73+
4. Add Responsive breakpoints
74+
75+
5. Add Theming support
76+
77+
6. Confirm ARIA compliance
78+
79+
7. Write End-to-end (e2e) Tests
80+
81+
> It is important to validate your application logic with Angular Material UI components.
82+
83+
###### Wirefame
84+
85+
The illustration below shows how we planned the layout and identified the primary components that
86+
will be used in the Starter app:
87+
88+
<br/>
89+
![plancomponents2](https://cloud.githubusercontent.com/assets/210413/6444676/c247c8f8-c0c4-11e4-8206-208f55cbceee.png)
90+
91+
> **Note:** The container #2 (above) is a simple `<div>` container and not an Angular Material
92+
component.
93+
94+
- - -
95+
96+
##### Getting Started
97+
98+
This project uses [jspm.io](http://jspm.io), a package manager for SystemJS which is built on top
99+
of the dynamic ES6 module loader. This allows developers to load any module format (ES6, CommonJS,
100+
AMD, and globals).
101+
102+
###### Prerequisites
103+
104+
This project assumes that you have NodeJS and any relevant development tools (like XCode) already
105+
installed.
106+
107+
###### Getting Started
108+
109+
Clone this repository and execute the following commands in a terminal:
110+
111+
* `git checkout es6`
112+
* `npm install jspm live-server -g`
113+
* `jspm update`
114+
* `live-server --open=app`
115+
116+
> **Note:** You should use a web-server (like live-server above) to view your app in the browser. Open
117+
the dev console to see any warnings and browse the elements.
118+
119+
###### Layout
120+
121+
You will notice a few files/directories within this project:
122+
123+
1. `app/src` - This is where all of your application files are stored.
124+
2. `app/assets` - This folder contains some tutorial-provided images and icons which are used by
125+
the application.
126+
3. `index.html` - The entry point to your application. This uses System.js to load the
127+
`app/src/boot/boot.js` bootstrap file which in turn loads the `app/src/app.js` file that imports
128+
all of your dependencies and declares them as Angular modules, and configures the icons and
129+
theming for the application.
130+
131+
#### Troubleshooting
132+
133+
If you have issues getting the application to run or work as expected:
134+
135+
1. Make sure you have installed JSPM and run the `jspm update` command.
136+
2. Reach out on our [Forum](https://groups.google.com/forum/#!forum/ngmaterial) to see if any other
137+
developers have had the same issue.
138+
3. This project is based against the `master` branch of Angular Material, so it is always showing
139+
the latest and greatest. You may want to update the `package.json` to use Version 1.1.0 or
140+
another stable release to make sure it isn't because of something we changed recently.
141+
4. Search for the issue here on [GitHub](https://github.com/angular/material-start/issues?q=is%3Aissue+is%3Aopen).
142+
5. If you don't see an existing issue, please open a new one with the relevant information and the
143+
details of the problem you are facing.

‎app/assets/app.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
[ng-cloak] {
2+
display: none;
3+
}
4+
5+
html, body {
6+
font-family: 'Roboto', sans-serif;
7+
font-size: 14px;
8+
height: 100%;
9+
margin: 0px;
10+
padding: 0px;
11+
}
12+
13+
/* Toolbar area */
14+
15+
.menu {
16+
background-color: transparent;
17+
border: none;
18+
height: 38px;
19+
margin: 16px;
20+
width: 36px;
21+
}
22+
23+
md-toolbar h1 {
24+
margin: auto;
25+
}
26+
27+
/* Sidenav area */
28+
29+
md-list .md-button {
30+
color: inherit;
31+
font-weight: 500;
32+
text-align: left;
33+
width: 100%;
34+
}
35+
36+
md-list .md-button.selected {
37+
color: #03a9f4;
38+
}
39+
40+
md-sidenav md-list {
41+
padding: 0px 0px 8px 0px;
42+
}
43+
44+
/* Primary content area */
45+
46+
#content {
47+
overflow: hidden;
48+
}
49+
50+
#content {
51+
padding-left: 40px;
52+
padding-right: 40px;
53+
padding-top: 5px;
54+
}
55+
56+
#content .md-button.share {
57+
background-color: transparent;
58+
border: none;
59+
width: 48px;
60+
height: 48px;
61+
margin: 8px auto 16px 0;
62+
position: absolute;
63+
top: 10px;
64+
right: 25px;
65+
}
66+
67+
#content md-icon.avatar {
68+
margin-top: 10px;
69+
}
70+
71+
#content .md-button.share > md-icon {
72+
fill: black;
73+
width: 36px;
74+
height: 36px;
75+
}
76+
77+
md-button.menuBtn > md-icon {
78+
fill: white;
79+
width: 24px;
80+
height: 24px;
81+
}
82+
83+
#content .md-button.share:active > md-icon {
84+
background-color: #dadada;
85+
border-radius: 75%;
86+
padding: 4px;
87+
transition: all 100ms ease-out 30ms;
88+
}
89+
90+
#content img {
91+
display: block;
92+
height: auto;
93+
max-width: 500px;
94+
}
95+
96+
/* Utils */
97+
98+
.content-wrapper {
99+
position: relative;
100+
}
101+
102+
/* Typography support coming in 0.8.0 */
103+
104+
md-toolbar h1 {
105+
font-size: 1.250em;
106+
font-weight: 400;
107+
}
108+
109+
.avatar {
110+
position: relative;
111+
width: 128px;
112+
height: 128px;
113+
border: 1px solid #ddd;
114+
border-radius: 50%;
115+
display: inline-block;
116+
overflow: hidden;
117+
margin: 0px;
118+
vertical-align: middle;
119+
zoom: 0.70;
120+
transform: translateZ(0);
121+
-webkit-transform: scale(0.70);
122+
-moz-transform: scale(0.70);
123+
}
124+
125+
md-bottom-sheet md-icon {
126+
margin-right: 20px;
127+
}
128+
129+
span.name {
130+
font-weight: bold;
131+
font-size: 1.1em;
132+
padding-left: 5px;
133+
}

‎app/assets/svg/avatar-1.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎app/assets/svg/avatar-4.svg‎

Lines changed: 16 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)