Can someone explain how to create a component in a controller?
I already have an AngularJS module with a controller defined:
let app = angular.module('testApp', []);
However, when I try to load the component, it does not work as expected.
app.controller('MainCtrl', ["$scope", function($scope) {
// Array of objects containing component details.
let arr = [{name: 'firstComponent', component: {
template: "<div>tech filter component</div>",
controller: [() => {
let $ctrl = this;
}]
}}];
angular.forEach(arr, (itemArr) => {
// Component initialization issue here.
app.component(itemArr.name, itemArr.component)
});
}]);
This is the HTML code that I am working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>angularjs component</title>
</head>
<body ng-app="testApp" >
<div ng-controller="MainCtrl">
<first-component></first-component>
</div>
</body>
</html>For more details, you can check out this jsfiddle link.