Question

我使用Angular pre-1.5时非常有经验，但我目前正在开发基于1.5组件的Web应用程序。经过多次故障排除后，我仍然无法获得基本模板的工作 - 我可以得到另一组眼睛，请告诉我下面的简单菜单组件有什么问题吗？我感谢您提供的任何帮助。

{{1}}

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

Answer 1

这是怎么做的。我学会了如何使用主要来自阅读todd motto's posts的组件。您可能还应该使用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>

Angular 1.5组件示例

1 个答案: