Estoy iniciando con el tema de Single Page Applications con MVC de .Net , y se ha vuelto complicado resolver las dependencias , he tomado el ejemplo de la pagina [http://www.codemag.com/article/1605081 ][1] y todo va bien , hasta que trado de usar componentes de ui.bootstrap , el punto es que los modules que estan relacionados con el commonModule , no pueden acceder a dicha dependencia Link de descarga del proyecto [SPA MVC + AngularJs][2] CODIGO del App.js principal: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var commonModule = angular.module('common', ['ngRoute', 'ngAnimate', 'ngSanitize', 'ui.bootstrap']); var mainModule = angular.module('main', ['common']); commonModule.factory('viewModelHelper', function ($http, $q, $window, $location) { return MyApp.viewModelHelper( $http, $q, $window, $location); }); commonModule.factory('validator', function () { return valJs.validator(); }); mainModule.controller("indexViewModel", function ( $scope, $http, $q, $routeParams, $window, $location, viewModelHelper) { var self = this; $scope.topic = "Integrating ASP.NET MVC and AngularJS"; $scope.author = ""; }); (function (myApp) { var viewModelHelper = function ( $http, $q, $window, $location) { var self = this; self.modelIsValid = true; self.modelErrors = []; self.resetModelErrors = function () { self.modelErrors = []; self.modelIsValid = true; } self.apiGet = function (uri, data, success, failure, always) { self.modelIsValid = true; $http.get(MyApp.rootPath + uri, data) .then(function (result) { success(result); if (always != null) always(); }, function (result) { if (failure != null) { failure(result); } else { var errorMessage = result.status + ':' + result.statusText; if (result.data != null) { if (result.data.Message != null) errorMessage += ' - ' + result.data.Message; if (result.data.ExceptionMessage != null) errorMessage += ' - ' + result.data.ExceptionMessage; } self.modelErrors = [errorMessage]; self.modelIsValid = false; } if (always != null) always(); }); } self.apiPost = function (uri, data, success, failure, always) { self.modelIsValid = true; $http.post(MyApp.rootPath + uri, data) .then(function (result) { success(result); if (always != null) always(); }, function (result) { if (failure != null) { failure(result); } else { var errorMessage = result.status + ':' + result.statusText; if (result.data != null) { if (result.data.Message != null) errorMessage += ' - ' + result.data.Message; if (result.data.ExceptionMessage != null) errorMessage += ' - ' + result.data.ExceptionMessage; } } if (always != null) always(); }); } self.goBack = function () { $window.history.back(); } self.navigateTo = function (path, params) { if (params == null) $location.path(MyApp.rootPath + path); else $location.path(MyApp.rootPath + path).search(params); } self.refreshPage = function (path) { $window.location.href = MyApp.rootPath + path; } self.clone = function (obj) { return JSON.parse(JSON.stringify(obj)) } self.querystring = function (param) { if ($location.search != null) return $location.search()[param]; else return null; } self.resetQueryParams = function () { $location.url($location.path()); } return this; }; myApp.viewModelHelper = viewModelHelper; }(window.MyApp)); <!-- end snippet --> CODIGO del App.js para Custumer: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var customerModule = angular.module('customer', ['common']); customerModule.config(function ($routeProvider, $locationProvider) { $routeProvider.when('/customer', { templateUrl: '/App/Customer/Views/CustomerHomeView.html', controller: 'customerHomeViewModel' }); $routeProvider.when('/customer/list', { templateUrl: '/App/Customer/Views/CustomerListView.html', controller: 'customerListViewModel' }); $routeProvider.when('/customer/show/:customerId', { templateUrl: '/App/Customer/Views/CustomerView.html', controller: 'customerViewModel' }); $routeProvider.otherwise({ redirectTo: '/customer' }); $locationProvider.html5Mode({ enabled: true, requireBase: false }); }); customerModule.factory('customerService', function ($http, $location, viewModelHelper) { return MyApp.customerService($http, $location, viewModelHelper); }); (function (myApp) { var customerService = function ($http, $location, viewModelHelper) { var self = this; self.customerId = 0; return this; }; myApp.customerService = customerService; }(window.MyApp)); <!-- end snippet --> CODIGO del RootViewModel (o controler para customer): <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> customerModule.controller("rootViewModel", function ($scope,$window,customerService, $http, viewModelHelper) { // This is the parent controller/viewmodel for 'customerModule' and its $scope is accesible // down controllers set by the routing engine. This controller is bound to the Customer.cshtml in the // Home view-folder. $scope.viewModelHelper = viewModelHelper; $scope.customerService = customerService; $scope.flags = { shownFromList: false }; var initialize = function () { $scope.pageHeading = "Customer Section"; } $scope.tabs = [ { title: 'Dynamic Title 1', content: 'Dynamic content 37' }, { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true } ]; $scope.alertMe = function () { setTimeout(function () { $window.alert('You\'ve selected the alert tab!'); }); }; $scope.model = { name: 'Tabs' }; initialize(); }); <!-- end snippet --> Codigo _Layout.cshtml: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - ASP.NET MVC with Angular JS</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body data-ng-app="main"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("ASP.NET MVC/Angular JS", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Customers", "Customer", "Home")</li> <li>@Html.ActionLink("Products", "Product", "Home")</li> <li>@Html.ActionLink("Orders", "Order", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year</p> </footer> </div> @Scripts.Render("~/bundles/angular") <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") <script type="text/javascript"> window.MyApp = {}; MyApp.rootPath = '@Url.Content("~")'; </script> <script src="~/App/Validator.js"></script> <script src="~/App/App.js"></script> @RenderSection("scripts", required: false) <script type="text/javascript"> @RenderSection("jsCode", required: false) </script> </body> </html> <!-- end snippet --> y finalmente este es el codigo de Customer.cshtml , donde en un inicio pensaba mostrar algunos tabs con formularios de captura de datos . pero por algun motivo no puedo utilizar los tabs , la dependencia al ser cargada en el commonModule de bootstrap se supondria que deberia estar disponible. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> @{ ViewBag.Title = "Customers"; } @section scripts { <script src="~/App/Customer/App.js"></script> <script src="~/App/Customer/ViewModels/RootViewModel.js"></script> <script src="~/App/Customer/ViewModels/CustomerHomeViewModel.js"></script> <script src="~/App/Customer/ViewModels/CustomerListViewModel.js"></script> <script src="~/App/Customer/ViewModels/CustomerViewModel.js"></script> } @section jsCode { angular.bootstrap(document.getElementById("customer"), ['customer']); } <div ng-non-bindable> <div id="customer" data-ng-controller="rootViewModel"> <h2>{{ pageHeading }}</h2> <div class="row"> <p>Select a tab by setting active binding to true:</p> <uib-tabset active="active"> <uib-tab index="0" heading="Static title">Static content</uib-tab> <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> {{tab.content}} </uib-tab> <uib-tab index="3" select="alertMe()"> <uib-tab-heading> <i class="glyphicon glyphicon-bell"></i> Alert! </uib-tab-heading> I've got an HTML heading, and a select callback. Pretty cool! </uib-tab> </uib-tabset> <hr /> <hr />*@ <div ng-view></div> <hr /> <div> <a href="/product" target="_self">Products</a> | <a href="/order" target="_self">Orders</a> </div> </div> </div> <!-- end snippet --> Agradezco de antemano cualquier ayuda. [1]: http://www.codemag.com/article/1605081 [2]: http://www.codemag.com/Article/Download/1605081/Castro_AngularAndMVC.zip