Угловой 1.5 Компонент Пример

Я довольно опытный, используя Angular pre-1.5, но сейчас я начинаю разрабатывать веб-приложение на основе 1,5 компонентов. После многого устранения неполадок, я все еще не могу заставить работать базовый шаблон - могу ли я получить еще один набор глаз, чтобы рассказать мне, что не так со следующим простым компонентом меню? Я ценю любую помощь, которая может быть предложена.Угловой 1.5 Компонент Пример

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/

источник

2016-06-23 Dean Zaslow

Вот как это сделать. Я узнал, как использовать компоненты в основном из чтения todd motto's posts. Вероятно, вы также должны использовать templateUrl, а не шаблон.

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

источник

2016-06-23 13:30:05 ScottL

Я всегда использую templateUrl, но это не совсем практично при использовании jsfiddle ... Я интересно, если это какой-то вопрос с jsfiddle, так как ваш работает при нажатии кнопки «Выполнить фрагмент кода» но он не работает в jsfiddle. –

Угловой 1.5 Компонент Пример

ответ

Смежные вопросы