├── README.md
├── angularjs
├── boot-it-up.md
├── controllers.md
├── dependency-injection.md
├── directives.md
├── directory-structure.md
├── intro.md
├── services-and-factories.md
└── states.md
└── koa
├── boot-it-up.md
├── directory-structure.md
├── express-vs-koa.md
├── intro.md
├── middlewares.md
├── routes.md
└── set-up-a-mongo-database.md
/README.md:
--------------------------------------------------------------------------------
1 | # Koa x AngularJS Lecture
2 | by *Han Kim*
3 |
4 | Today we'll explore the wonders of [Koa](http://koajs.com/), a :fire: backend `node.js` framework that is growing in popularity, and [AngularJS](https://angularjs.org/), the single page stunner :star2:
5 |
6 | We're going to be live coding a simple decoupled app that lets you send fun gifs using the [Giphy API](https://api.giphy.com/)!
7 |
8 | 
9 |
10 | Feel free to star this repo for future practice and reference!
11 |
12 | ## Lecture Outline
13 |
14 | #### Koa
15 | - [ ] [Intro](koa/intro.md)
16 | - [ ] [Express vs. Koa](koa/express-vs-koa.md)
17 | - [ ] [Boot It Up](koa/boot-it-up.md)
18 | - [ ] [Directory Structure](koa/directory-structure.md)
19 | - [ ] [Middlewares](koa/middlewares.md)
20 | - [ ] [Routes](koa/routes.md)
21 | - [ ] [Set up A Mongo Database](koa/set-up-a-mongo-database.md)
22 |
23 | #### AngularJS
24 | - [ ] [Intro](angularjs/intro.md)
25 | - [ ] [Boot It Up](angularjs/boot-it-up.md)
26 | - [ ] [Directory Structure](angularjs/directory-structure.md)
27 | - [ ] [Dependency Injection](angularjs/dependency-injection.md)
28 | - [ ] [States](angularjs/states.md)
29 | - [ ] [Controllers](angularjs/controllers.md)
30 | - [ ] [Services & Factories](angularjs/services-and-factories.md)
31 | - [ ] [Directives](angularjs/directives.md)
32 |
33 | #### Decouple Architecture
34 |
35 | Note: *This part of the notes is WIP!*
36 | - [ ] User Auth
37 | - [ ] Server side Auth
38 | - [ ] Client Side Auth
39 | - [ ] Hook up to [Giphy API](https://api.giphy.com/)!\
40 |
41 | ## See the final sample app: https://github.com/hankim813/dbc-sample-app
42 |
43 | # Let's Code!
44 | Go to [Koa: Intro](./koa/intro.md)
45 |
46 | #### Final Sample App: https://github.com/hankim813/dbc-sample-app
47 | _____________________
48 |
49 | ##### Sources
50 |
51 | - [koa-boot](https://github.com/hankim813/koa-boot)
52 | - [angular-boot](https://github.com/hankim813/angular-boot)
53 | - [Giphy API](https://api.giphy.com/)
54 | - [Mongo](https://www.mongodb.org/)
55 | - [AngularJS](https://angularjs.org/)
56 | - [Koa](http://koajs.com/)
57 | - [Koa middlewares and frameworks](https://github.com/koajs/koa/wiki)
58 | - [Mongo](https://www.mongodb.org/)
59 | - [Angular Style Guide](https://github.com/johnpapa/angular-styleguide)
60 | - [Scotch.io](https://scotch.io)
61 |
--------------------------------------------------------------------------------
/angularjs/boot-it-up.md:
--------------------------------------------------------------------------------
1 | 
2 | # Boot It Up
3 |
4 | Clone the [angular-boot](https://github.com/hankim813/angular-boot) repo and remove the git directory:
5 |
6 | ```
7 | $ git clone git@github.com:hankim813/angular-boot.git
8 | $ cd angular-boot/
9 | $ rm -rf .git
10 | ```
11 |
12 | ## Usage
13 |
14 | ```
15 | $ make
16 | ```
17 |
18 | ________________________________
19 |
20 | Prev: [Intro](./intro.md) | Next: [Directory Structure](./directory-structure.md) |
21 | Home: [Lecture Outline](../README.md)
22 |
--------------------------------------------------------------------------------
/angularjs/controllers.md:
--------------------------------------------------------------------------------
1 | 
2 | # Controllers
3 |
4 | Here's where things get fun. Controllers are how we connect the model and the view. Here's a sample controller:
5 |
6 | ```js
7 | angular
8 | .module('app')
9 | .controller('someController', ['someDependency', function(someDependency){
10 | var vm = this;
11 | }]);
12 | ```
13 |
14 | ## Two Way Data Binding
15 |
16 | This is probably the coolest thing about Angular as well as why I really like the MV* structure. Your view is always in sync with the data in
17 | your controller!
18 |
19 |
20 | ```js
21 | // state.js
22 |
23 | .state('sample', {
24 | url: '/',
25 | templateUrl: 'view.html',
26 | controller: 'someController',
27 | controllerAs: 'dbc'
28 | });
29 | ```
30 |
31 |
32 | ```js
33 | // controller.js
34 |
35 | .controller('someController', ['someDependency', function(someDependency){
36 | var vm = this;
37 |
38 | vm.data = 1;
39 | vm.addOne = addOne();
40 |
41 | function addOne(){
42 | ++vm.data;
43 | }
44 | }]);
45 | ```
46 |
47 |
48 | ```html
49 |
50 |
51 | {{ dbc.data }}
52 |
53 |
54 |
55 | ```
56 | ____________________
57 | Prev: [States](./states.md) | Next: [Services & Factories](./services-and-factories.md) |
58 | Home: [Lecture Outline](../README.md)
59 |
--------------------------------------------------------------------------------
/angularjs/dependency-injection.md:
--------------------------------------------------------------------------------
1 | 
2 | # Dependency Injection
3 |
4 | One key aspect of Angular as a framework is how it relies on dependency injection. There are few places you need to "inject" dependencies:
5 |
6 | The `index.html`:
7 |
8 | ```html
9 |
10 |
11 |
12 |
13 | ```
14 |
15 | The Angular Module:
16 |
17 | ```js
18 | angular
19 | .module('app', [
20 | 'ui.router',
21 | 'ngStorage',
22 | 'ngCookies'
23 | ])
24 | ```
25 |
26 | Functions of the module:
27 |
28 | ```js
29 | .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider){ }]);
30 | ```
31 |
32 | *Note*: that the order of your dependecy injections must be the same as the order of the function parameters! :boom:
33 |
34 | Dependency injection allows Angular to be modular and makes your code cleaner and pluggable :)
35 | ________________________________
36 |
37 | Prev: [Directory Structure](./directory-structure.md) | Next: [States](./states.md) |
38 | Home: [Lecture Outline](../README.md)
39 |
--------------------------------------------------------------------------------
/angularjs/directives.md:
--------------------------------------------------------------------------------
1 | 
2 | # Directives
3 |
4 | Directives are what makes Angular so magical in my opinion. At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
5 |
6 | Some popular built-in directives include, `ng-model`, `ng-repeat`, `ng-if`, `ng-show`, `ng-hide`, and `ng-class`.
7 |
8 | You can also opt to write your own custom directives!
9 |
10 | Good rule of thumb for when to use directives is when you need to modify the DOM, especially with `jQuery`.
11 | You can also treat directives as UI-kits that can serve as a template.
12 |
13 | #### Source: https://docs.angularjs.org/guide/directive
14 |
15 | ________________________________
16 |
17 | Prev: [Services & Factories](./services-and-factories.md) | Next: [User Auth](../decoupled/user-auth.md) |
18 | Home: [Lecture Outline](../README.md)
19 |
--------------------------------------------------------------------------------
/angularjs/directory-structure.md:
--------------------------------------------------------------------------------
1 | 
2 | # Directory Structure
3 |
4 | Again -- the directory structure is dependent upon you. But I like to group things by "components".
5 |
6 | Generally you will have an `index.html` that hosts the main "single" page that will serve the app.
7 |
8 | 
9 |
10 | ________________________________
11 |
12 | Prev: [Boot It Up](./boot-it-up.md) | Next: [Dependency Injection](./dependency-injection.md) |
13 | Home: [Lecture Outline](../README.md)
14 |
--------------------------------------------------------------------------------
/angularjs/intro.md:
--------------------------------------------------------------------------------
1 | 
2 | # Intro
3 |
4 | AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
5 |
6 | Angular is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?
7 |
8 | ## MVC vs. MV*
9 |
10 | Traditional web applications and frameworks like Ruby on Rails adopt an MVC structure where the controller bridges the model and the view. But in Angular, because everything is done in the browser, the "view" is a star since it also acts as the controller.
11 |
12 | ## Style Conventions
13 |
14 | The way I write Angular has been pretty influenced by an awesome style guide [here](https://github.com/johnpapa/angular-styleguide)! I like it because it makes my code readable and consistent across my applications.
15 |
16 | #### Source: https://docs.angularjs.org/guide/introduction
17 | ______________________________
18 | Prev: [Set up a Mongo Database](../koa/set-up-a-mongo-database.md) | Next: [Boot It Up](./boot-it-up.md) | Home: [Lecture Outline](../README.md)
19 |
--------------------------------------------------------------------------------
/angularjs/services-and-factories.md:
--------------------------------------------------------------------------------
1 | 
2 | # Services and Factories
3 |
4 | Utilizing services and factories really allows you to build modular, composable, and pluggable web application.
5 | Factories are generally used basically for a lot of CRUD operations. Services is how you store and pass around the current state of app's information, such as user data.
6 |
7 | You can inject services and factories where you need them!
8 |
9 | The general communication between controllers, services, and factories should be:
10 |
11 | > controllers --- ask ---> services --- ask ---> factories
12 |
13 | So you should only inject factories into services and you should only inject services into controllers.
14 |
15 | The common scenario is that a controller needs some information, say.. the current user data. The controller would ask the service for this information. If the service does not already have the current user data, it would then ask the factory to fetch that data from your database. Once the factory returns the user data, the service would save this data and then return to the controller.
16 |
17 | Let's take a look at a sample pair of services and factories:
18 |
19 | ```js
20 | // service.js
21 |
22 | angular
23 | .module('app')
24 | .factory('userService', ['userFactory', function(userFactory){
25 | function fetchUser () {
26 | return userFactory.getUser();
27 | }
28 |
29 | return {
30 | user: fetchUser
31 | };
32 | }]);
33 | ```
34 |
35 | ```js
36 | // factory.js
37 |
38 | angular
39 | .module('app')
40 | .factory('userFactory', ['$http', function($http){
41 | function getUser() {
42 | // make ajax call to DB
43 | }
44 |
45 | return {
46 | getUser: getUser
47 | };
48 | }]);
49 | ```
50 |
51 |
52 | ________________________________
53 |
54 | Prev: [Controllers](./controllers.md) | Next: [Directives](./directives.md) |
55 | Home: [Lecture Outline](../README.md)
56 |
--------------------------------------------------------------------------------
/angularjs/states.md:
--------------------------------------------------------------------------------
1 | 
2 | # States
3 |
4 | Since every different route is still technically the same page, most of the Angular community like to think of the routes as "states". Today, we'll be using the fan favorite, [`ui-router`](https://github.com/angular-ui/ui-router), to configure our states.
5 |
6 | Let's define a simple state:
7 |
8 | ```js
9 | .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider){
10 |
11 | // Redirect all invalid routes to
12 | $urlRouterProvider.otherwise('/');
13 |
14 | // Define states
15 | $stateProvider
16 |
17 | .state('sample', {
18 | url: '/',
19 | templateUrl: '../components/sample/index.html',
20 | controller: 'sampleController',
21 | });
22 | }]);
23 | ```
24 |
25 | `.state()` function takes the name of the state and an object with a few more advanced configurations.
26 |
27 | `url`: The address you'll see for that state in the browser.
28 | `templateUrl`: Define the HTML template you want to render for this state.
29 | `controller`: Define the name of the controller that will be in charge of the state.
30 | `controllerAs`: An alias for the controller within your view.
31 |
32 | ## Nested Views
33 |
34 | You can have parent and children views by nesting the states:
35 |
36 | ```js
37 | .state('parent', {
38 | url: '/parent'
39 | })
40 |
41 | .state('parent.child', {
42 | url: '/child' // this will render as 'parent/child'
43 | })
44 | ```
45 |
46 | The `url` of the parent state will always prepend the `url` of the child states. In the HTML of the parent state, you must have `ui-vew` element to render it's child states:
47 |
48 | ```html
49 |
50 | ```
51 |
52 | ## Challenge
53 |
54 | Let's build a parent state for the navbar.
55 |
56 | #### Source: https://github.com/angular-ui/ui-router/wiki
57 | ________________________________
58 |
59 | Prev: [Dependency Injection](./dependency-injection.md) | Next: [Controllers](./controllers.md) |
60 | Home: [Lecture Outline](../README.md)
61 |
--------------------------------------------------------------------------------
/koa/boot-it-up.md:
--------------------------------------------------------------------------------
1 | 
2 | # Boot It Up
3 |
4 | Clone the [koa-boot](https://github.com/hankim813/koa-boot) repo and remove the git directory:
5 |
6 | ```
7 | $ git clone git@github.com:hankim813/koa-boot.git
8 | $ cd koa-boot/
9 | $ rm -rf .git
10 | ```
11 |
12 | ## Usage
13 |
14 | ```
15 | $ make
16 | ```
17 |
18 | ________________________________
19 |
20 | Prev: [Express vs. Koa](./express-vs-koa.md) | Next: [Directory Structure](./directory-structure.md) |
21 | Home: [Lecture Outline](../README.md)
22 |
--------------------------------------------------------------------------------
/koa/directory-structure.md:
--------------------------------------------------------------------------------
1 | 
2 | # Directory Structure
3 |
4 | When it comes to how you want to organize your koa app, in the end, it's all up to you. I personally like to organize things at a component level:
5 |
6 | 
7 |
8 | ________________________________
9 |
10 | Prev: [Boot It Up](./boot-it-up.md) | Next: [Middlewares](./middlewares.md) |
11 | Home: [Lecture Outline](../README.md)
12 |
--------------------------------------------------------------------------------
/koa/express-vs-koa.md:
--------------------------------------------------------------------------------
1 | 
2 | # Express vs. Koa
3 |
4 | Philosophically, Koa aims to "fix and replace node", whereas Express "augments node". Koa uses co to rid apps of callback hell and simplify error handling.
5 |
6 | Koa exposes its own this.request and this.response objects instead of node's `req` and `res` objects.
7 |
8 | Express, on the other hand, augments node's `req` and `res` objects with additional properties and methods and includes many other "framework" features, such as routing and templating, which Koa does not.
9 |
10 | Thus, Koa can be viewed as an *abstraction* of node.js's `http` modules, where as Express is an application *framework* for node.js.
11 |
12 | | Feature | Koa | Express |
13 | |------------------:|-----|---------|
14 | | Middleware Kernel | ✓ | ✓ |
15 | | Routing | | ✓ |
16 | | Templating | | ✓ |
17 | | Sending Files | | ✓ |
18 | | JSONP | | ✓ |
19 |
20 | ## TLDR -- How is Koa different?
21 |
22 | #### Generated-based control flow
23 |
24 | - No callback hell.
25 | - Better error handling through try/catch.
26 | - No need for domains.
27 |
28 | #### Koa is barebones
29 |
30 | - Koa does not include any middleware.
31 | - Routing is not provided.
32 | - Many convenience utilities are not provided. For example, sending files.
33 | - Koa is more modular.
34 |
35 | #### Koa abstracts node's request/response
36 |
37 | - Less hackery.
38 | - Better user experience.
39 | - Proper stream handling.
40 |
41 | #### Source: http://koajs.com/
42 | ________________________________
43 |
44 | Prev: [Intro](./intro.md) | Next: [Boot It Up](./boot-it-up.md) |
45 | Home: [Lecture Outline](../README.md)
46 |
--------------------------------------------------------------------------------
/koa/intro.md:
--------------------------------------------------------------------------------
1 | 
2 | # Intro
3 |
4 | [Koa](http://koajs.com/) is a new web framework designed by the team behind Express, which aims to be a **smaller**, more **expressive**, and more **robust** foundation for web applications and APIs. Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.
5 |
6 | ## Dependencies
7 |
8 | #### node 0.11.x or higher
9 |
10 | Koa needs to be running `node 0.11.x` or higher so that we can use the `--harmony` flag. Would highly recommending using [n](https://github.com/visionmedia/n), a simple node version manager to quickly install the right `node` version.
11 |
12 | ```
13 | $ npm install -g n
14 | $ n 0.11
15 | $ node --harmony my-koa-app.js
16 | ```
17 |
18 | ## What is it?
19 |
20 | A Koa application is an object containing an array of middleware generator functions which are composed and executed in a stack-like manner upon request. Koa is similar to many other middleware systems that you may have encountered such as Ruby's Rack, Connect, and so on - however a key design decision was made to provide high level "sugar" at the otherwise low-level middleware layer. This improves **interoperability**, **robustness**, and makes writing middleware much more **enjoyable**.
21 |
22 | This includes methods for common tasks like content-negotiation, cache freshness, proxy support, and redirection among others. Despite supplying a reasonably large number of helpful methods Koa maintains a small footprint, as no middlewares are bundled.
23 |
24 | Boot it up in six lines of code:
25 |
26 | ```js
27 | var koa = require('koa');
28 | var app = koa();
29 |
30 | app.use(function *(){
31 | this.body = 'Hello World';
32 | });
33 |
34 | app.listen(3000);
35 | ```
36 |
37 | #### Source: http://koajs.com/
38 | ________________________________
39 |
40 | Prev: [Lecture Outline](../README.md) | Next: [Express vs. Koa](./express-vs-koa.md)
41 |
--------------------------------------------------------------------------------
/koa/middlewares.md:
--------------------------------------------------------------------------------
1 | 
2 | # Middlewares
3 |
4 | Koa is essentially just an object containing an array of middleware generator functions. Middlewares is how you can really customize your Koa apps. Very pluggable since it works in a stack-like manner. It makes architecting your backend super fun!
5 |
6 | You can inject middlewares by simply using `.use()`.
7 |
8 | 
9 |
10 | Remember that Koa works in a stack-like manner so the order of where you put the middleware in your code matters!
11 |
12 | 
13 |
14 | You can move onto the next middleware in line by:
15 |
16 | ```js
17 | yield next;
18 | ```
19 |
20 | You can see the cascading effect of how Koa's middlewares goes downstream then back upstream:
21 |
22 | 
23 | 
24 |
25 | ## Challenge
26 |
27 | Build your own [error handler](https://github.com/koajs/koa/wiki/Error-Handling) utilizing this down/up stream behavior of Koa middlewares!
28 |
29 |
30 | #### Resource
31 |
32 | Check out some cool middlewares for Koa [here](https://github.com/koajs/koa/wiki).
33 |
34 | ________________________________
35 |
36 | Prev: [Directory Structure](./directory-structure.md) | Next: [Routes](./routes.md) | Home: [Lecture Outline](../README.md)
37 |
--------------------------------------------------------------------------------
/koa/routes.md:
--------------------------------------------------------------------------------
1 | 
2 | # Routes
3 |
4 | Let's talk about some routes! :boom:
5 |
6 | We're going to use `koa-route`, which is a dead simple router.
7 |
8 | ## Installation & Usage
9 |
10 | ```
11 | $ npm install --save koa-route
12 | ```
13 |
14 | ```js
15 | var router = require('koa-route');
16 |
17 | app.use(router.get('/', function *(next){
18 | this.request; // this is koa request
19 | this.response; // this is koa response
20 | }));
21 | ```
22 |
23 | Koa's `request` and `response` objects are abstractions on top of node's vanilla request/reponse object, providing additional functionality that is useful for every day HTTP server development.
24 |
25 | ## Challenge
26 |
27 | Build a RESTful `POST` route for `/users` that accepts user registration data.
28 |
29 | ________________________________
30 |
31 | Prev: [Middlewares](./middlewares.md) | Next: [Set Up A Mongo Database](./set-up-a-mongo-database.md) | Home: [Lecture Outline](../README.md)
32 |
--------------------------------------------------------------------------------
/koa/set-up-a-mongo-database.md:
--------------------------------------------------------------------------------
1 | 
2 | # Set Up Mongo Database
3 |
4 | Let's quickly set up a DB to save users! Mongo is a no-sql database that is super easy to use since you can basically dump anything into a database. I encourage you to learn more about it!
5 |
6 | ## Installation
7 |
8 | Download [MongoDB](https://www.mongodb.org/downloads#production).
9 |
10 | We'll need to use `monk`, `co-monk`, and `password-hash` as well:
11 |
12 | ```
13 | $ npm install --save monk
14 | $ npm install --save co-monk
15 | $ npm install --save password-hash
16 | ```
17 |
18 | `monk` lets you easily interact with a mongo DB. `co-monk` is a wrapper that basically makes all the functions in `monk` return generator functions so that we can use `yield`! `password-hash` will be used to hash passwords of course.
19 |
20 | database.js:
21 |
22 | ```js
23 | /**
24 | * Module dependencies
25 | */
26 |
27 | var db = process.env.MONGOLAB_URI || 'mongodb://localhost/dbc';
28 | var monk = require('monk');
29 |
30 | /**
31 | * Expose db
32 | */
33 |
34 | module.exports = monk(db);
35 | ```
36 |
37 | user.js:
38 |
39 | ```js
40 | /**
41 | * Module dependencies
42 | */
43 |
44 | var db = require('lib/db/database');
45 | var wrap = require('co-monk');
46 | var User = wrap(db.get('user'));
47 | var passwordHash = require('password-hash');
48 |
49 | /**
50 | * Expose `User`
51 | */
52 |
53 | module.exports = User;
54 | ```
55 |
56 | Make sure you have `mongod` running in a separate terminal tab!
57 | ________________________________
58 |
59 | Prev: [Routes](./routes.md) | Next: [Angular Intro](../angularjs/intro.md) | Home: [Lecture Outline](../README.md)
60 |
--------------------------------------------------------------------------------