Skip to content

Commit

Permalink
⚡️ Angular Fundamentals source
Browse files Browse the repository at this point in the history
toddmotto committed Jan 17, 2017
0 parents commit afc3312
Showing 847 changed files with 4,309,058 additions and 0 deletions.
20 changes: 20 additions & 0 deletions 01-first-component/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

# Change these settings to your own preference
indent_style = space
indent_size = 2

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
27 changes: 27 additions & 0 deletions 01-first-component/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Project
.idea

# Node
node_modules

# macOS
.DS_Store
.AppleDouble
.LSOverride
Icon
._*
.Spotlight-V100
.Trashes

## Windows
Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/

# Package Managers
yarn-error.log
npm-debug.log

# Cache
.awcache
82 changes: 82 additions & 0 deletions 01-first-component/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<a href="https://ultimateangular.com" target="_blank"><img src="https://toddmotto.com/img/ua.png"></a>

# Angular Fundamentals Seed

> This is the seed project for the [Angular Fundamentals](https://ultimateangular.com/courses/#angular-2) course by [Todd Motto](https://twitter.com/toddmotto).
## Project Setup and Tooling

### Tools

This course is recorded with the following tools, you can optionally follow along using the same, or your favourite text editor/IDE and browser.

*Text editor*: Visual Studio Code, you can [download it here](http://code.visualstudio.com) for both Mac, Windows and Linux.
*Browser*: Google Chrome, you can [download it here](https://www.google.com/chrome)

### Prerequisites

Please make sure that you have the following installed:

* Install the _latest version_ of [Node.js](http://nodejs.org) (Mac or Windows)
* Mac users can optionally `brew install node` if they have [brew](http://brew.sh) installed

* Node Sass, you _may_ need it if you haven't already got it installed:

```bash
npm install -g node-sass
```

### Project Install

To grab the seed project, either Fork this repo or [click here to download](https://github.com/UltimateAngular/angular-fundamentals-seed/archive/master.zip) the `.zip` folder and extract the files wherever you like on your machine.

#### Step 1: Package Manager

To install the project dependencies, you will need to install `yarn`. To install `yarn`, run the following in your terminal:

```bash
npm install -g yarn
```

Mac users can alternatively use `brew` to install `yarn`.

```bash
brew update
brew install yarn
```

If you experience any issues when installing/using `yarn` you can checkout the installation instructions [here](https://yarnpkg.com/en/docs/install).

##### Step 2: Project Dependencies

Now that we have a package manager, we can install the project dependencies. You can do this by running:

```bash
yarn install
```

This will install our dependencies for running our Angular application.

#### Step 3: Running the project

During development, the project is built using `webpack-dev-server`. This provides a local development server as well as having webpack recompile our app when a file changes. The project will also automatically refresh the page whenever we make changes.

To start the project in development, run:

```
yarn start
```

This will output some information about the project (such as the TypeScript version and build progress). Once you see "build completed", you are ready to code!

Open your browser to [localhost:4000](http://localhost:4000) to start running the code.

### Project Tooling

The project uses `webpack` to build and compile all of our assets. This will do the following for us:

- Compile all our TypeScript code into JavaScript (starting from `main.ts` and branching outwards from imported files)
- Bundle all our JavaScript into one file to use
- Allow us to use SASS for our component's CSS files
- Provide the polyfills needed to run our app in all modern browsers
- Mock a JSON backend using [json-server](https://github.com/typicode/json-server)
3 changes: 3 additions & 0 deletions 01-first-component/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.app {
background: red;
}
17 changes: 17 additions & 0 deletions 01-first-component/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
styleUrls: ['app.component.scss'],
template: `
<div class="app">
{{ title }}
</div>
`
})
export class AppComponent {
title: string;
constructor() {
this.title = 'Ultimate Angular';
}
}
19 changes: 19 additions & 0 deletions 01-first-component/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
imports: [
BrowserModule,
CommonModule
],
bootstrap: [
AppComponent
],
declarations: [
AppComponent
]
})
export class AppModule {}
72 changes: 72 additions & 0 deletions 01-first-component/css/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font: 300 15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

html, body {
height: 100%;
margin: 0;
padding: 0;
background: #fff;
-webkit-font-smoothing: antialiased;
color: #545e6f;
}

img {
vertical-align: bottom;
}
img a {
border: 0;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: #9f72e6;
text-decoration: none;
}
input,
button {
outline: 0;
}
input {
border: none;
background: #fff;
font-size: 13px;
padding: 6px 30px 6px 10px;
border-radius: 1px;
box-shadow: 1px 1px 3px 1px #ccc;
border: 1px solid #eee;
}
button {
cursor: pointer;
background: #9f72e6;
border: 0;
border-radius: 2px;
padding: 5px 10px;
text-align: center;
color: #fff;
}
p {
margin: 5px 0;
}

body {
padding: 50px;
}

h3 {
font-size: 22px;
font-weight: 400;
margin: 0;
}
h4 {
font-size: 18px;
font-weight: 300;
margin: 0;
}
1 change: 1 addition & 0 deletions 01-first-component/db.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
14 changes: 14 additions & 0 deletions 01-first-component/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<base href="/">
<title>Ultimate Angular</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<app-root></app-root>

<script src="/vendor/vendor.js"></script>
<script src="/build/app.js"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions 01-first-component/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
46 changes: 46 additions & 0 deletions 01-first-component/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"name": "angular-fundamentals-seed",
"version": "0.1.0",
"description": "Ultimate Angular: Angular Fundamentals Seed",
"repository": {
"url": "git@github.com:UltimateAngular/angular-fundamentals-seed.git",
"type": "git"
},
"license": "MIT",
"author": "Ultimate Angular",
"dependencies": {
"@angular/common": "4.0.0-beta.1",
"@angular/compiler": "4.0.0-beta.1",
"@angular/core": "4.0.0-beta.1",
"@angular/forms": "4.0.0-beta.1",
"@angular/http": "4.0.0-beta.1",
"@angular/platform-browser": "4.0.0-beta.1",
"@angular/platform-browser-dynamic": "4.0.0-beta.1",
"@angular/router": "4.0.0-beta.1",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.1",
"ts-helpers": "1.1.2",
"zone.js": "0.7.4"
},
"scripts": {
"prestart": "webpack --config vendor/webpack.config.js",
"start": "webpack-dev-server"
},
"devDependencies": {
"@types/core-js": "0.9.34",
"@types/node": "6.0.46",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "3.0.0-beta.17",
"chalk": "1.1.3",
"core-js": "2.4.1",
"json-server": "0.9.4",
"node-sass": "3.13.0",
"progress-bar-webpack-plugin": "1.9.0",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.0",
"sass-loader": "4.0.2",
"typescript": "2.1.4",
"webpack": "2.2.0-rc.3",
"webpack-dev-server": "2.2.0-rc.0"
}
}
22 changes: 22 additions & 0 deletions 01-first-component/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "es5",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": true,
"pretty": true,
"sourceMap": true,
"lib": ["es5", "dom"],
"strictNullChecks": false
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"forkChecker": true,
"useCache": true
},
"compileOnSave": false,
"buildOnSave": false
}
Loading

0 comments on commit afc3312

Please sign in to comment.