热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

虽然今天angular5发布了,但我还是吧这篇angularjs(1)+webpack的文章发出来吧哈哈哈...

本文为原创,转载请注明出处:cnzt文章:cnzt-phttp:www.cnblogs.comzt-blogp7779384.html写在

 

 

本文为原创,转载请注明出处: cnzt       文章:cnzt-p

 

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

 

 

写在前面:

  因为最近总结自己之前做过的东西,所以顺便总结了这一篇,要发布文章时,刚好看到手机推送消息“angular5发布啦”啊哈哈哈哈哈哈。我不管我还是要把关于angular1的这篇文章放上来因为还涉及到webpack呢啊哈哈哈哈哈哈哈哈……  

 

Angularjs+webpack实现模拟微信菜单编辑功能

1       环境配置:Angularjs

1.1     安装nodejs (npm): 略

1.2     安装webpack (本地)

npm install --save-dev webpack

npm install --save-dev webpack@

 

1.3     创建webpack配置文件

webpack.config.js

1.4     安装angularjs

npm install angular@1.5.8  –save-dev

1.5     运行

webpack

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

http://localhost:8080/

1.6     关于热加载:

本地开发时,设置热加载能够实现本地更改即时反应到页面效果。

设置时注意:

配置publicPath;

bundle.js在server中的路径: http://localhost:8080/{publicPath}/bundle.js

 

1.7     安装loader

Webpack本身只识别js文件,但是项目中通常除了js文件外,还有css,img,url等各种文件,loader就是为了让webpack也能识别这些文件并将其模块化。

 

安装:

npm install style-loader css-loader --save-dev

npm install file-loader --save-dev

 

(所有loader详见package.json)

1.8     实现模块化

Webpack是以模块方式(入口文件+模块依赖)管理项目的,所以我们需要给项目加入模块化功能,我们采用ES6的模块化实现方式,需要先安装babel加载器编译ES6:

npm install --save-dev babel-loader babel-core babel-preset-es2015

2       Angularjs

2.1     模块

ng,ngRoute,ngSanitize,ngAnimate…

 

 

 

定义angular模块:

angular.module('app.wxPageModule', []);

angular.module('app. wxPanelModule', []);

 

2.2     指令 v.s. 组件

Angular内置指令: ngApp, ngController, ngModel, ngView, … , {{}}

 

自定义指令--组件:

wxPanelModule.directive('wxPanel', function() {

         return {

                   restrict: 'E',   //AEC

                   templateUrl: './src/components/wxPanel/wxPanelTemplate.html',

                   link: function($scope, elm, attr, controller) {

                            //可以操作dom,例如绑定dom事件

                   },

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

                            //组件的控制器

                   },

                   scope: {

                         //隔离作用域,定义组件变量

                   }

         }

})

自定义指令依赖angularjs的HTML编译器($compile)对元素附加一些特定的行为。

2.3     控制器 v.s. scope

定义控制器:

wxPanelModule.controller('wxPanelCtrl', [ '$scope', function($scope){ // $scope作用域

//数据模型     

$scope.a=1; 

$scope.getA=function(){ … };  

//添加方法,可以在模板中通过表达式或ngClick等事件调用

}])

 

作用域scope:

当一个控制器通过 ng-controller 指令被添加到DOM中时,ng 会调用该控制器的构造函数来生成一个控制器对象,这样,就创建了一个新的子级 作用域(scope)。在这个构造函数中,作用域会作为$scope参数注入其中,并允许用户代码访问它。

 

一般情况下,我们使用控制器做两件事:

1.初始化 $scope 对象

2.为 $scope 对象添加行为(方法)

 

控制器定义在各个模块中,每个控制器都有自己的作用域,因此形成一条作用域链,层级结构对应dom树结构。根作用域为$rootScope。

 

作用域提供了$watch方法监听数据模型变化,提供了$apply(执行$digest,检查所有由 $watch监听的数据并将其之前的值进行比较)方法将飞angular环境中发生的数据模型改变同步到angular作用域中。 (applyàdigestàwatch)

  • 控制器 --> 作用域 --> 视图(DOM)
  • 指令 --> 作用域 --> 视图(DOM)

 

