Country router

<!DOCTYPE html>
<html>

<head>
<link href="//cdn.jsdelivr.net/picnicss/5.1.0/picnic.min.css" rel="stylesheet">  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_blank" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div class="loader">
    -- Loading --
  </div>
  <div id="countryApp" style="display:none;">
    <h2><a href="?/">Country App</a></h2>
    <ul class="detail country">
      <li>
        <h1>{{country.name}}</h1>
      </li>
      <li>Flag:
        <img ng-src="{{country.flagURL}}" width="100">
      </li>
      <li>Population: <span class="population">{{country.population}}</span>
      </li>
      <li>Capital: <span class="capital">{{country.capital}}</span>
      </li>
      <li>GDP: <span class="gdp">{{country.gdp}}</span>
      </li>
    </ul>
    <ul class="list">
      <li class="countries">
        <a href="#/{{country.id}}">{{country.name}}</a>
      </li>
    </ul>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.16.min.js"></script>
  <script src="//rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js">
  </script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/route.js">
  </script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/ajax.js">
  </script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/old/mag.addons.js">
  </script>
  <script src="script.js"></script>
</body>

</html>

/* Angular 2 Mag.JS: countryApp example */

// From: http://curran.github.io/screencasts/introToAngular/exampleViewer/#/45

var countryApp = {}

countryApp.controller = function(props) {

  this.mode = mag.prop(props.mode)

  this.willload = function(event, node) {
    routes(this, props.CountryService, node)
  }.bind(this)

  this.willupdate = mag.addons.hide()

}
countryApp.view = function(state) {

  state.list = mag.addons.show(state.mode() == 'list')
  state.detail = mag.addons.show(state.mode() == 'detail')

}

var routes = function(data, countryService, node) {

  mag.route(data.countryApp, "/", {
    "/": function() {
      var promise = countryService.list(function(countries) {

        data.countries = countries.map(function(item) {
          return {
            a: {
              _config: mag.route,
              _href: '?/' + item.id,
              _text: item.name
            }
          }
        })

        mag.addons.onNextUpdate(data, mag.addons.show())
      })
    },
    "/:countryId": function() {
      data.mode('detail')
      var promise = countryService.find(mag.route.param('countryId'), function(country) {

        data.country = {
          h1: country.name,
          population: country.population,
          capital: country.capital,
          gdp: country.gdp,
          img: {
            _src: country.flagURL
          }
        }

        mag.addons.onNextUpdate(data, mag.addons.show())
      })

    }
  })
}


var CountryService = function() {

  function getData(url, callback) {
    return mag.addons.requestWithFeedback({
      url: url
    }).then(callback)
  }

  return {
    list: getData.bind({}, 'countries.json'),
    find: function(id, callback) {
      return getData('country_' + id + '.json', callback)
    }
  }
}


mag.module('countryApp', countryApp, {
  mode: 'list',
  CountryService: CountryService()
})

##Mag.js

[GitHub](https://github.com/magnumjs/mag.js)

### Router example taken from [Angular](http://curran.github.io/screencasts/introToAngular/exampleViewer/#/45)

Some things to note:


* Mag.js lifecycle events being used in the controller
* There is an loader componenet being used between all ajax transitions
* Mag.js addons being utilized here

[
  {
    "name": "China",
    "id": 1
  },
  {
    "name": "India",
    "id": 2
  },
  {
    "name": "United States of America",
    "id": 3
  }
]

{
  "name": "China",
  "population": 1359821000,
  "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
  "capital": "Beijing",
  "gdp": 12261
}

{
  "name": "India",
  "population": 1205625000,
  "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
  "capital": "New Delhi",
  "gdp": 4716
}

{
  "name": "United States of America",
  "population": 312247000,
  "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
  "capital": "Washington, D.C.",
  "gdp": 16244
}