Angular 1.5组件示例

我使用Angular Pre-1.5经验丰富，但是我目前正在开始基于1.5个组件开发Web应用程序。经过大量的故障排除后，我似乎仍然无法获得基本的模板工作 - 我可以另一组眼睛告诉我以下简单菜单组件有什么问题？我感谢可能提供的任何帮助。

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/

这是如何做的。我学会了如何主要从阅读托德座右铭的帖子中使用组件。您可能还应使用TemplateUrl而不是模板。

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

相关内容

最新更新

热门标签：