Skip to main content
se eliminaron 4 caracteres en el cuerpo; título editado
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

SPA Angular Js + MVC .NEtNet

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 paginapágina http://www.codemag.com/article/1605081 y todo va bien , hasta que tradotrato 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

CODIGOCódigo del App.js principal:

CODIGOCódigo del App.js para CustumerCustomer:

CODIGOCódigo del RootViewModel (o controler para customer):

CodigoCódigo _Layout.cshtml:

y finalmente este es el codigocódigo de Customer.cshtml , donde, en un inicio, pensaba mostrar algunos tabs con formularios de captura de datos . peropero por algun motivo no puedo utilizar los tabs , la. La dependencia al ser cargada en el commonModule de bootstrap se supondria que deberia estar disponible.

Este es el codigocódigo que se genera despues del render:

SPA Angular Js + MVC .NEt

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 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

CODIGO del App.js principal:

CODIGO del App.js para Custumer:

CODIGO del RootViewModel (o controler para customer):

Codigo _Layout.cshtml:

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.

Este es el codigo que se genera despues del render:

SPA Angular Js + MVC .Net

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:

Código del App.js para Customer:

Código del RootViewModel (o controler para customer):

Código _Layout.cshtml:

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.

Este es el código que se genera despues del render:

añadida la respuesta de ID 28397 como contenido suplementario
Origen Enlace
user227
user227

Estos son los detalles que me solicitaste de la aplicación

Estructura y nombres de JS http://www.codemag.com/article/1605081

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


Estos son los detalles que me solicitaste de la aplicación

Estructura y nombres de JS http://www.codemag.com/article/1605081

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

se añadieron 5374 caracteres en el cuerpo
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105



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

Estructura y nombres de JS

Este es el codigo 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>

Agradezco de antemano cualquier ayudala ruta y los destinos están en la imagen.

Incluyo el Link de descarga del proyecto Proyecto MVC - AngularJS

Agradezco de antemano cualquier ayuda.



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

Estructura y nombres de JS

Este es el codigo 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

se añadieron 137 caracteres en el cuerpo
Origen Enlace
Loading
Origen Enlace
Loading