Angular分享（一）

发表于 2018-10-18 | 分类于前端开发

开始

好的工具能让开发更加简单快捷。
Angular CLI 是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
本章的目标是构建并运行一个超级简单的 TypeScript Angular 应用。使用 Angular CLI 来让每个 Angular 应用从风格指南的那些建议中获益。
在本章的末尾，你会对用 CLI 进行开发有一个最基本的理解，并将其作为其它文档范例以及真实应用的基础。
你还可以下载这个例子。

环境

在开始工作之前，你必须设置好开发环境。
如果你的电脑里没有 Node.js 和 npm，请安装它们。

请先在终端/控制台窗口中运行命令 node -v 和 npm -v，来验证一下你正在运行 node 8.x 和 npm 5.x 以上的版本。更老的版本可能会出现错误，更新的版本则没问题。

然后全局安装 Angular CLI

1	npm install -g @angular/cli

创建

打开终端窗口。
运行下列命令来生成一个新项目以及默认的应用代码：

1	ng new my-app

启动

和普通的正常双击打开 html 文件访问不一样， Angular 应用必须通过 webservice 访问。

ng serve

ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
使用 –open（或 -o）参数可以自动打开浏览器并访问 http://localhost:4200/

了解项目结构

src 文件夹

browserslist 一个配置文件，用来在不同的前端工具之间共享目标浏览器，代表这个项目的浏览器兼容情况。

polyfills.ts 不同的浏览器对 Web 标准的支持程度也不同。腻子脚本（polyfill）能把这些不同点进行标准化，填补不同浏览器缺失的 API。

styles.css 这里是你的全局样式。大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。

angular.json 文件

ng-cli 运行的配置文件

全局引用的 style 和 js
环境变量的配置

package.json 文件

npm 包管理的配置文件

dependencies 项目的依赖包
devDependencies 环境的依赖包
scripts npm run 执行的命令
本地安装包的引用

tsconfig.json 文件

typescript 编译时的配置文件

tslint.json 文件

typescript 开发时的语法检查配置文件

README.MD 读我

这个文件也就和字面意思差不多，算是项目介绍文档，使用 markdown 编写，针对团队开发的话建议可以把一些执行命令和一些注意事项写在该文件内，方便其它人知晓。

Angular 的模块 (NgModule)

NgModules 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。

特性模块

针对业务逻辑创建的模块。

sharedModule

共享组件和指令的模块。

coreModule

共享服务模块。

关于模块的组件和服务的分布

sharedModule 最好是只导出 component 和 directive
coreModule 最好是只注入服务，不导出组件和指令
如果有特殊业务逻辑的复用组件不一定要写在 sharedModule 可以放在特性模块内，因为特性模块之间也可以相互引用，但是惰性加载的方式不推荐互相引用。
1. 组件可能不是一个单纯的 UI 交互性的组件
2. 组件依赖服务，但是服务并不是公用服务
3. 修改组件的写法，将组件和服务分离

Angular 的路由

在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。

路由守护

现在，任何用户都能在任何时候导航到任何地方。但有时候这样是不对的。

该用户可能无权导航到目标组件。
可能用户得先登录（认证）。
在显示目标组件前，你可能得先获取某些数据。
在离开组件前，你可能要先保存修改。
你可能要询问用户：你是否要放弃本次更改，而不用保存它们？

你可以往路由配置中添加守卫，来处理这些场景

Http 拦截

HTTP 拦截机制是 @angular/common/http 中的主要特性之一。使用这种拦截机制，你可以声明一些拦截器，用它们监视和转换从应用发送到服务器的 HTTP 请求。拦截器还可以用监视和转换从服务器返回到本应用的那些响应。多个选择器会构成一个“请求/响应处理器”的双向链表。

chorme浏览器记住密码后input黄色背景处理方法总结（三种）

发表于 2018-02-28 | 分类于前端开发

解决方法

方法1：阴影覆盖

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
注：由于是设置颜色覆盖，所以只对非透明的纯色背景有效；

方法2：修改chrome浏览器渲染黄色背景的时间（推荐）

:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
transition: background-color 5000s ease-in-out 0s;
}
注：此方法适用于上图那种背景为透明色的输入框

方法3：jq方式去除

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
  let _interval = window.setInterval(function () {
    let autofills = $('input:-webkit-autofill');
    if (autofills.length > 0) {
      window.clearInterval(_interval); // 停止轮询
      autofills.each(function() {
        let clone = $(this).clone(true, true);
        $(this).after(clone).remove();
      });
    }
  }, 20);
}

转载自

