_ _

Вы замыкание задом наперед сделали

function compare(field) {
  return function (a, b){
    return a[field] > b[field] ? 1 : -1;
  }
}
var byName = compare('name');

users.sort(byName);
users.forEach(function(user) {
  alert( user.age );
});

SVG это всего лишь часть разметки, следовательно может быть отрендерен на сервере. Canvas, само собой, нет.

angular.element(this);

this.user из примера с callback работает потому что используется ES2015 arrow function, которая сохраняет контекст, в котором она была определена.

context.$http.post(LOGIN_URL, creds).then((response) =>{
       this.user.authenticated = true
    },
    function (response) {
        context.error = err;
    });

Это равнозначно

context.$http.post(LOGIN_URL, creds).then(function (response){
       this.user.authenticated = true
    }.bind(this),
    function (response) {
        context.error = err;
    });

Не надо так делать. Найдите у вашего плеера нужное событие и подпишитесь на него

У вас должно быть два обработчика одного урл.
Один - на клиенте, чтобы при клике на урл на загруженной странице ваше приложение этот клик отловило и запустило клиентский роутер.
Второй - на сервере, чтобы при первоначальном открытии страницы браузера по такой ссылке сервер вернул уже сформированные данные.

Поэтому и роутер изоморфный, он, сконфигурированный одинаково, может работать как на сервере, так и на клиенте. Но проблему индексации он вам не решит, решать ее вам придется самостоятельно. А он всего лишь инструмент.

History API в этом деле краеугольный камень, потому что именно он позволяет управлять адресной строкой страницы без ее перезагрузки, используя обычные ссылки без #
Схема такая - вы кликаете на ссылку, ее отлавливает скрипт, забирает из ссылки url, через History API заменяет адрес в адресной строке браузера (страница не перезагружается), срабатывает History API событие об изменении адреса в адресной строке, вы это событие перехватываете и скармливаете новый адрес роутеру, например вашему изоморфному.

Используйте https://github.com/kkjdaniel/react-native-device-d...
для определения режимов ориентации и завязывайте на этом вью (можно просто стили менять, а можно полностью отдельный вью).

Также в порядке бреда можно перед применением стили обрабатывать, чтобы сделать поддержку процентов к ширине и высоте экрана.
Типа

const style = { 
  header: { height: '50%' }    
};

prepareStyle: function() {
  let deviceHeight = ...; // Find API by yourself
  let _style = _.merge({}, style);
  if (style.header.height.substr(-1, 1) === '%') 
    _style.header.height = deviceHeight * (+style.header.height.slice(0, -1)) / 100;

  return _style;
}

Основная идея ресурса в том, что объект, получаемый от сервера (одиночный либо список)
будет являться "потомком" вашего объекта-ресурса.
Т.е. можно делать так:

var Person = $resource(...);
Person.prototype.fullName = function() { return this.firstName + this.lastName; }

Person.query().$promise
  .then(function(response) {
    return response[0].fullName(); // Прототипом каждого элемента в списке будет Person   
  });

Промисы нужны для того, чтобы эффективно управлять потоком выполнения асинхронного кода.

В ангуляр2 рендер отделен от приложения, можно рендерить в текст, в DOM. Но пока порог вхождения высок - документации мало, бета-версии нет.
Для 1-го ангуляра смотрите prerender.io, angular-server.
Фразу про Laravel я не понял.

Ангуляр 2 учить толком не получится - документация готова на четверть, половину ещё даже писать не начинали. ТайпСкрипт не обязателен, можно ES5, ES6