Hello fellow developers!
Recently, I decided to explore Angular and create a simple image uploading and editing app following the MVC (or similar) architecture.
However, I find myself stuck at the entry point, unsure of how to correctly return a populated main form from the template.
My current approach involves calling the controller function first, which then calls the mainService function to build the form. The form utilizes the 'imageUploadController' which in turn uses the imageUploadService.
Yet, something tells me that this approach might not be the best practice.
My main issue is figuring out how to retrieve uploadImageForm.html, pass it to index.html without links or includes, while ensuring that all services and controllers work seamlessly.
What are the best practices in such a situation?
Below is a snippet of the code to provide more clarity on the problem:
Here's my index.html:
<!doctype html>
<html lang="en" ng-app="modernFilter">
<head>
<meta charset="utf-8">
<title>Modern.Filters</title>
<script src="asstes/libs/angular.min.js"></script>
<script src="app/components/app.js"></script>
<script src="app/shared/imageUploadController.js"></script>
</head>
<body ng-controller = "mainController">
<span>{{mainForm}}</span>
</body>
</html>
Here is app.js:
'use strict';
// Define the `modern.filter` module
var modernFilterApp = angular.module('modernFilter', []);
// Define main controller
modernFilterApp.controller('mainController', ['$scope', function($scope, mainService){
// Stores form data
$scope.mainForm = null;
// Returns main form template
$scope.getMainForm = function(){
$scope.mainForm = mainService.getMainForm();
}
// Call function on documentready
angular.element(document).ready(function () {
$scope.getMainForm();
//todo: is it even okay? but without it nothing happens
$scope.$apply();
})
}]);
// Define service
modernFilterApp.service('mainService', function(mainService){
this.getMainForm = function(){
// todo: how should I get template here?
return "filled form template from here";
}
});
I also have a template named imageUploadView:
<div ng-controller="imageUploadController">
<canvas id="imageCanvas"></canvas>
<form action="">
<input my-upload type="file" name="upload" onchange="angular.element(this).scope().uploadImage()">
</form>
Controllers and services for the image upload feature (debugging in progress):
modernFilterApp.controller('imageUploadController', ['$scope', 'imageUploadService', function($scope, imageUploadService) {
// Stores image
$scope.image = null;
// Uploads image
$scope.uploadImage = function() {
$scope.image = imageUploadService.handleImage(arguments);
}
}]);
// Define upload service
modernFilterApp.service('imageUploadService', function(imageUploadService) {
// Function handles uploaded files (dirty code)
this.handleImage = function(event) {
var canvas = angular.element('#imageCanvas'),
context = canvas.getContext('2d'),
reader = new FileReader(),
img = new Image();
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
img.src = event.target.result;
return reader.readAsDataURL(e.target.files[0]);
}
}]);