AngularJS 1.5组件示例

时间:2015-12-23 11:43:06

标签: angularjs angularjs-components

我正在使用.component() template属性处理Angularjs项目,但我不知道如何使用templateUrl。 是否有人熟悉这可以为我提供一个有效的例子? 感谢。

2 个答案:

答案 0 :(得分:3)

要正确使用角度组件,我建议使用controllerAs语法。

angular.module('myApp')
    .component('groupComponent', {
        templateUrl: 'app/components/group.html',
        controller: function GroupController(){
              this.innerProp = "inner";
        },
        controllerAs: 'GroupCtrl',
        bindings: {
            input: '<'
        }
    });

在group.html上,您可以按以下方式使用:

<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>

来自父控件您可以将任何参数作为绑定传递给组件,在本例中来自父HTML:

<group-component input="someModel">
</group-component>

答案 1 :(得分:1)

templateUrl是模板文件的路径。

例如

app.component('myview', {
  bindings: {
    items: '='
  },
  templateUrl: 'mycollection/view.html',
  controller: function ListCtrl() {}
});

<强> view.html

<h1> Welcome to this view </h1>

如上例所示,您必须在view.html目录中包含mycollection个文件。