8

Estoy creando un proyecto ASP NET MVC 5 Empty, y estoy agregando manualmente mis referencias de JavaScript.

He agregado esta línea:

<script src="./bower_components/angular/angular.min.js"></script>

Ahora mis preguntas son: ¿Cómo se descargan esos paquetes, si no he agregado Bower al proyecto? ¿Cómo lo puedo agregar?

1

2 respuestas 2

7

Lo que debes hacer es instalar bower, los requisitos son tener instalado node, npm y git.

Una vez instalados los requisitos el comando para instalar bower es el sgte:

npm install -g bower

Luego puedes crear un archivo bower.json mediante el sgte comando:

bower init

Debes de responder las preguntas para crear un archivo bower.json personalizado.

Luego de esto puedes obtener el paquete de angular con el sgte comando:

bower install angular --save

El flag --save incluye la dependencia en tu archivo bower.json recién creado

Además no debes referenciar esos archivos dentro de bower_components directamente por muchos motivos, por ejemplo:

  • Esa ruta ha sido definida por bower y podría cambiar en un futuro.
  • Esa carpeta no debe ser desplegada ya que contiene muchos archivos posiblemente innecesarios.

Lo que deberías hacer es copiar los archivos que necesitas usando algun task runner como gulp o grunt.

3
  • esos comandos donde debo de ejecutarlos en powershell o en el mismo ide y el tak runner tambien deberia de instalarlo?
    – yurivan
    Commented el 2 nov. 2015 a las 17:40
  • En cualquier consola que tenga en el PATH a node, al instalar node se debería haber agregado al PATH Commented el 2 nov. 2015 a las 17:45
  • Tienes que ejecutar los comandos de bower al mismo nivel que el fichero html al que le inyectas el angular.min.js ( por la ruta que pones en el ejemplo).
    – eugenio
    Commented el 2 dic. 2015 a las 15:18
5

Así es como lo hice yo: (para VS2015, sdk 1.0.0-beta6) Este método NO instala bower de forma global

NOTA: Hecho a partir de este template:

enter image description here

1 - Click derecho sobre el proyecto (en el explorador de soluciones), luego "Nuevo elemento" (o "New item" si el VS esta en ingles)

2 - Agregar NPM Configuration file.

enter image description here

3 - Editar el nuevo archivo "package.json" de modo tal que quede incluya estas 3 dependencias de desarrollo:

{
  "name": "nompre_projecto",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "bower": "1.6.5",
    "grunt": "0.4.5",
    "grunt-bower-task": "0.4.0"
  }
}

4 - Igual que punto 1, pero seleccionando "Grunt Configuration File".

5 - Editar Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        } 
    });

    grunt.registerTask("default", ["bower:install"]);

    grunt.loadNpmTasks("grunt-bower-task");
};

6 - Igual que punto 1, pero seleccionando "Bower Configuration File"

7 - Editar bower.json

{
  "name": "SBCom",
  "license": "Apache-2.0",
  "private": true,
  "dependencies": {
    "angular": "1.4.3",
    "angular-route": "1.4.3",
    "angular-animate": "1.4.3",
    "moment": "2.10.6",
    "lodash": "3.10.1",
    "mocha": "2.2.5"
  }
}

Con las dependencias que tu necesites

8 - Click derecho sobre Grunfile.js y buscas "Task Runner Explorer" (no se como sera en español)

enter image description here

9 - Una vez abierto el "Task Runner Explorer" haces doble click sobre "bower:install". En el futuro cuando actualices o agregues un paquete bower, debes hacer lo mismo.

enter image description here

10 - Como en la tarea grunt se indico targetDir: "wwwroot/lib" debes ir ubicar el path correcto en los HTML asi:

<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/moment/moment.js"></script>
5
  • 1
    yo estoy usando Asp Net Mvc 5.
    – yurivan
    Commented el 2 nov. 2015 a las 19:30
  • 1
    @rnrneverdies creo que estás confundiendo asp.net mvc 5 con asp.net 5 (que trae lo que sería asp.net mvc 6) Commented el 3 nov. 2015 a las 5:50
  • @rnrneverdies Éste es asp.net mvc 5: asp.net/mvc/mvc5 y este asp.net 5: asp.net/vnext Commented el 3 nov. 2015 a las 14:37
  • 1
    @rnrneverdies si esta pregunta la he hecho asp .net mvc 5, no asp .net 5. y veo que toda la respuesta que me has dado es sobre asp net 5. asi como la informacion del blogpost que has puesto. espero ahora me haya dejado entender.
    – yurivan
    Commented el 3 nov. 2015 a las 15:14
  • @CarlosMuñoz y yurivan: entendido. voy a dejar la respuesta de todos modos, con el aviso que agregue queda claro de que version se trata y sigue siendo util. Commented el 4 nov. 2015 a las 18:21

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.