In looking for a bit of feedback about an Angular app I have created.
I'm new to angular I want to clean up the loose ends before I carry on and add new functionality.
Below is the code snippet of index.html which includes custom directives that includes a block of HTML and various angular elements
It also includes a $http service to fetch Json from an external file
<body ng-controller="StoreController as store">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="product.directives.js"></script>
<h1 class="text-center">{{store.title}}</h1>
<ul class="list-group container">
<li class="list-group-item col-sm-12" ng-repeat="product in store.products ">
<h1>
<product-title></product-title>
</h1>
<img ng-src="{{product.images[0].full}}" />
<p ng-hide="product.canPurchase">Item is not available for purchase</p>
<button ng-show="product.canPurchase">Add to cart</button>
<product-panels></product-panels>
</li>
</ul>
</body>
This is my app.js which contains the controllers
var app = angular.module('store', ['store-products']);
app.controller("ReviewController", function () {
// New review array slot is created and assigned blank
this.review = {};
// Form triggers function to push new review slot into array
this.addReview = function (product) {
product.reviews.push(this.review);
// Set the review form to blank again
this.review = {};
}
});
app.controller('StoreController', ['$http', function ($http) {
this.title = "Angular App";
console.log('test');
var store = this;
//store.products = [];
$http.get('/products.json').then(function (response) {
console.log(response);
store.products = response.data;
});
}]);
and finally here is my directives.js. with the logic being stored in external html files.
var app = angular.module('store-products', []);
app.directive('productPanels', function () {
return {
restrict: 'E',
templateUrl: 'product-panels.html',
controller: function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
}
this.isSelected = function (checkTab) {
return this.tab === checkTab;
}
},
controllerAs: 'panel',
};
});
app.directive('productTitle', function () {
return {
restrict: 'EA',
templateUrl: 'product-title.html'
};
});
