Zach Briggs theotherzach

Angular 2 Routing with JavaScript

As I sit here and write this, Angular 2 is in alpha 26 which means it is early days for the framework. The existing examples are sparse and typically written in TypeScript. As far as I can tell, there are actually no examples that employ both the router and JavaScript.

Note: The Angular 2 docs refer to code that runs in the browser as "ES5." That's crap. The code that runs in a Web browser is called JavaScript.

Optional: Serving Static Files

Let's get started with an empty directory so you can see that we have nothing up our sleeves. No build steps, no web server, just an empty directory and a few static files.

1 oz high quality sweet vermouth like Carpano Antica
2 oz 90+ proof whiskey with high rye content like Rittenhouse Bottled in Bond
2 dashes decent bitters such as Fee Brothers or Bitter Truth
rocks glass chilled with ice water
Shaker or pint glass filled with ice

Pour the sweet vermouth, whiskey, and bitters into your pint glass. Stir, do not shake the mixture. Pour the ice water out of the rocks glass. Using a fork to strain the drink, pour the cocktail from the pint glass into the rocks glass. Sip slowly with the confidence that you’re drinking a well made cocktail.

Notes:

BARUCO 2014 Angular Workshop

Notes

80% of my Angular use is restricted to:

ng-controller https://docs.angularjs.org/guide/controller
ng-submit https://docs.angularjs.org/api/ng/directive/ngSubmit
ng-repeat https://docs.angularjs.org/api/ng/directive/ngRepeat
ng-model https://docs.angularjs.org/api/ng/directive/ngModel
ng-repeat + filter https://egghead.io/lessons/angularjs-ngrepeat-and-filtering-data
Data binding: https://docs.angularjs.org/guide/databinding

##What's Your Problem?

Abstract

You're 3 nested conditionals deep in a 50 line procedure wondering what you did to deserve this incomprehensible codebase. BDD, TDD, OOP, FP, and all the other letters of the alphabet won't help, at least not on their own. Before better coding practices must come the question: "What is the problem we're solving?

This talk makes the case that it is impossible to do our jobs as software creators without first fully grasping the problem being solved. We'll then discuss practical ways to discover the problem statement when all we have to work with is a feature request.

	var compileTypeScript = require('broccoli-typescript');

	var app = compileTypeScript('src', {
	out: "app.js"
	})

	module.exports = app

	/// <reference path="typings/angular2/angular2.d.ts" />

	import {Component, View, bootstrap, For, If} from 'angular2/angular2';

	class FriendsService {
	names: Array<string>;

	constructor() {
	this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
	}

	class Connection

	def initialize(db_address)
	@db_address = db_address
	end

	def query(query_string)
	Database.query(query_string, @db_address)
	end
	end

	[ui-view].ng-enter, [ui-view].ng-leave {
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	top: 0px;

	(def scenes [{:subject "Frankie"
	:action "say"
	:object "relax"}

	{:subject "Lucy"
	:action "❤s"
	:object "Clojure"}

	{:subject "Rich"
	:action "tries"

	(ns clj-bowling.core)

	(defn last-frame? [rolls]
	(<= (count rolls) 3))

	(defn strike? [rolls]
	(= 10 (first rolls)))

	(defn spare? [rolls]
	(= 10 (sum (take 2 rolls))))