app
├── app.js
├── app.routes.js
├── projects
│ ├── index.js
│ ├── projects.component.js
│ ├── projects.html
│ ├── projects.routes.js
│ └── projects.service.js
├── styles
│ └── style.sass
import angular from 'angular';
import uirouter from 'angular-ui-router';
import routes from './projects.routes';
import ProjectsService from './projects.service';
import projects from './projects.component';
export default angular.module('app.projects', [uirouter])
.config(routes)
.component('projectsList', projects)
.service('ProjectsService', ProjectsService)
.name;
export default class ProjectsService {
constructor($http) {
this.$http = $http;
}
getAllProjects() {
return this.$http.get(`${process.env.API_URL}/projects`);
}
}
export default function($stateProvider) {
$stateProvider
.state({
name: 'projects',
url: '/',
component: 'projectsList',
resolve: {
auth: ['$auth', '$state', ($auth, $state) => {
return $auth.validateUser().catch(function(err) {
$state.go('login');
});
}],
},
});
}
<div class="panel-group" ng-init="getAllProjects()">
<div ng-repeat="project in projects">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
<div class="col-xs-10 col-sm-10 col-md-10"> {{project.name}} </div>
<div class="col-xs-1 col-sm-1 col-md-1">
<div class="control-items">
<span class="glyphicon glyphicon-pencil mb-right-10"></span>
<span class="glyphicon glyphicon-trash mb-right-10"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<form ng-submit="$ctrl.create(projectName)">
<div class="form-group">
<input ng-model="projectName" ng-click="showButtons=true" id="newProject"
type="text" class="form-control" placeholder="Enter Project Name...">
</div>
<div ng-show="showButtons">
<button type="submit" class="btn btn-lg btn-success mb-right-10">Create Project</button>
<button type="button" ng-click="showButtons=false; projectName=''" class="btn btn-lg btn-default">Cancel</button>
</div>
</form>
'use strict';
let projectsController = ($scope, ProjectsService) => {
$scope.getAllProjects = () => {
ProjectsService.getAllProjects().then(
(projects) => {
$scope.projects = projects.data;
}
);
};
$scope.create = (projectName) => {
ProjectsService.create({name: projectName || ''}).then(
(response) => {
$scope.addProject(response);
},
(errors) => {}
);
};
$scope.addProject = (response) => {
$scope.projects.push(response.data);
$scope.showButtons = false;
$scope.projectName = '';
};
};
export default {
template: require('./projects.html'),
controller: projectsController,
bindings: {
projects: '=',
},
};
export default function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}
'use strict';
import angular from 'angular';
import uirouter from 'angular-ui-router';
import './styles/style.sass';
import routes from './app.routes';
import projects from './projects';
angular.module('app', [
uirouter,
ngFlash,
projects,
])
.config(routes);