RevealingModuleAndAngular

by Jonathan Carter

HTML

<div class="container">
    Main content! Non-angular pieces of our app can go here.
    <div class="angularApp" ng-app="myApp">
        <div ng-controller="MyController as vm">
            {{ vm.message }}
        </div>
    </div>
</div>

CSS

.angularApp{
    border: thin solid black; 
}

JavaScript

var MyModule = {
    Main: {},
    Angular: {}
};

MyModule.Main = function () {
    var sayHello = function () {
        return "Hello from Main module!";
    }

    return {
        SayHello: sayHello
    };
}();

MyModule.Angular = function () {

    "use strict";

    //App initialization
    var app = angular.module("myApp", []);

    app.controller("MyController", MyController);

    function MyController() {
        var vm = this;
        vm.message = MyModule.Main.SayHello();
    }
}();