Angular 1.5 Component Example

Question

I am fairly experienced using Angular pre-1.5, but I am currently starting to develop a web application based on 1.5 components. After much troubleshooting, I still can't seem to get a basic template working - can I get another set of eyes to please tell me what is wrong with the following simple menu component? I appreciate any assistance that may be offered.

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/

score 0 · Answer 1 · answered Jun 23 '16 at 13:30

Here's how to do it. I learned how to use components mainly from reading todd motto's posts. You should probably also use templateUrl rather than 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>

I always use templateUrl, but it's not exactly practical when using jsfiddle...I am wondering if this is some issue with jsfiddle, since yours works when you click 'Run Code Snippet' but it does not run in jsfiddle. — Dean Zaslow, Jun 23 '16 at 14:05

Angular 1.5 Component Example

1 Answers1