├── .gitignore
├── Gulpfile.js
├── README.md
├── client
├── app
│ └── app.js
└── index.html
├── package.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | DS_Store
4 | dist
5 | client/lib
6 |
--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var sync = require('run-sequence');
3 | var browser = require('browser-sync');
4 | var webpack = require('webpack-stream');
5 | var todo = require('gulp-todoist');
6 |
7 | /*
8 | map of paths for using with the tasks below
9 | */
10 | var paths = {
11 | entry: 'client/app/app.js',
12 | app: ['client/app/**/*.{js,styl,html}'],
13 | js: 'client/app/**/*!(.spec.js).js',
14 | styl: 'client/app/**/*.styl',
15 | toCopy: ['client/index.html'],
16 | html: ['client/index.html', 'client/app/**/*.html'],
17 | dest: 'dist'
18 | };
19 |
20 | gulp.task('todo', function() {
21 | return gulp.src(paths.js)
22 | .pipe(todo({silent: false, verbose: true}));
23 | });
24 |
25 | gulp.task('build', ['todo'], function() {
26 | //TODO
27 | /*
28 | fill this task out to take in entry file
29 | and build using the webpack plugin.
30 | the plugin takes the webpack.config as an arg.
31 | be sure to stream the result to the destination path
32 | */
33 | });
34 |
35 | gulp.task('serve', function() {
36 | browser({
37 | port: process.env.PORT || 4500,
38 | open: false,
39 | ghostMode: false,
40 | server: {
41 | baseDir: 'dist'
42 | }
43 | });
44 | });
45 |
46 | /*
47 | simple task to copy over needed files to dist
48 | */
49 | gulp.task('copy', function() {
50 | return gulp.src(paths.toCopy, { base: 'client' })
51 | .pipe(gulp.dest(paths.dest));
52 | });
53 |
54 | /*
55 | task to watch files for changes and call build and copy tasks
56 | */
57 | gulp.task('watch', function() {
58 | gulp.watch(paths.app, ['build', browser.reload]);
59 | gulp.watch(paths.toCopy, ['copy']);
60 | });
61 |
62 | gulp.task('default', function(done) {
63 | sync('build', 'copy', 'serve', 'watch', done)
64 | });
65 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > [!NOTE]
2 | > This repo is from an archived version of the course. Watch the latest version of the course on [frontendmasters.com](https://frontendmasters.com/courses/angular-fundamentals/).
3 |
4 | # angular-components
5 |
6 | This repository's steps are in the branches. The final branch is "blog".
7 |
8 | To get on the correct branch use this command, replacing BRANCH with the branch you want to switch to.
9 |
10 | ```
11 | git checkout -b BRANCH origin/BRANCH
12 | ```
13 |
--------------------------------------------------------------------------------
/client/app/app.js:
--------------------------------------------------------------------------------
1 | const showMessage = ()=> {
2 | alert('it works!!!');
3 | }
4 |
5 | showMessage();
6 |
7 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ngBlog
6 |
7 |
8 | hey
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-blog",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "gulp"
9 | },
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "angular": "^1.4.3",
14 | "angular-animate": "^1.4.3",
15 | "angular-ui-router": "^0.2.15",
16 | "jeet": "^6.1.2",
17 | "lodash": "^3.10.0",
18 | "rupture": "^0.6.1"
19 | },
20 | "devDependencies": {
21 | "babel-loader": "^5.3.2",
22 | "browser-sync": "^2.7.13",
23 | "css-loader": "^0.15.4",
24 | "file-loader": "^0.8.4",
25 | "gulp": "^3.9.0",
26 | "gulp-todoist": "0.0.2",
27 | "node-libs-browser": "^0.5.2",
28 | "raw-loader": "^0.5.1",
29 | "run-sequence": "^1.1.1",
30 | "style-loader": "^0.12.3",
31 | "stylus-loader": "^1.2.1",
32 | "webpack": "^1.10.1",
33 | "webpack-stream": "^2.0.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | config for webpack. Will be used in
3 | the Gulpfile for building our app.
4 | Does not need gulp in order to do so,
5 | but we use gulp to orchestrate
6 | */
7 | module.exports = {
8 | output: {
9 | filename: 'bundle.js'
10 | },
11 |
12 | devtool: 'sourcemap',
13 |
14 | module: {
15 | loaders: [
16 | { test: /\.html$/, loader: 'raw' },
17 | { test: /\.styl$/, loader: 'css!style!stylus' },
18 | // TODO: create loader for .js filest ransfroming from ES2015 to ES5
19 | ]
20 | },
21 |
22 | stylus: {
23 | use: [require('jeet')(), require('rupture')()]
24 | }
25 | };
26 |
--------------------------------------------------------------------------------