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 página [http://www.codemag.com/article/1605081 ][1] y todo va bien , hasta que trato 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] Código 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 --> Código del App.js para Customer: <!-- 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 --> Código 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 --> Código _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 código 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 --> ___ <br> Les comparto los detalles que me solicitaste de la aplicación [![Estructura y nombres de JS][3]][3] Este es el código que se genera despues del render: <!-- 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>Customers - ASP.NET MVC with Angular JS</title> <link href="/Content/bootstrap.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.6.2.js"></script> </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> <a class="navbar-brand" href="/">ASP.NET MVC/Angular JS</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/customer">Customers</a></li> <li><a href="/product">Products</a></li> <li><a href="/order">Orders</a></li> </ul> </div> </div> </div> <div class="container body-content"> <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> <hr /> <footer> <p>© 2016</p> </footer> </div> <script src="/Scripts/angular.js"></script> <script src="/Scripts/angular-route.js"></script> <script src="/Scripts/angular-animate.min.js"></script> <script src="/Scripts/angular-sanitize.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script type="text/javascript"> window.MyApp = {}; MyApp.rootPath = '/'; </script> <script src="/App/Validator.js"></script> <script src="/App/App.js"></script> <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> <script type="text/javascript"> angular.bootstrap(document.getElementById("customer"), ['customer']); </script> <!-- Visual Studio Browser Link --> <script type="application/json" id="__browserLink_initializationData"> {"appName":"Internet Explorer","requestId":"16e15e461905451fa6f8c1f43ec3ac18"} </script> <script type="text/javascript" src="http://localhost:2362/6ba59f2d6de048a6899194e63827ea13/browserLink" async="async"></script> <!-- End Browser Link --> </body> </html> <!-- end snippet --> la ruta y los destinos están en la imagen. Incluyo el Link de descarga del proyecto [Proyecto MVC - AngularJS][4] [1]: http://www.codemag.com/article/1605081 [2]: http://www.codemag.com/Article/Download/1605081/Castro_AngularAndMVC.zip [3]: https://i.sstatic.net/R7m2Z.png [4]: http://www.codemag.com/Article/Download/1605081/Castro_AngularAndMVC.zip --- Estos son los detalles que me solicitaste de la aplicación [![Estructura y nombres de JS][1]][1] Este es el código que se genera despues del render: <!-- 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>Customers - ASP.NET MVC with Angular JS</title> <link href="/Content/bootstrap.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.6.2.js"></script> </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> <a class="navbar-brand" href="/">ASP.NET MVC/Angular JS</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/customer">Customers</a></li> <li><a href="/product">Products</a></li> <li><a href="/order">Orders</a></li> </ul> </div> </div> </div> <div class="container body-content"> <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> <hr /> <footer> <p>© 2016</p> </footer> </div> <script src="/Scripts/angular.js"></script> <script src="/Scripts/angular-route.js"></script> <script src="/Scripts/angular-animate.min.js"></script> <script src="/Scripts/angular-sanitize.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script type="text/javascript"> window.MyApp = {}; MyApp.rootPath = '/'; </script> <script src="/App/Validator.js"></script> <script src="/App/App.js"></script> <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> <script type="text/javascript"> angular.bootstrap(document.getElementById("customer"), ['customer']); </script> <!-- Visual Studio Browser Link --> <script type="application/json" id="__browserLink_initializationData"> {"appName":"Internet Explorer","requestId":"16e15e461905451fa6f8c1f43ec3ac18"} </script> <script type="text/javascript" src="http://localhost:2362/6ba59f2d6de048a6899194e63827ea13/browserLink" async="async"></script> <!-- End Browser Link --> </body> </html> <!-- end snippet --> la ruta y los destinos me parece que estan en la imagen , pero de cualquier manera si hace falta mas informacion , por favor dimelo . Gracias por la ayuda! Incluyo el Link de descarga del proyecto [Proyecto MVC - AngularJS][2] [1]: https://i.sstatic.net/R7m2Z.png [2]: http://www.codemag.com/Article/Download/1605081/Castro_AngularAndMVC.zip