ng-modules with ui router ONCE

no name collision

by Joseph Tate

HTML

<script src="http://rawgit.com/luisperezphd/ngModule/master/angular.ng-modules.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<div ng-modules="AppOne,AppTwo">
    <h1>App One and Two </h1>
    <div ng-controller="ControllerOne">
        {{name}}
    </div>
    <div ng-controller="ControllerTwo">
        {{name}}
        <div ui-view="viewA">
        </div>
         <div ui-view="viewB">
        </div>
    </div>
</div>

JavaScript

angular.module("AppOne", ['ui.router'])
.controller("ControllerOne", function($scope) {
    $scope.name = "Hi";
});

angular.module("AppTwo", ['ui.router'])
.controller("ControllerTwo", function($scope) {
    $scope.name = "Hi again, with ui router";
})
.config(function($stateProvider){
    $stateProvider
        .state('index', {
            url: "",
            views: {
                "viewA": {
                    template: "index.viewA"
                },
                "viewB": {
                    template: "index.viewB"
                }
            }
        })
    })