chorme浏览器记住密码后input黄色背景处理方法总结（三种）

JavaScript的Date类型，toJSON

发表于 2018-01-23 | 分类于前端开发

你肯定也被坑过

最近在项目中遇到了一个问题，前端Date类型数据没经过任何处理，提交到服务端之后时间变了。

1 2	new Date() // Tue Jan 23 2018 20:39:12 GMT+0800 (中国标准时间)

看上去没有任何问题的时间，但实际在提交到服务端时，发现浏览器里面传过去的参数已经变成了下面这样。

1	"2018-01-23T12:39:17.211Z"

原因是在ajax提交数据时其实并没有什么Date类型，只能是一个json字符串，这个时间字符串其实就是

1 2	new Date().toJSON() // 2018-01-23T12:39:17.211Z

其实这是一个 ISO 8601 时间

ISO 8601

国际标准化组织的国际标准ISO 8601是日期和时间的表示方法，全称为《数据存储和交换形式·信息交换·日期和时间的表示方法》。目前最新为第三版ISO8601:2004，第一版为ISO8601:1988，第二版为ISO8601:2000。年由4位数组成，以公历公元1年为0001年，以公元前1年为0000年，公元前2年为-0001年，其他以此类推。应用其他纪年法要换算成公历，但如果发送和接受信息的双方有共同一致同意的其他纪年法，可以自行应用。

YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示)
1997-07-16T08:20:30Z
// “Z”表示UTC标准时区，即"00:00",所以这里表示零时区的`1997年7月16日08时20分30秒`
//转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒`
1997-07-16T19:20:30+01:00
// 表示东一区的1997年7月16日19时20秒30分，转换成UTC标准时间的话是1997-07-16T18:20:30Z

Angular + TypeScript

我们项目中用到了 TypeScript，对象使用的是强类型，所以提交数据的时候是有一个 JSON.stringify() 的转换，在这个过程中 Date 类型就会调用 toJSON() 的方法转换成字符串。

解决

在提交之前把 Date 类型改为 String 类型，不用 toJSON() 方法，提前转换成正确的字符串。
修改 toJSON() 方法，比如这样

1	Date.prototype.toJSON = function(){return this.toUTCString();};

Reference

JavaScript 时间与日期处理实战:你肯定被坑过
 JS原生Date类型方法的一些冷知识
 阮一峰 JavaScript标准参考教程 Date对象

Angular在控件中使用Pipe的服务

发表于 2018-01-16 | 分类于前端开发

管道 (Pipe)

每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。获取数据可能简单到创建一个局部变量就行，也可能复杂到从WebSocket中获取数据流。

我们经常在html中这样使用Pipe