作用域的事件传播机制:

$broadcast  $emit  $on

 

Service:

控制器应该尽可能保持单纯,例如获取后台服务数据的逻辑应该封装在service中,通过依赖注入到controller中。Service同样也是定义在module上面的。

2.4     双向数据绑定

 

 

据模型始终是应用的单一数据源

脏检查----见scope小节

2.5     依赖注入DI

 

 

 

背后是通过Injector来创建和查找依赖的。

 

注入方式:

moduleA.controller('ctrl1',['$scope','dep1', 'dep2',…, function($scope, dep1, dep2,…){ … }]);

2.6     路由 (原生 v.s. ui-router)

 

3       webpack

webpack帮助我们绑定各个模块,并构建出一张依赖图。

3.1     配置

配置文件导出的是一个对象(CommonJS模块)

 

示例:

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     加载器

将各种类型的文件进行模块化,之后我们就可以import了。例如有了css-loader我们就可以直接在js文件里import css文件。

 

特点:链式;可接收参数;最终返回Javascript ;

 

更多loader请参考:https://webpack.js.org/loaders/

3.3     插件

插件是对loader的补充,可以用来做优化/压缩等,webpack本身也是也是一种插件的形式。

 

e.g.代码压缩:

  1. 引入插件: const webpack = require('webpack');
  2. new出一个新实例:new webpack.optimize.UglifyJsPlugin()

注:使用js压缩时,最好使用数组方式依赖注入,否则可能压缩不成功。

 

更多插件请参考: https://webpack.js.org/plugins/

 

3.4     运行

webpack

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

http://localhost:8080/

 

官网:https://webpack.js.org/concepts/

4       注意

4.1     Angular模块 v.s. ES6模块化

Angular模块:

  1. ng,ngRoute,ngSanitize,ngAnimate… ; 依赖注入;

   

 

  2.  自定义的angular模块,如angular.module('app.wxPageModule', []);

 

 

ES6模块:

import …

export …

以文件为单位

 

4.2     $watch效率

Angular进行为实现双向绑定,进行脏检查时会频繁用到$watch方法,所以不要在此方法里做与dom相关的操作,影响效率。

一个angular页面理想状况为200左右的$watch,一般大家默认2000$watch为上限(IE),这是为了页面更好的体验效果,而并不意味着一定是angular dirty check上限。

 

4.3     html5Mode

$locationProvider.html5Mode(true).hashPrefix('!');

 

4.4     Webpack多个loader倒序执行

{

         test: /\.css$/,

use: ['style-loader', 'css-loader', 'postcss-loader']

}

顺序:postcss-->css-->style

 

最后的最后,demo的github地址: https://github.com/tinatingzhang/angualrjs_webpack

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

angular.element(aDomElement).XXX

 

 

 

//AMD

require(['moduleA', 'moduleB'], function (moduleA, moduleB){

    alert('加载成功');

});

 

//CMD

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

 

//CommonJS

module.export = {

    name:'rouwan'

}

 

//es6模块

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

export {module1}

 


转载于:https://www.cnblogs.com/zt-blog/p/7779384.html


推荐阅读
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Python 异步编程:ASGI 服务器与框架详解
    自 Python 3.5 引入 async/await 语法以来,异步编程迅速崛起,吸引了大量开发者的关注。本文将深入探讨 ASGI(异步服务器网关接口)及其在现代 Python Web 开发中的应用,介绍主流的 ASGI 服务器和框架。 ... [详细]
  • 本文探讨了如何在Node.js环境中,通过Tor网络使用的SOCKS5代理执行HTTP请求。文中不仅提供了基础的实现方法,还介绍了几种常用的库和工具,帮助开发者解决遇到的问题。 ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 自 Node.js 6.3 版本起,调试功能已内置在核心模块中,无需额外安装 node-inspector 等工具。通过简单的命令即可启动调试模式,并利用 Chrome 浏览器进行高效的代码调试。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 本文详细介绍了如何在Python3环境中配置Appium1.4.6,并指导如何连接模拟器进行自动化测试。通过本文,您将了解从环境搭建到模拟器连接的完整流程。 ... [详细]
author-avatar
谁的FrankyCH
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有