AngularJS-ES6

2021-01-18: eslint stylelint fork Angularjs Angular TypeScript Angularjs

AngularJS + es6/es7 + webpack

AngularJS

git clone https://github.com/onlymisaky/AngularJS-ES6.git

cd AngularJS-ES6

3. cnpm

npm i --registry=http://r.cnpmjs.org/

npm run dev

npm run build

6. 4 5 node-sass build node-sass build 4 5

npm rebuild node-sass

cnpm cnpm vscode cpu 100% cnpm issues :

When using cnpm/pnpm, rg uses lots of CPU #35659

Use search.followSymlinks for all searches #37000

cnpm vscode ,

: cnpm i vscode **** search.followSymlinks false

: cnpm cnpm i --by=npm

taobao cnpm

1

Angular

2

angularjs module angular.module module es6 module .js esModule angular.module module module moduleA MyService moduleA moduleB moduleB MyService angularjs esModule

angular.module module angularjs module component component component module module

module

1. angular.module('app')
2. angular.module('app.common') servicecomponent
3. angular.module('app.router')

module module servicecomponent module module router module require module oclazyload module

3filter

filter $digest filterangularJS

filter controller service

4

service

angularjs provider``factory``service factory service provider service es6 class

export class UserService {

  static $inject = ['$http'];

  constructor($http) {
    this.$http = $http;
  }

  getUser(userId) {
    return this.$http
      .get(`/user/${userId}`)
      .then(response => {
        if (response.status === 200) {
          return response.data;
        }
      });
  }
}

controller

AngularJS 1.2 controllerAs controller ViewModel AngularJS new controller service

class UserController {

  static $inject = ['$stateParams', 'UserService'];

  user;

  constructor($stateParams, UserService) {
    this.UserService = UserService;
    this.userId = $stateParams.id;
  }

  $onInit() {
    this.UserService
      .getUser(this.userId)
      .then(user => this.user = user);
  }
}

UserService UserService UserService module XxxService

import { UserService } from './user.service';
angular
  .module('user')
  .service('XxxService', UserService);

angularjs .service .component .directive userModule.service('UserService', UserService) userModule.service({UserService: UserService}) es6 userModule.service({UserService}) servicecomponentdirective

5router

ui-router AngularJS

ui-router Route to component

6

angularjs ngModule angular.module oclazyload ngModule routes.js

7

css Module

vm view

import styles from './a.css';
class User {
  constructor() {
    this.styles = styles;
  }
}

<div class="{{ ::$ctrl.styles['text-center'] }}"></div>

.text-center {
  text-align: center;
}

id

• AngularJS styleguide (ES2015)
• Angular 1.xES6
• Angular1.x + es6
• AngularAngular
• ui-routerangular
• Lazy load AngularJS with Webpack
• angular-1-5-components-app