标签： angular

分类
未分类

angular 编译

当我们开发完一个Angular应用的时候，如果有vue开发经验的，vue-cli有 npm run build 命令，一键式将资源打包成生产模式。同样，在angular的应用中，如果是angular-cli构建的项目，也有 ng build 命令，但是如果不加参数，默认是dev环境打包，所以我们在线上环境的时候，需要用 ng build –prod 命令。同样是构建，你知道 ng build –dev 与 ng build –prod 的打包区别吗？

总结下来应该有以下5点：

1、source map[map 文件]

dev模式在打包的时候会生成map文件，而生产模式则不会打包。不熟悉map文件作用的这里做简单的介绍，map文件的作用就是为了在应用资源在压缩后，如果出现错误，因为是压缩的资源，变量及方法名称都经过最简化处理，所以我们很难定位，这时map文件就将发挥作用，它可以帮我们在资源文件快速定位到错误的具体行号。

source map文件帮我们快速定位线上bug。但是你不想生成source map文件的话，我们可以使用 ng build –dev -sm false。同样，如果你想在prod环境生成source map文件，则也可以将其设置为true即可。

2、extract css [css样式单独抽取]

在开发环境构建的时候，css文件是不会单独抽出来打包成css文件，而是融合在js文件中，而在生产环境则相反。

当然在开发环境build的时候，我们也可以通过 ng build –dev -ec true 来将样式文件单独抽离出来打包成css文件，只不过在prod环境默认设置成了true而已。

3、Minification and Uglification[资源压缩]

在生产环境打包的时候代码是经过压缩及beatufiy的。这里简单说下，代码压缩包括对代码的空格、换行及注释的处理，beautify处理就是将我们的代码变量及方法名、参数名经过最简化处理。这两个过程都是为了减少及压缩线上代码体积的大小。

4、Tree Shaking[去除不必要的资源]

生产环境打包模式的时候，代码是经过tree shaking处理的，而开发环境打包模式是没有的。这里讲一个概念，什么是tree shaking？打过比方，tree shaking就是相当于去除我们实际在线上没有用过到的代码。举一例子：比如我们在写代码的过程中，写了一个组件，但是我们在实际过程中没有用到这个组件，那么在实际打包过程，是不会将这个组件打包到最终的bundle里面的。tree shaking形象化来理解就是通过摇曳去除那些枯叶【没用的代码】。

5、AOT(Ahead-Of-Time) Compilation[预编译资源]

开发环境模式的编译模式是JIT编译模式，而生产环境的编译模式是AOT编译模式。这里说明下什么是AOT、JIT编译模式。AOT编译模式是指angular的模块及组件都是提前编译好的，所以当浏览器在懒加载到某个模块或组件的时候，它的响应相对来说会快些；而JIT编译模式则不会，它会相应的编译后才会出现来。当然AOT编译模式还具有其他的优势，比如减少实际的打包体积，同时如果应用本身在打包的过程如果出错的话，是会编译报错，不会打包成功。

分类
angular

angular 不安全的url

当angular 引用外部的url 有时候会报错，比如在iframe 中嵌入了外部url

通用一点的做法是新建一个pipe 用来让url 变为安全 。

代码如下

Safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})

export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

module中引入

import { SafePipePipe } from ‘./SafePipe.pipe’; 

@NgModule({
   imports: [
    
   ],
   declarations: [
      ...
      SafePipePipe
   ],
   entryComponents: [
    
   ],
   exports: [
     
   ]
})

HTML 中使用

 <iframe [src]=”url | safe”></iframe>

分类
angular 技术

记一次写TS时，遇到的坑

当有时候想要创建一个 [[],[],[]]的时候，你会用什么方式尼？

[...Array(3)].fill([]);

[...Array(3)].map(i=>[]);

亦或者会想到

Array(3).fill(0).map(i=>[])

来给大家比较下这三个的区别

[...Array(3)].fill([]);

有坑，相信不少人也遇到过,具体的表现 可以看一下这段代码

var b = [...Array(3)].fill([]);
b[0].push('qiupu'); 
console.log(b);
// 0: ["qiupu"]
// 1: ["qiupu"]
// 2: ["qiupu"]

这个就不再多解释了，看不懂的可以加下群768901972

[...Array(3)].map(i=>[]);

在JS里写的时候是没有问题的，

var a = [...Array(3)].map(i=>[]); 
a[0].push('qiupu');
console.log(a);
// 0: ["qiupu"]
// 1: []
// 2: []

Array(3).fill(0).map(i=>[])

这个看着和上面那个没什么区别，就多了一次fill(0),那他的意义是什么，就是先填充0，避免了 TS 在转译目标为ES5的 将他编译为 Array(20).slice().map(function (i) { return []; })

这篇文章主要是告诉大家，目前的TS的转译可能还存在一定的问题，使用的时候，应该注意下，特别是空值的处理之类的，希望能帮到你

