Detailed Description: webpack + es6 + angular1.x project construction, webpackangular1.x

Detailed Description: webpack + es6 + angular1.x project construction, webpackangular1.x

Technology stack Overview

ES2015 (ES6)

ES2015, as its name implies, is a set of standards officially released by ECMAScript in June 2015. ES6 indicates the sixth change of ECMAScript. (JavaScript is an implementation of the ECMAScript Specification ). ES5 has gradually been replaced and becomes the mainstream JS development specification. It adds a lot of syntactic sugar and greatly improves development efficiency.

Webpack

A modular build tool that is more friendly to ES6 construction and will not be described in detail.

Angular

A music video * framework, which uses angular 1.6.4, the highest version in angular1.x, can also be seen as a transitional version of 2.

Eslint

ESLint is a QA tool used to avoid low-level errors and unify the code style. In the case of multi-person development, it is very important to standardize the code and unify the style. Even if everyone is responsible for their own modules, there will inevitably be an intersection during actual execution. In short, eslint allows you to make fewer mistakes and make it easier for teammates to understand your code.

In this project, ESlint Recommended configuration is selected. The only note is that the angular keyword is added to the global variable. Because es7 async and other things are used, apart from the babel configuration in webpack, The eslint should also be configured with relevant parsing, namely:

Module. exports = {"env": {"browser": true, "commonjs": true, "es6": true}, "extends": "eslint: recommended ", "parserOptions": {"sourceType": "module"}, "globals": {"angular": true // angular keyword}, "parser": "babel-eslint ", // parse es7 "rules": {"no-console": 0, "quotes": ["error", "single"]};

Eslint is flexible and can be configured as needed. This project is officially recommended.

Project Structure

CommonComponents

Public component directory, put some secondary encapsulated tables, and so on.

Components

The page component directory, because it is a single page application, where each page is placed, and each page is encapsulated into a 'day' component, it is spliced by the respective html and '小' components.

Config

Configurable management directories such as routes and URLs.

Css

The public style directory of the project. The specific component style is written in each component. For example, the login component.

Image

Image directory. All images are managed here.

Server

Service Directory. Encapsulate some public services of the project, such as secondary encapsulation of http Services. This directory can also be subdivided, such as dividing angular providers, services, and values.

Project portal

App. js

import 'babel-polyfill';import angular from 'angular';import uiRouter from 'angular-ui-router';import components from './components';import services from './server'import commonComponents from './commonComponents';import appRouter from './config/app.router';import './css/main.less';import style from './app.less';let appComponent = {  restrict: 'E',  template: require('./app.html'),  controller: function () {    this.class = style;  },  controllerAs: 'app'};export default angular.module('sass', [uiRouter, components, services, commonComponents])  .config(appRouter)  .component('app', appComponent)  .name;

In addition to angular, ui-router is introduced. Because of the native routing, view Nesting is not supported. Components, services, and commonComponents are a summary of the services created by each component.

Write a page component

The following uses the logon page as an example. A component page consists of four files, respectively index. js (the exit of this page component is also the entry of other logics and styles)

import loginCtrl from './login'import tem from './login.html';export default angular.module('login', []) .component('login', {  template: tem,  controller: loginCtrl }) .name;

Login. js (the business logic of the page is here)

 import url from '../../config/system.js';class loginCtrl {  static $inject = ['http'];  constructor(http) {    [this.http, this.name] = [http, `login`];    this.str = `str${this.name}`;  }  login() {     this.http.get({userName: 'link', userPassword: '123456'}, url.login, (data) => {        console.info("success!")     });    }}export default loginCtrl;

This class mainly completes the service by sending a login http request. Here, http is a second encapsulated service, which is similar to native dependency injection. There are two injection methods, one is to call the static method in the class above. That is, static $ inject = ['http'];

The other is loginCtrl. $ inject = ['HTTP ']; (the class does not have a variable to be promoted. Make sure that it is written after the class definition)

Login. less (the style related to the next login page, without code ). In this way, a page component is written and output by index. js. Where is the output?

Unified management page Components

At the same level of the login page component directory written under the components directory, an index. js is created to centrally manage component pages. That is:

import login from './login';import register from './register';export default angular.module('components', [  login,  register]).name;

Then, output the page to the initial app. js. That is, the components introduced in app. js. Similarly, services, filters, and so on are all centrally managed and summarized by relevant files, and then imported by the entry file.

Similar to a tree structure:

Above, we have constructed a webpack + es6 + angular1.x project.

Project address reference: https://github.com/jiwenjiang/angularSeed

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.