1	<p>消费总金额：{{ offerItems\|number:'1.2-2' }}</p>`

但是在我们实际应用中有时候因为计算，我们也需要在Component的Ts中去调用管道提供的方法进行计算、转换，这样保持数据一致。

首先import你需要的用到的管道。可以查看自带有哪些Pipe的API @angular/common

1	import { DecimalPipe } from '@angular/common';

在Component中注入服务

@Component({
    selector: 'app-pipe',
    templateUrl: 'pipe.component.html',
    styleUrls: ['./pipe.component.scss'],
    providers: [DecimalPipe]
})

调用 transform 方法

export class PipeComponent {
    constructor(private decimalPipe: DecimalPipe) {
        const offerItem = decimalPipe.transform(21.556, '1.2-2');
        console.log(offerItem);
    }
}

Xamarin相关网站

发表于 2018-01-15 | 分类于移动开发

Windows环境下面的工具下载

发表于 2018-01-15 | 分类于移动开发

Windows下面的安装

安装环境介绍：
Win10 企业版64位、VS2017
安装jdk
到oracle官方下载 jdk-8u152-windows-x64.exe 并安装
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
默认是安装到C盘的，根据自己的情况选择目录后完成安装，接下来进行环境变量的设置
添加环境变量 JAVA_HOME：
C:\Program Files\Java\jdk1.8.0_152
添加环境变量 CLASSPATH：
%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
修改环境变量 Path，在最前面加入以下值：
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
安装完成之后在CMD里输入“java -version”可查看成功安装之后的版本号
安装Android SDK，下载 installer_r24.4.1-windows.exe，我这里是安装到“E:\Develop\Android\android-sdk”目录下，安装完后设置环境变量，右键我的电脑——属性——高级系统设置——高级——环境变量——系统变量里，找到 Path，双击进行修改，在最前面增加：
.;E:\Develop\Android\android-sdk\tools;E:\Develop\Android\android-sdk\platform-tools;
（注意末尾必须有 ; 英文分号，如果 Path 里面已经有这个值，就不需要添加）
如果要更新SDK，以下两种方式选其一：
(1) (推荐)目前国内用户可以直接下载了，速度还不错
(2) 打开Android SDK Manager，Tools -> Options…，HTTP Proxy Server里填“mirrors.neusoft.edu.cn”，Http Proxy Port里填“80”，然后勾选“Force https://...sources to be fetched using http://...”，Close后在Packages里Reload或者关闭重新打开都可。
大连东软信息学院镜像服务器地址:

IPv4: http://mirrors.neusoft.edu.cn 端口：80

安装NDK，复制 android-ndk-r10e-windows-x86_64.exe 至指定目录下，双击解压即可，我这里是安装到“E:\Develop\Android\android-ndk”目录下，安装完后新建一个环境变量 ANDROID_NDK_PATH，值如下：
E:\Develop\Android\android-ndk\android-ndk-r10e
装完NDK之后记得最后在Virsual Studio和VS里去设置NDK路径。
在线安装，VS2017安装程序勾选移动模块即可
(推荐)离线安装，微软收购Xamarin之后也只需要安装一个文件了，原来的XamarinStudio也不用了
1) Xamarin.VisualStudio_x.x.x.x.msi

附官方下载地址：
http://dl.google.com/android/ndk/android-ndk-r10e-windows-x86_64.exe
http://dl.google.com/android/installer_r24.4.1-windows.exe
http://download.xamarin.com/GTKforWindows/Windows/gtk-sharp-2.12.30.msi
https://dl.xamarin.com/XamarinforVisualStudio/Windows/Xamarin.VisualStudio_4.8.0.1242444.msi
http://download.xamarin.com/studio/Windows/XamarinStudio-5.10.3.26-0.msi
以上链接如不是最新，以官方最新为主，官方更新地址如下：
http://xamarin.com/installer_assets/v3/Windows/Universal/InstallationManifest.xml
https://developer.xamarin.com/releases/current/

更新日志：
https://developer.xamarin.com/releases/current/

关于在Window下开发安卓用什么模拟器，这里必须推荐一款(如果是VS2015那就用自带的吧)：
首页直接下载模拟器：http://www.droid4x.cn/
装完之后即可使用，可连VS调试，速度很不错。

作者：Hegel_SU
链接：https://www.jianshu.com/p/c67c14b3110c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Mac环境下面的工具下载

发表于 2018-01-15 | 分类于移动开发

Mac下面的安装

安装mac os，这方面就不多说了，可以百度，也可以参考下面文章
http://www.jianshu.com/p/25d2d781bd98
Mac装好之后开发Xamarin必须装XCode，XCode可以直接到AppStore上下载安装，免费的，装完之后先运行一下XCode，第一次运行需要初始化组件，完成之后再在终端里输入以下命令完成tools的安装：
xcode-select –install

如果Xamarin Studio 6.2及以上的版本代码管理无法看到svn，论坛里的解决方案是终端里创建一个链接即可：
sudo ln -s “/Applications/Xcode.app/Contents/Developer/“ “/var/db/xcode_select_link”

自动安装：到官方网站下载在线安装程序XamarinInstaller.dmg进行全自动安装，安装过程中要下载很多文件（国内需要翻墙），所以此步会有点漫长，等待自动安装完成即可。自动安装程序下载地址：
https://www.visualstudio.com/en-us/news/releasenotes/vs2017-mac-relnotes
自动安装后请打开Xamarin进行更新到最新版即可。
手动离线安装(将suyx修改为你自己的Mac账户名)：
还是喜欢离线下载了安装，安装包下载临时目录为：
/Users/suyx/Library/Caches/XamarinInstaller/Universal
更新包临时下载目录为：
/Users/suyx/Library/Caches/VisualStudio/7.0/TempDownload
下载文件
https://dl.xamarin.com/MonoFrameworkMDK/Macx86/MonoFramework-MDK-5.4.1.7.macos10.xamarin.universal.pkg
http://download.xamarin.com/Installer/MonoForAndroid/jdk-8u101-macosx-x64.dmg
http://dl.google.com/android/android-sdk_r24.4.1-macosx.zip
https://dl.xamarin.com/VsMac/VisualStudioForMac-7.3.3.5.dmg
https://dl.xamarin.com/MonoforAndroid/Mac/xamarin.android-8.1.3-0.pkg
https://dl.xamarin.com/MonoTouch/Mac/xamarin.ios-11.6.1.3.pkg
https://dl.xamarin.com/XamarinforMac/Mac/xamarin.mac-4.0.0.215.pkg
https://dl.xamarin.com/Installer/haxm-macosx_v6_0_5.zip
https://dl.xamarin.com/profiler/profiler-mac-1.6.0-27.pkg
https://dl.xamarin.com/interactive/XamarinInteractive-1.3.2.pkg
https://download.microsoft.com/download/1/1/4/114223DE-0AD6-4B8A-A8FB-164E5862AF6E/dotnet-dev-osx-x64.1.0.3.pkg
安装完之后再更新最新的正式版即可。
以上链接如不是最新，以官方为主，官方更新地址如下：
http://xamarin.com/installer_assets/v3/Mac/Universal/InstallationManifest.xml
https://developer.xamarin.com/releases/current/

文件都下载完成之后，开始手动安装步骤：
(1)安装Java环境(开发Android必需)：打开jdk-xxx-macosx-x64.dmg进行安装，安装完成之后在终端里输入”java -version”可查看安装成功之后的版本号；
(2)安装Android SDK(开发Android必需)：将android-sdk_xxx-macosx.zip复制到目录“~/Library/Developer/Xamarin”下(目录不存在请手工创建)，然后双击android-sdk_xxx-macosx.zip解压完毕，然后在终端里进入解压之后的 tools 目录，运行“./android”即可打开SDK Manager进行更新，更新方法见Win下的安装说明，为了保证Xamarin能检测到SDK，至少必须将“Android SDK Platform-tools”更新完成，其它的根据自己开发所需进行更新(程序运行好久都不见菜单，原来是要先点下桌面，再点下sdk manager才会有)。
(3)安装Android NDK：将android-ndk-r10e-darwin-x86_64.bin复制到目录“~/Library/Developer/Xamarin/android-ndk”下(目录不存在请手工创建)，终端里切到 android-ndk 目录之后运行如下两行命令进行解压完成即可：
chmod a+x android-ndk-r10e-darwin-x86_64.bin
./android-ndk-r10e-darwin-x86_64.bin
(4)安装Mono环境：打开 MonoFramework-MDK-xxx.macos10.xamarin.x86.pkg 后安装完成即可。
(5)安装开发IDE：打开 VisualStudioForMac-xxx.dmg 后安装完成即可。
(6)安装xamarin.ios(开发iOS必需，根据个人需求选择安装)：打开 xamarin.ios-xxx.pkg 后安装完成即可。
(7)安装xamarin.android(开发Android必需，根据个人需求选择安装)：打开 xamarin.android-xxx.pkg 后安装完成即可。
(8)安装xamarin.mac(开发Mac程序必需，根据个人需求选择安装)：打开 xamarin.mac-xxx.pkg 后安装完成即可。
(9)设置Xamarin环境：打开XamarinStudio->Preferences->工程->SDK Locations->Android，可看到SDK和NDK为空，设置后的结果如下(路径可直接在你的编辑器里修改后复制进去即可)：
Android SDK(将suyx修改为你自己的Mac账户名):
/Users/suyx/Library/Developer/Xamarin/android-sdk-macosx
Java SDK(这个默认已装好):
/usr
Android NDK(将suyx修改为你自己的Mac账户名):
/Users/suyx/Library/Developer/Xamarin/android-ndk/android-ndk-r10e
(10)Xamarin自动升级的更新文件下载路径为(将suyx修改为你自己的Mac账户名)：
/Users/suyx/Library/Caches/VisualStudio/7.0/TempDownload

MonoTouch 8.10.x更新日志：
https://developer.xamarin.com/releases/ios/xamarin.ios_8/xamarin.ios_8.13/
有时候生成的adhoc包用itools就是装不上，后来又找了个程序不错，推荐一下：
同步助手：http://zs.tongbu.com/

作者：Hegel_SU
链接：https://www.jianshu.com/p/c67c14b3110c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

相关资料

开始

环境

创建

启动

了解项目结构

src 文件夹

angular.json 文件

package.json 文件

tsconfig.json 文件

tslint.json 文件

README.MD 读我

Angular 的模块 (NgModule)

特性模块

sharedModule

coreModule

关于模块的组件和服务的分布

Angular 的路由

路由守护

Http 拦截

解决方法

方法1：阴影覆盖

方法2：修改chrome浏览器渲染黄色背景的时间（推荐）

方法3：jq方式去除

转载自

你肯定也被坑过

ISO 8601

Angular + TypeScript

解决

Reference

管道 (Pipe)