Although today ANGULAR5 released, but I still do this article Angularjs (1) +webpack the article out of the HA haha

　

This article is original, reprint please indicate source: CNZT article: Cnzt-p

Http://www.cnblogs.com/zt-blog/p/7779384.html

Write in front:

Because recently summed up the things I have done before, so by the way summed up this article, to publish articles, just see the mobile phone push message "ANGULAR5 released " ah haha haha. I don't care I still want to put this article about ANGULAR1 because it also involves webpack ah haha haha haha ...　　

Angularjs+webpack Implementation of simulation menu editing functions

1 Environment configuration: Angularjs1.1 installation Nodejs (NPM): Slightly 1.2 install webpack (local)

NPM Install--save-dev Webpack

NPM install--save-dev [email protected]<version>

1.3 Creating a Webpack configuration file

Webpack.config.js

1.4 Installing ANGULARJS

NPM Install [Email protected]–save-dev

1.5 Run

Webpack

Webpack-dev-server (webpack-dev-server--hot--inline)

http://localhost:8080/

1.6 About Hot load:

When you develop locally, set up hot load to enable local changes to instantly react to page effects.

Note When setting:

Configuration Publicpath;

Bundle.js path in server: Http://localhost:8080/{publicpath}/bundle.js

1.7 Installing Loader

Webpack itself only recognizes JS files, but the project is usually in addition to JS files, there are css,img,url and other files, loader is to allow Webpack can also identify these files and modular.

Installation:

NPM Install Style-loader Css-loader--save-dev

NPM Install File-loader--save-dev

(all loader See Package.json)

1.8 Realization of modularity

Webpack is a module (Portal file + module dependencies) to manage the project, so we need to add modular functionality to the project, we adopt the ES6 modular implementation, we need to install the Babel loader compiled ES6:

NPM Install--save-dev babel-loader babel-core babel-preset-es2015

2 Angularjs2.1 Module

Ng,ngroute,ngsanitize,nganimate ...

Define the angular module:

Angular.module (' App.wxpagemodule ', []);

Angular.module (' app. Wxpanelmodule ', []);

2.2 Instruction V.s. Components

Angular built-in directives: Ngapp, Ngcontroller, Ngmodel, Ngview, ..., {{}}

Custom directives--components:

Wxpanelmodule.directive (' Wxpanel ', function () {

return {

Restrict: ' E ',//AEC

Templateurl: './src/components/wxpanel/wxpaneltemplate.html ',

Link:function ($scope, Elm, attr, Controller) {

You can manipulate the DOM, such as binding DOM events

},

Controller:function ($scope, $element, $attrs) {

Controller of the component

},

Scope: {

Isolation scopes, defining component variables

}

}

})

The custom directive relies on the angularjs HTML compiler ($compile) to attach some specific behavior to the element.

2.3 Controller V.S. Scope

define the controller :

Wxpanelmodule.controller (' Wxpanelctrl ', [' $scope ', function ($scope) {//$scope scope

Data model

$scope. a=1;

$scope. Geta=function () {...};

Add a method that can be called in a template by an event such as an expression or Ngclick

}])

Scope Scope:

When a controller is added to the DOM by a ng-controller instruction, NG invokes the Controller's constructor to generate a controller object, creating a new child scope (scope). In this constructor, the scope is injected as a $scope parameter and allows user code to access it.

In general, we use the controller to do two things:

1. Initializing $scope Object

2. Adding Behaviors to $scope objects (methods)

The controller is defined in each module and each controller has its own scope, thus forming a chain of scopes that correspond to the DOM tree structure. The root scope is $rootscope.

The scope provides the $watch method to listen to changes in the data model, provides $apply (execution $digest, examines all data that is monitored by the $watch and compares its previous values) to synchronize the data model changes that occur in the fly angular environment to the angular scope. (Applyàdigestàwatch)

Controller- to-scope--View (DOM) Command- to-scope--View (DOM)

Event propagation mechanisms at the scope:

$broadcast $emit $on

Service:

The controller should be kept as simple as possible, for example, the logic to obtain background service data should be encapsulated in the service and injected into the controller via dependency. The service is also defined on the module.

2.4 Bidirectional data binding

The model is always a single data source for applications

Dirty Check---- See scope Section

2.5 Dependency Injection di

Behind is the creation and lookup of dependencies through injector.

Injection Method :

Modulea.controller (' ctrl1 ', [' $scope ', ' dep1 ', ' Dep2 ',..., function ($scope, DEP1, Dep2,...) { ... }]);

2.6 Routing (Native V.s. Ui-router)

3 Webpack

Webpack helps us to bind each module and build a dependency graph.

3.1 Configuration

The configuration file exports an object (Commonjs module)

Example :

Const PATH = require (' path ');

Module.exports = {

Entry: './index.js ',

Output: {

Path:path.resolve (__dirname, ' dist '),

Publicpath: "/assets/",

FileName: ' bundle.js '//' bundle-[name]-[hash:8].js ',

},

Module: {

Rules: [{

Test:/\.js$/,

Use: ' babel-loader?presets=es2015 '

}, {

Test:/\.css$/,

Use: [' Style-loader ', ' Css-loader ']

}

]

}

};

3.2 Loader

The various types of files are modularized and then we can import them. For example, with Css-loader, we can import CSS files directly in the JS file.

Features: Chain-type, can receive parameters, and finally return JavaScript;

For more loader Please refer to: https://webpack.js.org/loaders/

3.3 Plugins

Plugin is a supplement to loader, can be used to do optimization/compression, etc., Webpack itself is also a form of plug-in.

e.g. code compression:

1. Introducing Plugins: Const WEBPACK = require (' Webpack ');
2. New example: Webpack.optimize.UglifyJsPlugin ()

Note: When using JS compression, it is best to use array mode dependency injection, otherwise the compression may not be successful.

For more plugins Please refer to: https://webpack.js.org/plugins/

3.4 Run

Webpack

Webpack-dev-server (webpack-dev-server--hot--inline)

http://localhost:8080/

Official website: https://webpack.js.org/concepts/

4 Note 4.1 Angular module V.S. ES6 Modular

Angular Module :

1. Ng,ngroute,ngsanitize,nganimate ... ; Dependency Injection;

2. Custom angular modules, such as Angular.module (' App.wxpagemodule ', []);

ES6 Module :

Import ...

Export ...

In file units

4.2 $watch Efficiency

The $watch method is frequently used for dirty checking when angular is implemented for two-way binding, so do not do DOM-related operations in this method, affecting efficiency.

A angular page ideal condition is about 200 $watch, generally everyone default 2000$watch for the upper limit (IE), this is for the page to better experience the effect, and does not mean that must be angular dirty check cap.

4.3 html5mode

$locationProvider. Html5mode (True). Hashprefix ('! ');

4.4 webpack Multiple Loader reverse execution

{

Test:/\.css$/,

Use: [' Style-loader ', ' css-loader ', ' Postcss-loader ']

}

Order: Postcss-->css-->style

Finally, the demo's GitHub address: Https://github.com/tinatingzhang/angualrjs_webpack

Angular.element (adomelement). XXX

Amd

Require ([' Modulea ', ' moduleb '], function (Modulea, Moduleb) {

Alert (' Load succeeded ');

});

Cmd

Seajs.use (".. /static/hello/src/main ")

CommonJS

Module.export = {

Name: ' Rouwan '

}

ES6 Module

Import {module1, module2} form './module.js ';

Export {Module1}

Although today ANGULAR5 released, but I still do this article Angularjs (1) +webpack the article out of the HA haha