Navigation: The basics

Conferences

Quick list of conferences to keep an eye open for:

http://ng-conf.org/	Angular / Google	March	YouTube
http://ngeurope.org/	Angular / Google	October	YouTube
http://jsconf.com/	JavaScript	Monthly	YouTube
http://www.dotjs.eu/	JavaScript	November	YouTube
http://jqueryuk.com/2015/	jQuery	March	Vimeo
javascript-summit	JS / jQuery	November
http://conf.reactjs.com/	React / Facebook	January
http://www.buildwindows.com/	Microsoft	April	Channel9
https://anglebrackets.org/	Microsoft	May
http://reactconf.com/	Reactive Systems	April and Nov
https://www.google.com/events/io	Google	June	YouTube
https://developer.apple.com/wwdc/	Apple	June	Apple
https://fbf8.com/	Facebook	April	Facebook Live

ng-simple-rest-app

Here’s an example of a simple rest application, written to demonstrate simple techniques to get people started with Angular:

Source:  https://github.com/stevenh77/ng-simple-rest-app

Client features
- default page not being shown by the router
- automatic conversion of Json strings into JavaScript dates (generic/aop approach)
- date control bound to model object from a data service
- select control databound to model from a data service
- confirmation dialog
- rest service calls for get, post, put, delete
- bootstrap layout for form
- form validation
- app navigation from controller using location and window services
- logging abstraction
- promises for service calls including error handling
- generic application level error handling
- busy indicator
- unit tests with mocks and promises
- material design for form entry

Server features:
- simple rest endpoints
- compression
- request logging to console
- CORS enabled
- object retrieved from JS array based on key
- object removed from JS array based on key

Form validation based on Material Design

I’ve extended the Material Design to include some form validation.

I’m undecided about using a valid icon or whether a lack of validation error message implies validity.  Perhaps I’m swayed by years of rubbish UX on the web that I think I’m currently in favour of using an icon.  And if an icon is to be used, how subtle should be it? 

Creating a simple REST API with Node Express

Install dependencies

Create: server.js

Create film-data.json

Start the server

You can download and run the full source without the need to install any dependencies:  https://github.com/stevenh77/simple-rest-express-server

API Mocking

UI devs love to be able to work independently of server teams, which is where API mocking can really help out.

Quickly knock up a few end points with test data and responses returned – takes no time at all.

Great for building little working prototypes with REST service requests.

Mocky.io

Mockable.io

Redesign For Virgin America

Virgin redesign

Transclude explained

Combination of transfer and include, this simply means you want to take the HTML within the usage of your directive and include it within the template supplied by your directive definition.

The key lines are 14, 18 and 30.  These tell Angular I want to transfer the contents of the HTML DOM and here is where I want to include it.  Line 30 is the usage of the directive including the {{text}} which is transcluded.

 

 

Angular Services vs Factories vs Providers

The following explanations were taking from various Angular docs, Misko code examples and StackOverflow posts.

What?

• Service returns an instance of the actual function
• Factory returns function’s return value
• Provider returns the output of the function’s $get function

 

 

How?

When?

Factory and Service are the most commonly used recipes. The only difference between them is that Service recipe works better for objects of custom type, while Factory can produce JavaScript primitives and functions.

Factories are an example of the revealing module pattern.

Providers have the advantage that they can be configured during module configuration phase.

Under the hood

Services, Factories as well as Values are all created under the hood using Providers.

Accordion with active header colour

I noticed this nice style from a control vendor and have recreated the accordion in a similar style.

Demo: 

If the animation is struggling in the iframe above check out the demo in a new page:

http://stevenhollidge.com/blog-source-code/accordion

Code:

Floating label

Material Design from Google has come up with floating labels for form entry.

The label starts off as the placeholder or watermark for the control, when the user enters the control the label floats above the text in an animation.

material-design from Steven Hollidge on Vimeo.

You can hear more about Material Design in this talk https://www.youtube.com/watch?v=2qiyhkQVyxE

The floating label appear at 12 mins 05 seconds.

Nice breadcrumb UI

Ok so the colours need changing but it’s a nice little design.

Demo:  http://stevenhollidge.com/blog-source-code/breadcrumbs

Code:

Angular from scratch

Basic change detection scope and directives implemented in one page of code, basically it’s Angular without Angular!

Video: https://www.youtube.com/watch?v=Mk2WwSxK218

Demo: http://stevenhollidge.com/blog-source-code/angular-from-scratch

Code: