Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

Article Refactor #874

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions modules/articles/client/articles.client.module.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
'use strict';
(function (app) {
'use strict';

// Use Applicaion configuration module to register a new module
ApplicationConfiguration.registerModule('articles');
app.registerModule('articles');
app.registerModule('articles.models');
app.registerModule('articles.routes', ['ui.router', 'articles.models']);
})(ApplicationConfiguration);
18 changes: 11 additions & 7 deletions modules/articles/client/config/articles.client.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
'use strict';
(function () {
'use strict';

// Configuring the Articles module
angular.module('articles').run(['Menus',
function (Menus) {
// Add the articles dropdown item
angular
.module('articles')
.run(menuConfig);

menuConfig.$inject = ['Menus'];

function menuConfig(Menus) {
Menus.addMenuItem('topbar', {
title: 'Articles',
state: 'articles',
@@ -19,9 +23,9 @@ angular.module('articles').run(['Menus',

// Add the dropdown create item
Menus.addSubMenuItem('topbar', 'articles', {
title: 'Create Articles',
title: 'Create Article',
state: 'articles.create',
roles: ['user']
});
}
]);
})();
64 changes: 51 additions & 13 deletions modules/articles/client/config/articles.client.routes.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
'use strict';
(function () {
'use strict';

// Setting up route
angular.module('articles').config(['$stateProvider',
function ($stateProvider) {
// Articles state routing
angular
.module('articles.routes')
.config(routeConfig);

routeConfig.$inject = ['$stateProvider'];

function routeConfig($stateProvider) {
$stateProvider
.state('articles', {
abstract: true,
@@ -12,25 +16,59 @@ angular.module('articles').config(['$stateProvider',
})
.state('articles.list', {
url: '',
templateUrl: 'modules/articles/client/views/list-articles.client.view.html'
templateUrl: 'modules/articles/client/views/list-articles.client.view.html',
controller: 'ArticlesListController',
controllerAs: 'vm'
})
.state('articles.create', {
url: '/create',
templateUrl: 'modules/articles/client/views/create-article.client.view.html',
templateUrl: 'modules/articles/client/views/form-article.client.view.html',
controller: 'ArticlesController',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be 'ArticlesCreateController' or something similar since we are doing that above?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well previously I had them all separate controllers but that got shot down. I can see the need for a create controller if we don't want to pass in a blank article to resolve. Then the ArticlesController would handle edit/view since it needs an article to resolve? @rhutchison

controllerAs: 'vm',
resolve: {
articleResolve: newArticle
},
data: {
roles: ['user', 'admin']
},
resolve: {
articleResolve: newArticle
}
})
.state('articles.view', {
url: '/:articleId',
templateUrl: 'modules/articles/client/views/view-article.client.view.html'
})
.state('articles.edit', {
url: '/:articleId/edit',
templateUrl: 'modules/articles/client/views/edit-article.client.view.html',
templateUrl: 'modules/articles/client/views/form-article.client.view.html',
controller: 'ArticlesController',
controllerAs: 'vm',
resolve: {
articleResolve: getArticle
},
data: {
roles: ['user', 'admin']
}
})
.state('articles.view', {
url: '/:articleId',
templateUrl: 'modules/articles/client/views/view-article.client.view.html',
controller: 'ArticlesController',
controllerAs: 'vm',
resolve: {
articleResolve: getArticle
}
});
}
]);

getArticle.$inject = ['$stateParams', 'Article'];

function getArticle($stateParams, Article) {
return Article.get({
articleId: $stateParams.articleId
}).$promise;
}

newArticle.$inject = ['Article'];

function newArticle(Article) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do this? Why not just do it in the controller

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ilanbiala It makes the controller smaller and allows the use of UI-Router nested views to share the resolve between the views and other controllers.

return new Article();
}
})();
106 changes: 37 additions & 69 deletions modules/articles/client/controllers/articles.client.controller.js
Original file line number Diff line number Diff line change
@@ -1,84 +1,52 @@
'use strict';
(function () {
'use strict';

// Articles controller
angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles',
function ($scope, $stateParams, $location, Authentication, Articles) {
$scope.authentication = Authentication;
angular
.module('articles')
.controller('ArticlesController', ArticlesController);

// Create new Article
$scope.create = function (isValid) {
$scope.error = null;
ArticlesController.$inject = ['$scope', '$state', 'articleResolve', 'Authentication'];

if (!isValid) {
$scope.$broadcast('show-errors-check-validity', 'articleForm');

return false;
}

// Create new Article object
var article = new Articles({
title: this.title,
content: this.content
});
function ArticlesController($scope, $state, article, Authentication) {
var vm = this;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this necessary?


// Redirect after save
article.$save(function (response) {
$location.path('articles/' + response._id);

// Clear form fields
$scope.title = '';
$scope.content = '';
}, function (errorResponse) {
$scope.error = errorResponse.data.message;
});
};
vm.article = article;
vm.authentication = Authentication;
vm.error = null;
vm.form = {};
vm.remove = remove;
vm.save = save;

// Remove existing Article
$scope.remove = function (article) {
if (article) {
article.$remove();

for (var i in $scope.articles) {
if ($scope.articles[i] === article) {
$scope.articles.splice(i, 1);
}
}
} else {
$scope.article.$remove(function () {
$location.path('articles');
});
function remove() {
if (confirm('Are you sure you want to delete?')) {
vm.article.$remove($state.go('articles.list'));
}
};

// Update existing Article
$scope.update = function (isValid) {
$scope.error = null;
}

// Save Article
function save(isValid) {
if (!isValid) {
$scope.$broadcast('show-errors-check-validity', 'articleForm');

$scope.$broadcast('show-errors-check-validity', 'vm.form.articleForm');
return false;
}

var article = $scope.article;

article.$update(function () {
$location.path('articles/' + article._id);
}, function (errorResponse) {
$scope.error = errorResponse.data.message;
});
};
// TODO: move create/update logic to service
if (vm.article._id) {
vm.article.$update(successCallback, errorCallback);
} else {
vm.article.$save(successCallback, errorCallback);
}

// Find a list of Articles
$scope.find = function () {
$scope.articles = Articles.query();
};
function successCallback(res) {
$state.go('articles.view', {
articleId: res._id
});
}

// Find existing Article
$scope.findOne = function () {
$scope.article = Articles.get({
articleId: $stateParams.articleId
});
};
function errorCallback(res) {
vm.error = res.data.message;
}
}
}
]);
})();
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
(function () {
'use strict';

angular
.module('articles')
.controller('ArticlesListController', ArticlesListController);

ArticlesListController.$inject = ['Article'];

function ArticlesListController(Article) {
var vm = this;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?


vm.articles = Article.query();
}
})();
15 changes: 10 additions & 5 deletions modules/articles/client/services/articles.client.service.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
'use strict';
(function () {
'use strict';

//Articles service used for communicating with the articles REST endpoints
angular.module('articles').factory('Articles', ['$resource',
function ($resource) {
angular
.module('articles')
.factory('Articles', Articles);

Articles.$inject = ['$resource'];

function Articles($resource) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@trainerbill To follow John Papa to the T, this should be ArticlesService

https://github.com/johnpapa/angular-styleguide#naming

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are correct sir. I will update

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to update this

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still hasn't been updated.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update

return $resource('api/articles/:articleId', {
articleId: '@_id'
}, {
@@ -11,4 +16,4 @@ angular.module('articles').factory('Articles', ['$resource',
}
});
}
]);
})();
19 changes: 19 additions & 0 deletions modules/articles/client/services/models/article.client.model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
(function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rhutchison What's the purpose of this file?

We haven't decided on how we're going to move to a client-side model implementation. This isn't needed, since it's just a duplication of article.client.service

'use strict';

angular
.module('articles.models')
.factory('Article', Article);

Article.$inject = ['$resource'];

function Article($resource) {
return $resource('api/articles/:articleId', {
articleId: '@_id'
}, {
update: {
method: 'PUT'
}
});
}
})();
8 changes: 4 additions & 4 deletions modules/articles/client/views/create-article.client.view.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<section ng-controller="ArticlesController">
<section>
<div class="page-header">
<h1>New Article</h1>
</div>
<div class="col-md-12">
<form name="articleForm" class="form-horizontal" ng-submit="create(articleForm.$valid)" novalidate>
<form name="articleForm" class="form-horizontal" ng-submit="vm.save(articleForm.$valid)" novalidate>
<fieldset>
<div class="form-group" show-errors>
<label for="title">Title</label>
<input name="title" type="text" ng-model="title" id="title" class="form-control" placeholder="Title" required>
<input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required>
<div ng-messages="articleForm.title.$error" role="alert">
<p class="help-block error-text" ng-message="required">Article title is required.</p>
</div>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea name="content" ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
<textarea name="content" ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
8 changes: 4 additions & 4 deletions modules/articles/client/views/edit-article.client.view.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<section ng-controller="ArticlesController" ng-init="findOne()">
<section>
<div class="page-header">
<h1>Edit Article</h1>
</div>
<div class="col-md-12">
<form name="articleForm" class="form-horizontal" ng-submit="update(articleForm.$valid)" novalidate>
<form name="articleForm" class="form-horizontal" ng-submit="vm.save(articleForm.$valid)" novalidate>
<fieldset>
<div class="form-group" show-errors>
<label for="title">Title</label>
<input name="title" type="text" ng-model="article.title" id="title" class="form-control" placeholder="Title" required>
<input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required>
<div ng-messages="articleForm.title.$error" role="alert">
<p class="help-block error-text" ng-message="required">Article title is required.</p>
</div>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea name="content" ng-model="article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
<textarea name="content" ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Update" class="btn btn-default">
28 changes: 28 additions & 0 deletions modules/articles/client/views/form-article.client.view.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<section>
<div class="page-header">
<h1>{{vm.article._id ? 'Edit Article' : 'New Article'}}</h1>
</div>
<div class="col-md-12">
<form name="vm.form.articleForm" class="form-horizontal" ng-submit="vm.save(vm.form.articleForm.$valid)" novalidate>
<fieldset>
<div class="form-group" show-errors>
<label class="control-label" for="title">Title</label>
<input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required>
<div ng-messages="vm.form.articleForm.title.$error" role="alert">
<p class="help-block error-text" ng-message="required">Article title is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label" for="content">Content</label>
<textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>
<div ng-show="vm.error" class="text-danger">
<strong ng-bind="vm.error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
Loading