Currently developing a small application with Angular for the frontend, and my frontend module is structured as follows:
https://i.stack.imgur.com/tjfPB.png
In the app.js file, the main Angular module 'weatherApp' is defined:
angular.module('weatherApp', []);
The controller (weather.js) registers WeatherCtrl:
angular.module('weatherApp')
.controller('WeatherCtrl', ['$scope', 'WeatherProvider', ($scope, WeatherProvider) => {
$scope.location = {
city: "",
country: ""
};
$scope.options = [
{ label: "Weather", value: "weather" },
{ label: "Forecast", value: "forecast" }
];
$scope.selected = $scope.options[0];
$scope.result = "Empty";
$scope.getWeather = function () {
WeatherProvider.getWeatherFunc($scope.selected.value, $scope.location.city, $scope.location.country)
.then((response) => {
$scope.result = response.data;
})
}
}]);
Meanwhile, the service (provider.js) registers WeatherProvider:
angular.module('weatherApp')
.service('WeatherProvider', ['$http', function($http) {
this.getWeatherFunc = (weatherMode, city, country) => {
return $http({
method: 'GET',
url: "http://localhost:8080/" + weatherMode + "/" + city + "/" + country
})
}
}]);
Here's a glimpse of my webpack configuration:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: {
disableHostCheck: true
},
target: 'web',
context: path.join(__dirname, "src"),
devtool: 'source-map',
entry: {
app: "./app.js",
},
resolve: {
modules: [
path.resolve(__dirname),
"node_modules"
],
extensions: ['.js', '.html']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
},
output: {
path: path.join(__dirname, 'src'),
filename: "bundle.js",
publicPath: "/"
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src/index.tmpl.html"
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV ||"dev"),
}
})
],};
Displayed below is the content of index.tmpl.html:
https://i.stack.imgur.com/WsGDm.png
Upon running npm run dev, accessing http://localhost:8081/ shows the following outcome:
https://i.stack.imgur.com/trUe6.png
An error message indicates: Error: $controller:ctrlreg - A controller with this name is not registered. However, visiting http://localhost:8081/index.tmpl.html displays the expected result:
https://i.stack.imgur.com/GfMH0.png
Could you suggest why my controller and service are missing from bundle.js? I suspect this is the primary cause of failure.