提供一个在线测试工具，方便没有TS环境

分类
angular

angular run build -prod 提示内存不足

一般来说尼，这个问题比较少见，但是如果是angular cli 的话

node –max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build –prod –aot

这行命令就可以解决了，注意只能解决angular的问题，其他框架的话原理一致，设置最大使用的内存，设的大一点就好

分类
未分类

ngIf

在angular 4 之后,ngIf 指令可以这样使用

<div *ngIf="flag">flag为真</div>
<div *ngIf="!flag">flag为假</div>

//不少人是这样用的
//实际上可以这样写
<div *ngIf="flag;else other">
    flag为真
</div>
<ng-template #other>flag为假</ng-template>


//还可以这样写
<div *ngIf="flag;then flagtrue else flagfalse">随便写点什么</div>    
<ng-template #flagtrue > flag为真</ng-template>
<ng-template #flagfalse>flag为假</ng-template>

//单独then也是可以的

分类
openlayers

openlayers 加载arcgis动态图层 缩放时偏移的某种可能

var url ="http://192.168.1.20:6080/arcgis/rest/services/test/MapServer/export?f=image&format=png&transparent=true";
var tiled = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        ratio: 1, // 缩放比例要设置，设置之后不偏移
        url: url,
        imageLoadFunction: function (image, src) {
            var _src = url;
            var size = map.getSize(),
                bbox = image.extent;
            var params = {
                layers: "show:0",
                layerDefs: '{"0": "name in (\'内蒙古自治区\')"}',
                // layerDefs: '',
                bboxSR: '4326',
                size: size.join(","),
                bbox: bbox.join(",")
            };
            for (var _p in params) {
                _src += "&" + _p + "=" + params[_p]
            }
            image.getImage().src = _src;
        }
    })
});
分类
未分类

ionic 构建发布包

ionic cordova build android –prod –release

参考：
https://ionicframework.com/docs/v3/cli/cordova/run/

jarsigner -verbose -keystore 密钥名称 -signedjar sipts_signed.apk app-release-unsigned.apk tzsb.keystore

jarsigner -verbose -keystore android.keystore -signedjar Last_gongs_sign.apk Before_sign.apk android.keystore

1）jarsigner是工具名称，-verbose表示将签名过程中的详细信息打印出来，显示在dos窗口中；

2）-keystore android.keystore 表示签名所使用的数字证书和所在位置，这里没有写路径，表示在当前目录下；

3）-signedjar Last_gongs_sign.apk Before_sign.apk 表示给 Before_sign.apk文件签名，签名后的文件名称为Last_gongs_sign.apk；

4）最后面的android.keystore 表示证书的别名

zipalign -f -v 4 Last_gongs_sign .apk XXX.apk

zipalign 简单的压缩优化APP代码 最后生成
XXX.apk 的包

分类
未分类

修改angular 项目 css to scss

在angular.json 中新增 （旧版）
defaults: {
        "styleext": "scss"
    }
在angular.json 中新增（新版）

"sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
修改
"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
}
分类
angular ionic

基于安卓平台 JS 与 Java 互操作 (采用ionic4/angular6技术)

背景：安卓中的 webView 要求实现 内嵌的 js 调用 安卓APP的方法 与并且支持安卓回调js代码  来实现。

WebView部分

webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //重要的

Java部分

@SuppressLint({“SetJavaScriptEnabled”, “AddJavascriptInterface”})
class JsInterface {
private Context mContext;

public JsInterface(Context context) {
this.mContext = context;
}

@JavascriptInterface
public String getName(){
return getUser();
}

@JavascriptInterface
public String getPass(){
return getPass();
}

Js部分

function loading(){
var name=window.AndroidWebView.getName()
var pass=window.AndroidWebView.getPass()//调用java方法
$.post(“101.111.11:800”,{remark:name,password:pass},function(result){
var obj=result;
if(obj.code==100){
toast(“登录成功”);
}else{
toast(“登录失败”);
}
});
}



来源： https://blog.csdn.net/u014548562/article/details/77916409

以上是我看博客的时候看到的，在angular中 我直接在html中写，发现不可以传变量过去，
例如：

<input onclick=”window.callJava.functionz(‘string’)”></input>

<input onclick=”window.callJava.functionz(parmString.toSring())”></input>

后来发现需要在ts代码中这样使用才可以。

相关文章链接：
1.Java执行JavaScript代码http://www.jb51.net/article/81577.htm

2.JAVA执行javascript方法http://blog.csdn.net/jianggujin/article/details/51046122

3.如何在java中调用js方法http://www.cnblogs.com/langtianya/archive/2012/09/18/2690860.html

分类
angular ionic

ionic4 ios的列表出现显示慢 卡住的情况

<一句话教程>不要使用angular的管道，特别是列表中，推荐使用

{{CrtDate.substr(0,10)}}

替换

{{CrtDate| date:’yyyy-MM-dd’}}