Я сейчас пытаюсь построить свой первый проект, используя AngularJS, Babel и Webpack.
У меня работает процесс связывания, и, кажется, все работает нормально, HTML моего партиала загружается без ошибок, однако контроллер не загружается,
Я могу видеть в связанном коде, что контроллер правильно связывается, но я не вижу, что мешает его выполнению.
Ниже представлено все, что у меня есть:
компонент
import practiceTemplate from './practice.template.html';
var practiceComponent = {
angularName: "practiceComponent",
template: practiceTemplate,
controller: practiceController,
controllerAs: "practice"
}
/* @ngInject */
class practiceController {
constructor($http) {
this.http = $http;
this.test = "test";
}
$onInit() {
console.log(this);
console.log("test");
this.testGet();
}
testGet() {
this.http.get("https://webhook.site/88ea9ff5-a3f7-4c50-9b81-d732d4389d3c").then(response => { console.log(response); });
}
}
export default practiceComponent;
шаблон
<article>
<h1>Hello!</h1>
<p>{{practice.test}}</p>
</article>
приложение. js
import practiceComponent from './practice/practice.component';
import angular from 'angular';
angular.module("testModule", [])
.component("practiceComponent", practiceComponent);
index. html
<div ng-app="testModule">
<practice-component></practice-component>
</div>
webpack.config
var path = require('path');
module.exports = {
entry: {
'main': path.join(__dirname, 'Scripts/src/AngularJS/app.js')
},
output: {
filename: '[name]-bundle.js',
path: path.join(__dirname, '/Scripts/dist/')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: ["angularjs-annotate"]
}
}
},
{
test: /\.html$/,
include: path.resolve(__dirname, 'Scripts/src/AngularJS'),
loader: 'html-loader'
},
{
test: /\.styl$/,
loader: 'style!css!stylus'
},
{
test: /\.css$/,
loader: 'style!css'
}
]
},
target: "node"
};