Angularjs 在Angular1.5+；，如何导入和使用独立组件？_Angularjs

Angularjs 在Angular1.5+；，如何导入和使用独立组件？

angularjs

Angularjs 在Angular1.5+；，如何导入和使用独立组件？,angularjs,Angularjs,现在，我在一个文件夹中编写一个Angular1.5+组件组件位于独立文件夹中我的问题是如何在不同的HTML中使用这个组件。换句话说，我想找到一种方法，在两个以上的HTML文件中导入这个组件 cellComponent.js的 function courseCellComponentFun() { var ctrl = this; } angular.module(app_name).component('courseCell', { templateUrl: '../ce

现在，我在一个文件夹中编写一个Angular1.5+组件

组件位于独立文件夹中

我的问题是如何在不同的HTML中使用这个组件。换句话说，我想找到一种方法，在两个以上的HTML文件中导入这个组件

cellComponent.js的


function courseCellComponentFun() {
    var ctrl = this;
}

angular.module(app_name).component('courseCell', {
    templateUrl: '../cellComponent.html',
    controller:courseCellComponentFun,
    bindings:{
        cellData:'='
    }
})

cellComponent.html
如下所示：
<div class="course_cell">
    <div class="img_box">
        <div ng-bind="$ctrl.cellData.name"></div>
    </div>
</div>

   <body ng-app="app" ng-controller="controller">
<ul>
    <li ng-repeat="item in array1">
        <course-cell cell-data="item"></course-cell>
    </li>
</ul>
</body>
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('controller', function ($scope) {
        $scope.array1 = [
            {name:'cell1'},
            {name:'cell2'},
            {name:'cell3'},
        ]
    });
</script>



index.html如下所示：
<div class="course_cell">
    <div class="img_box">
        <div ng-bind="$ctrl.cellData.name"></div>
    </div>
</div>

   <body ng-app="app" ng-controller="controller">
<ul>
    <li ng-repeat="item in array1">
        <course-cell cell-data="item"></course-cell>
    </li>
</ul>
</body>
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('controller', function ($scope) {
        $scope.array1 = [
            {name:'cell1'},
            {name:'cell2'},
            {name:'cell3'},
        ]
    });
</script>






var-app=angular.module（'app'，[]）；
应用程序控制器（'controller'，函数（$scope）{
$scope.array1=[
{name:'cell1'}，
{name:'cell2'}，
{name:'cell3'}，
]
});

如何在index.hmtl中导入组件？我的index.html
现在不起作用。我看不见课文
 如果您没有使用Typescript、Babel或新的ES6标准来导入和导出模块，我很惊讶您必须添加component.js文件的引用，就像index.html中的
一样简单
index.html
<html>
<head>
    <script src="angular.js"></script>
    <script src="cellComponent.js"></script>
    <script src="appModule.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
   <ul>
       <li ng-repeat="item in array1">
           <course-cell cell-data="item"></course-cell>
       </li>
   </ul>
</body>
</html>

<div class="course_cell">
    <div class="img_box">
       <div ng-bind="$ctrl.cellData.name"></div>
    </div>
</div>

cellComponent.html
<html>
<head>
    <script src="angular.js"></script>
    <script src="cellComponent.js"></script>
    <script src="appModule.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
   <ul>
       <li ng-repeat="item in array1">
           <course-cell cell-data="item"></course-cell>
       </li>
   </ul>
</body>
</html>

<div class="course_cell">
    <div class="img_box">
       <div ng-bind="$ctrl.cellData.name"></div>
    </div>
</div>

参见此
您是否尝试在index.html中导入组件的脚本？类似于：
如果要在多个html文件中使用，可以导出组件。。。有点<代码>变量组件选项={templateUrl:“…”，}；导出componentOpts

，然后在需要的文件中导入它

从“path/to/file”

导入{componentOpts}，并在您的模块中使用它：

angular.module（“模块”）.component（“nameComponent”，componentOpts）非常感谢。如果我想在index.html
中使用多个组件，我会等待有人编写一个演示作为答案。然后我向引用添加了两个组件javascript文件。如何使用.component
方法实现两个组件？只需将它们链接起来：.component（“componentOne”，componentoonepts）。component（“componentTwo”，componentoopts）。component（“componentthreepts”，componentothopts）
如果我在不同的HTML中使用cellComponent
，模板将更改路径。如何将templateUrl设置为适合多个路径？