JSFiddle - React, Tailwind, and code Playground

by technicolorenvy

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="webApp">
    <div ui-view=""></div>
</div>

JavaScript

angular.module('webApp', ['ui.router'])
     // service that deals w/ our dojo require
    .service('wish', function () {

    // it's not require... it's a wish?
    var wish = {};

    function _loadDependencies(deps, next) {
        var reqArr = _.values(deps),
            keysArr = _.keys(deps);

        // use the dojo require (required by arcgis + dojo) && save refs
        // to required obs
        require(reqArr, function () {
            var args = arguments;

            _.each(keysArr, function (name, idx) {
                wish[name] = args[idx];
            });

            next();
        });
    }

    return {
        loadDependencies: function (deps, next) {
            _loadDependencies(deps, next);
        },

        get: function () {
            return wish;
        }
    };

})
    // module (app) config
    .config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/map');

    $stateProvider.state('map', {
        url: '/map',
        template: '<div id="map"></div>',
        controller: 'MapCtrl',
        resolve: {
            promiseObj: function ($q, $rootScope, wish) {
                var deferred = $q.defer(),
                    deps = {
                        Map: 'esri/map',
                        FeatureLayer: 'esri/layers/FeatureLayer',
                        InfoTemplate: 'esri/InfoTemplate',
                        SimpleFillSymbol: 'esri/symbols/SimpleFillSymbol',
                        SimpleRenderer: 'esri/renderers/SimpleRenderer',
                        SimpleMarkerSymbol: 'esri/symbols/SimpleMarkerSymbol',
                        ScaleDependentRenderer: 'esri/renderers/ScaleDependentRenderer',
                        Color: 'dojo/_base/Color'
                    };

                wish.loadDependencies(deps, function () {
                    deferred.resolve();
                    if (!$rootScope.$$phase) {
                        $rootScope.$apply();
                    }
        ...