Angular 1.5 Component Beispiel

Ich bin ziemlich erfahren mit Angular pre-1.5, aber ich fange gerade an, eine Webanwendung basierend auf 1.5 Komponenten zu entwickeln. Nach vielen Fehlersuchen kann ich immer noch nicht mit einer grundlegenden Vorlage arbeiten - kann ich noch ein paar Augen bekommen, um mir zu sagen, was mit der folgenden einfachen Menükomponente falsch ist? Ich freue mich über jede mögliche Unterstützung, die angeboten werden kann.Angular 1.5 Component Beispiel

var appMenuTemplate = " 
    <nav class='menu'> 
    <ul> 
     <li ng-repeat='item in menuCtrl.menuItems'> 
     {{ item }} 
     </li> 
    </ul> 
    </nav> 
"; 

var appMenuController = function() { 
    var self = this; 
    self.menuItems = [ 
    'home', 
    'about', 
    'portfolio', 
    'experience' 
    ]; 
}; 

angular 
    .module('exampleApp', []) 
    .component('appMenu', { 
    template: appMenuTemplate, 
    controller: appMenuController, 
    controllerAs: 'menuCtrl' 
    });

https://jsfiddle.net/dzaslow/ej8r3vyo/1/

Quelle

2016-06-23 Dean Zaslow

Hier ist, wie es zu tun. Ich habe gelernt, Komponenten hauptsächlich aus dem Lesen von todd motto's posts zu verwenden. Sie sollten wahrscheinlich auch TemplateUrl anstelle von Vorlage verwenden.

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('exampleApp', []) 
 
    .component('appMenu', { 
 
     template: "<nav class='menu'> \ 
 
    <ul> \ 
 
     <li ng-repeat='item in vm.menuItems'> \ 
 
     \t {{ item }} \ 
 
     </li> \ 
 
    </ul> \ 
 
    </nav>", 
 
     controller: AppMenuController, 
 
     controllerAs: 'vm' 
 
    }); 
 

 
    function AppMenuController() { 
 
    var vm = this; 
 
    vm.menuItems = [ 
 
     'home', 
 
     'about', 
 
     'portfolio', 
 
     'experience' 
 
    ]; 
 
    } 
 

 
    AppMenuController.$inject = []; 
 
})();

.menu > ul > li { 
 
    display: inline; 
 
    margin-right: 1em; 
 
}

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <app-menu></app-menu> 
 
</body> 
 

 
</html>

Quelle

2016-06-23 13:30:05 ScottL

ich immer templateUrl verwenden, aber es ist nicht gerade praktisch, wenn mit jsfiddle ... Ich frage mich, ob dies einige Problem mit jsfiddle ist, da bei Ihnen funktioniert, wenn Sie ‚Run Code Snippet‘ klicken aber es läuft nicht im Spiel. –

Angular 1.5 Component Beispiel

Antwort

Verwandte Themen