Angular 1.5 组件示例
Posted
技术标签:
【中文标题】Angular 1.5 组件示例【英文标题】：Angular 1.5 Component Example 【发布时间】：2016-10-25 04:48:45 【问题描述】：我在使用 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/
【问题讨论】：
【参考方案1】：这里是如何做到这一点。我主要是通过阅读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'> \
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>【讨论】：
我总是使用 templateUrl，但是在使用 jsfiddle 时它并不完全实用......我想知道这是否是 jsfiddle 的一些问题，因为当你单击“运行代码片段”时你的工作有效但它没有在 jsfiddle 中运行。以上是关于Angular 1.5 组件示例的主要内容，如果未能解决你的问题，请参考以下文章