Никита Гущин

Динамически подгружать компоненты? Это не к реакту, это к вашему сборщику.
В последних вебпаках (2+) есть поддержка динамических импортов:

import('moduleName').then(module => /* do something */)

Ну и дальше вы сможете сохранить этот модуль (например в state):

class Bundle extends Component {
  state = {
    // short for "module" but that's a keyword in js, so "mod"
    mod: null
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

export default Bundle

А вызывать все это дело вот так:

<Bundle load={() => import('./something')}>
  {(mod) => ()}
</Bundle>

Но это все в рамках проекта - добавили новый компонент - пересобрали проект. И это самая адекватная (на мой взгляд) практика. Случаи, конечно, бывают разные - но мне как-то уютнее, когда я знаю, что весь нужный код находится у меня в проекте, а не где-то там. Я имею ввиду в первую очередь зависимости ваших динамических компонентов (в первом ангуляре была своя система DI и свой подход к разработке, но с тех пор уже много воды утекло и нативные JS модули, очевидно, гораздо лучшее решение). Конечно, теоретически - можно напридумывать костылей и грузить их откуда угодно...

У браузера есть history api с помощью которого можно отслеживать переход по страницам и вместо того, чтобы запрашивать страницу с сервера - сделать запрос, получить JSON-данные и отрендерить страницу прямо на клиенте.

Такие приложения называют SPA и для их разработки используют фреймворки - react (не библиотека, а вместе с инфраструктурой), angular2, ember.

Сервер в этом случае выглядит как REST API (отдает JSON данные) и может быть реализован на чем угодно. Обычно это PHP (symfony2\laravel\yii\...), nodejs, Java (spring MVC), go, ruby и так далее. В зависимости от задач.

Упомяну мировое сообщество реакта (к сожалению, переезжает со slack'а) ссылка на инвайт

На laravel вы пишете rest API + у вас будет сервер на node.js на котором запущено универсальное (изоморфное) react-приложение.
Идея в том, что такое приложение (благодаря виртуальному DOM) работает как на клиенте, так и на сервере. React может автоматически подхватывать отрендеренную на сервере верстку (в том числе правильно навесить на нее ваши обработчики событий - клики, сабмиты и так далее).

flux + react.js

Попробуйте добавить резолв в роут:

resolve: {
    validation: function ($q, $routeParams) {
        var deferred = $q.defer(),
            id = parseInt($routeParams.id, 10);

        if (!isNaN(id)) {
            deferred.resolve();
        } else {
            deferred.reject('VALIDATION FAILED');
            $location.path('/login');
        }

        return deferred.promise;
    }
}

Подобие дерева. Перемещаться можно рекурсивно:

function doSomethingWithNode(node) { 
    console.log(node);
}

function processNode(node) { 
    doSomethingWithNode(node);
    node.children.map(processNode);
}

menu.map(processNode);

Скорей всего у Вас ошибка в шаблоне для core.api . В документации к uiRouter сказано, что:

//Relatively targets the unnamed view in this state's parent state <div ui-view/>
"" : { ... }

То есть вьюха с пустым названием загружается во вьюху без названия родителя. А если у Вас в шаблоне родителя нету такой вьюхи (а, судя по Вашему описанию - ее нету), то она никуда и не грузится.

Может быть вам подойдет такой вариант для core.api.create:

// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/> 
"@" : { ... }

Либо добавьте <div ui-view/> в шаблон core.api
И если Вы используете только unnamed views, то можно проще делать - указывать templateUrl как у Вас в core state

Так и чем $localion.path() не устраивает?

Не совсем понятно. У Вас получается одна вьюха
<div ui-view="page"></div>
На все роуты. Т.е. при переходе на любую из страниц эта вьюха полностью обновляется

Вот, например есть селект и директива, меняющая текст в зависимости от значения селекта (рабочий пример):

app.js

angular.module('myApp',[]);

angular.module('myApp')
    .controller('myCtrl',[ '$scope',
        function($scope){
          $scope.options = [
            {name:'text1'},
            {name:'text2'}
          ];
          $scope.selectedText = $scope.options[0];
        }
    ])
    .directive('myDirective', [ function () {
        return {
                restrict: 'AE',
                scope: {
                    selectedValue: '=ngModel',
                },
                templateUrl: 'directive-template.html',
                link: function(scope,elem,attrs) {
                
                },
                controller: function($scope) {
                  $scope.isChosen = function(v) {
                    return $scope.selectedValue == v;
                  };
                }
            };
    }])
;

index.html

<body ng-controller="myCtrl">
    <p>Hello world!</p>
    <select ng-model="selectedText" ng-options="opt.name for opt in options"></select>
    <div ng-model="selectedText.name" my-directive=""></div>
  </body>

directive-template.html

<div>
  <h1 ng-show="isChosen('text1')"> ТЕКСТ 1 </h1>
  <h1 ng-show="isChosen('text2')"> ТЕКСТ 2 </h1>
</div>