javascript Angular JS（1.x）ES6组件示例

Posted 2021-05-04

```
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);