Пример компонента Angular 1.5

У меня достаточно опыта использования Angular до версии 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/


angularjs-components angularjs-1.5
person Dean Zaslow    schedule 23.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот как это сделать. Я научился использовать компоненты в основном из чтения постов девиза Тодда . Вероятно, вам также следует использовать templateUrl, а не template.

(function() {
  'use strict';

  angular
    .module('exampleApp', [])
    .component('appMenu', {
      template: "<nav class='menu'> \
    <ul> \
      <li ng-repeat='item in vm.menuItems'>  \
      	{{ 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>

person ScottL    schedule 23.06.2016
comment
Я всегда использую templateUrl, но это не совсем практично при использовании jsfiddle... Мне интересно, является ли это какой-то проблемой с jsfiddle, поскольку ваш работает, когда вы нажимаете «Выполнить фрагмент кода», но он не запускается в jsfiddle. - person Dean Zaslow; 23.06.2016