Comment passer des données à partir de asp.NET MVC Angular2

Vous devriez regarder pour des questions similaires liées à AngularJS, pas Angulaire 2 spécifiques, comme la principale essence de la chose reste la même:

• vous voulez que votre serveur-côté Rasoir moteur de rendu type de vue (c'est à dire le HTML ou JS directement)
• cette vue contient un JS modèle où une partie du contenu est remplie à partir d'un modèle de serveur d'instance ou de toute façon le serveur de données (par exemple, une ressource, un dictionnaire, etc.)
• afin de remplir correctement une variable JS de Rasoir, C#, côté serveur, les données doivent être correctement sérialisée dans un format JSON

Dans ce post par Marius Schulz, vous pouvez voir qu'il sérialise les données et les utilise que pour remplir un modèle AngularJS value composant:

<script>
  angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

Quelque chose de semblable pourrait être faite à injecter des données, par exemple en window.myNamespace.myServerData, puis ont Angular2 bootstrap que la valeur parmi d'autres prestataires.

Dans ce post par Roel van Lisdonk, une approche similaire est utilisée, encore une fois, pour remplir un AngularJS à base de modèle, avec qui ng-init directive:

<div ng-controller="main"
     ng-init="resources={ textFromResource: '@WebApplication1.Properties.Resources.TextFromResource'}">
  <h1>{{ title }}</h1>
  {{ resources.textFromResource }}
</div>

Que le premier post de points, il y a quelque chose à penser (coller ici):

Un mot de prudence: La méthode que je vais utiliser est probablement pas un bon ajustement pour les grandes quantités de données. Depuis le JavaScript de données est insérée dans le code HTML de la réponse, il est envoyé sur le fil à chaque fois que vous demandez cette page.

Aussi, si les données spécifiques à l'utilisateur authentifié, la réponse ne peut pas être mis en cache et livrés aux différents utilisateurs plus. Veuillez garder cela à l'esprit lors de l'examen pour l'amorçage de votre Angulaire des Applications avec .NET données de cette façon.

La deuxième partie est peut-être moins un problème si votre servi page est déjà dynamique côté serveur, c'est à dire si il a déjà bits rempli de données côté serveur.

HTH

OriginalL'auteur superjos

Vous avez besoin d'abord de regrouper les services et les contrôleurs de module séparé des fichiers et de la charge des services avant de les contrôleurs.
Par exemple:

dist
|--services.js
|--controllers.js

Alors vous avez besoin pour charger le code JavaScript de Services par ASP.NET MVC JavaScript résultat, ici, vous avez besoin d'injecter votre démarrage de données.

public class ScriptController: Controller
{
  public ActionResult GetServices(){
   string file= File.ReadAllText(Server.MapPath("~dist/services.js"));
   //modify the file to inject data or 
   var result = new JavaScriptResult();         
   result.Script = file;
   return result;     
}

Puis dans le index.html charger les scripts comme suit

<script src="/script/getservices"></script>
<script src="/dist/controller.js"></script>

De cette façon, vous pouvez injecter des données dans angulaire du code pendant le chargement.
Cependant, même cela a un impact sur les performances en raison du temps passé à aller chercher de la vue, de la compilation de l'affichage et de liaison de données à la vue. Pour un chargement initial, les performances peuvent encore être améliorées si vous utilisez le Serveur de Rendu Côté.

OriginalL'auteur Jigar

J'ai trouvé une solution beaucoup plus simple. Ne pas tenter d'obtenir l'attribut dans le constructeur! Utiliser le ngOnInit() crochet à la place. La propriété est accessible dès lors qu'il a été décoré avec @Input(). Il semble simplement qu'il n'est pas disponible au moment où le constructeur est appelé.

Composant HTML:

<MyComponent [CustomAttribute]="hello"></MyComponent>

Composant TS:

export class MyComponentComponent {
    @Input()
    public CustomAttribute: string;

    constructor() {}

    ngOnInit() {
        console.log("Got it! " + this.CustomAttribute);
    }
}

OriginalL'auteur Eraph