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 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
Código del App.js principal:
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));
Código del App.js para Customer:
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));
Código del RootViewModel (o controler para customer):
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();
});
Código _Layout.cshtml:
<!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>
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.
@{
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>
Les comparto los detalles que me solicitaste de la aplicación
Este es el código que se genera despues del render:
<!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>
la ruta y los destinos están en la imagen.
Incluyo el Link de descarga del proyecto Proyecto MVC - AngularJS
Estos son los detalles que me solicitaste de la aplicación
Este es el código que se genera despues del render:
<!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>
Gracias por la ayuda!
Incluyo el Link de descarga del proyecto Proyecto MVC - AngularJS