Impostazione ASP.NET MVC 4 o 5 progetto con Angular 2

Question

I am learning angular 2 with Typescript.

Sto usando la seguente risorsa. QuickStart with Angular 2

Ora da lì e altri esempi ho scoperto che stavano dicendo di creare il file package.json che elenca tutte le dipendenze per il progetto.

Penso che creare questo file package.json e elencando tutti i pacchetti di dipendenze questo tipo di struttura sia seguito in .NetCore Project.

In MVC 4 o 5 è disponibile il file packages.config che elenca i pacchetti che verranno utilizzati.

Non sto dicendo che non possiamo usare il file package.json quando abbiamo il file package.config.

Ma c'è un modo semplice per integrare Angular 2 con dattiloscritto nel progetto di applicazione Web MVC utilizzando i pacchetti NUGet e iniziare?

Se non disponibile, per favore fatemi sapere come posso configurare Angular 2 con script di tipo in ASP.Net MVC 4 o 5?

Answer 1

Come hai detto, nell'applicazione ASP.NET MVC hai un file package.config. Questo file contiene le informazioni sui pacchetti NuGet che hai installato nella tua app. Questo file è correlato ai pacchetti sul lato server.

package.json Il file è correlato a una parte front-end della tua app. Tiene anche l'elenco dei pacchetti che hai installato nella tua app. Questa volta i pacchetti npm. Contiene anche informazioni sulla tua app e altro ancora. Puoi leggere di più su di esso here.

Non è possibile combinare questi file e non si desidera. In primo luogo, questi file hanno un formato diverso (XML e JSON). Inoltre, come ho detto prima, contengono informazioni su diverse parti della tua applicazione. Infine, e questa è la mia opinione personale, quando crei un'applicazione con un'interfaccia utente ricca e usi Angular2, sarebbe meglio suddividere le parti della tua app in 2 diversi progetti. Uno di loro con le API Web e il secondo solo con la parte UI. Con tale struttura, non è necessario per packages.config nel progetto dell'interfaccia utente e non è necessario per package.json nel progetto di API Web.

Per l'ultima domanda, è possibile iniziare con here. Puoi anche dare un'occhiata a questo sample app.

Answer 2

Controllare anche il collegamento che include i passaggi da eseguire.

1. è necessario includere package.json (angolare 2 viene installato utilizzando NPM)
2. Run NPM installare
3. eseguire i compiti GULP
4. Run F5 per vedere i risultati.

https://github.com/mithunvp/ng2Mvc5Demo

Come il suo già accettato ancora sarà modo alternativo per iniziare

Answer 3

Al fine di eseguire angolare 2 in ASP.NET MVC 4.5 (VS 2015):

1) installare Node.js (almeno 4.4.x), npm (almeno 3.xx) e TypeScript per Visual Studio 2015 (VS -> Strumenti -> Estensioni e aggiornamenti -> Online). È possibile verificare la propria versione di nodo e npm eseguendo quanto segue nel terminale: "node -v" e "npm -v".

2) copiare i file delle Guide rapide (tutto ciò che constains QuickStart-padrone, non la cartella stessa) nel progetto (per la cartella contenente il file .csproj) - è possibile scaricare i file QuickStart da: https://github.com/angular/quickstart

3) In Solution Explorer fai clic su "mostra tutti i file" (probabilmente la terza icona da destra, appena sopra la barra di ricerca). Selezionare i seguenti file/cartelle e includerli nel progetto:

• cartella app (rispondere No se richiesto per cercare dattiloscritto Tipizzazioni)
• styles.css
• index.html
• package.json
• tsconfig.json
• typings.json

4) In Visual Studio, rig ht fai clic su "package.json" e seleziona "Restore Packages" - questo installerà tutti i pacchetti definiti in package.json nel tuo progetto.

Il risultato di questa operazione equivale a eseguire "npm install" nella posizione del progetto dal terminale.

Probabilmente ci saranno alcuni avvisi nella finestra Output: ignorarli. Verrà generata una nuova cartella denominata "node_modules" (è necessario aggiornare Solution Explorer per poterlo vedere): il consiglio non deve includere questa cartella nel progetto.

5) Nel file tsconfig.json, accanto a "compilerOptions" aggiungere il seguente:

"compileOnSave": true

come illustrato di seguito

{ 
    "compilerOptions": { 
    ... 
    }, 
    "compileOnSave": true 
} 

Riavviare Visual Studio.

6) In Visual Studio, fare clic con il tasto destro del mouse su "index.html" e fare clic su "Imposta come pagina iniziale".

Come riferimento, ecco la documentazione ufficiale per eseguire Angular 2 (quickstart) in ASP.NET 4.x (Visual Studio 2015): https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Answer 4

Se si desidera installare Angular4 sulla console di gestione dei pacchetti NuGet è possibile utilizzare Install-Package Angular4 -Version 1.1.0 e attenersi alla seguente procedura:

Angular 4 
********* 

Prerequisites 
````````````` 
1. Download and Install Node js 
2. Install Visual studio 2015 update 3 or above 
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links) 

Follow the steps to install package. 
```````````````````````````````````` 
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project 
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0' 

Follow the steps after package installation 
``````````````````````````````````````````` 
1. Open Node.js Command Prompt 
2. Navigate to project location(use commands such as pushd,cd etc) 
3. Run the command 'npm install'