1

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>&copy; @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>
            &nbsp;|&nbsp;
            <a href="/order" target="_self">Orders</a>
        </div>


    </div>
</div>



Les comparto los detalles que me solicitaste de la aplicación

Estructura y nombres de JS

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>
            &nbsp;|&nbsp;
            <a href="/order" target="_self">Orders</a>
        </div>


    </div>
</div>

            <hr />
            <footer>
                <p>&copy; 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

Estructura y nombres de JS

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>
            &nbsp;|&nbsp;
            <a href="/order" target="_self">Orders</a>
        </div>


    </div>
</div>

            <hr />
            <footer>
                <p>&copy; 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 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

3
  • Como para ir descartando problemas, puedes: 1) colocar el html que termina generándose, es decir el código que llega al navegador. 2) indicar la ruta y nombre de los distintos archivos .js que tienes (lo que has posteado). 3) Puedes ver errores en el log de la consola javascript, ¿podrías agregarlos a tu pregunta? Muchas gracias!
    – El Asiduo
    Commented el 17 oct. 2016 a las 23:39
  • Lo curioso es que el log de la consola no me manda error alguno, ahorita incluyo todo lo demas que me mensionaste , el codigo esta disponible en la pagina de la descripcion del problema (esto solo si tuvieras curiosidad de intentarlo ) Commented el 17 oct. 2016 a las 23:43
  • listo he compartido mas detalles abajo , muchas gracias por la ayuda! Commented el 17 oct. 2016 a las 23:50

1 respuesta 1

3

Mirando el código que has puesto es difícil saber todos los detalles que pueden andar mal ya que la aplicación es bastante grande pero esto me resalta a la vista un truco que usan y es que hacen boostrap dos veces a la aplicación

La primera vez ocurre cuando llamas a

<body data-ng-app="main">

Usando la directiva ng-app te usará main como el módulo principal de tu aplicación.

En otra parte usas la directiva ng-non-bindable que hace que el angular ignore todo el contenido que esta dentro de ese div y no lo procese.

<div ng-non-bindable>
    <div id="customer" data-ng-controller="rootViewModel">

Al parecer eso es para luego poder hacer

angular.bootstrap(document.getElementById("customer"), ['customer']);

Resumiendo tienes dos (o más) aplicaciones de AngularJS corriendo al mismo tiempo en tu página lo cual va a hacer muy difícil razonar tu aplicación cuando siga creciendo.

Mi recomendación es que si quieres aprender AngularJS hagas una sola página principal y cargues un sólo módulo principal con los demás módulos como dependencias(los cargues todos) y uses alguna solución de ruteo como ui-router(recomendado) o ngRoute(que ya lo cargas de todas formas), de lo contrario seguirás luchando por intentar resolver problemas sencillos usando una estructura muy compleja y esto sólo puede traerte problemas.

Si la recomendación anterior no te satisface puedes resolver tu problema actual agregando 'ui.bootstrap' como dependencia de tu módulo customer (y de todos los módulos que declares despues de este)

var customerModule = angular.module('customer', ['common', 'ui.bootstrap']);

Esta es una de las consecuencias de hacer bootstrap más de una vez en la aplicación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.