AngularGo —— 一个开源 Angular SPA 模板

在接触 Angular 后,这些年工作业余也用 Angular 做了若干实际项目。不过,由于 Angular 在国内的流行度不高,各种原创内容和参考资料也相对较少。虽然网络上也能找到各种各样的技术文章,官方的文档也很全面,但总的来讲,信息还是有些分散。

很惭愧,几年里没有做什么特别有技术含量的工作。 只是提炼出一个很基础的模板,帮助开发者快速创建一个 SPA(Single Page Application)站点,或是供对 Android 感兴趣的读者了解 Android 的语法和基本的框架机制。该模板先分享于此 —— AngularGo on GitHub

该模板基于目前最新的 Angular 8,且会持续跟进更新。在 Angular CLI 自动创建的范例项目的基础上,目前版本的 AngularGo 还包含以下内容:

  • Angular 8 以及相关依赖的最新版本配置
  • 一种可能的源文件结构示例
  • 一种与 Cordova 共享代码库的可能方式
  • 基础 Angular 组件及依赖注入的使用范例
  • 基础 Angular Material 控件的使用范例
  • 支持桌面和移动设备的抽屉式侧滑菜单
  • 支持 lazy loading 的 app-routing 全局路由
  • 支持 authentication guard 的模块路由
  • 支持 bearer token 验证的 Restangular 初始化及 service 用例
  • 基于 HttpClient 的用户注册与登录 API 调用
  • 基于 scss 的 Angular Material 样式(尚未采用 BEM 命名规则)
  • Azure Application Insights 集成
  • 适用于 Windows server/ Azure App Service 的 web.config 配置

AngularGo 还很初步,很多细节因水平有限和时间限制写得也比较粗糙,想必会有其他优秀的开源模板提供了更好的实现。从某种意义上来讲,该模板一方面是对自己经验得一个整理,同时期望能起到一个抛砖引玉的作用。希望对读者有帮助,也欢迎批评指教。

两分钟了解 Node.js

本文粗略介绍 Node.js 特点与用途,以及意外地很多 Windows 用户不那么容易找到的使用 npm 的方法。

  • Node.js 是高速的服务器端单线程事件驱动异步非阻塞式 JavaScript 平台
  • 占用内存少,可无缝处理客户端与服务器端数据,适用于 SPA 或 WebSocket 应用
  • 异步处理使得连接大量客户端时性能依然较好,无需等待磁盘I/O等低速操作
  • 通过npm(node package manager)管理模块依赖

访问官方站点获取详细信息 https://nodejs.org/ 。

如无特殊需求,通过 .msi 安装包安装 Node.js 后在开始菜单启动 Node.js command prompt 即可执行命令,如,输入 npm install g @angular/cli 便能安装 Angular CLI。

 

Angular 快速入门

之前做过一些 AngularJS 的小型项目,用的工具和流程却大多是过时的一套,大半精力也仍花费在后台业务逻辑。时至今日虽然晚了一些,打算跟上时代,尝试一下 Angular 的开发。

有几个关注点:

  • 以 Angular 4 入手,系统学习 Angular 框架的概念与机制
  • 完全的前后端分离
  • 使用 Angular CLI 创建模板
  • 借助 VSTS 管理项目代码与发布
  • Angular 部分完全使用 VS Code 开发

Angular 4 并不是最新版本,大版本升级的周期是每6个月,但从 Angular 2 起每个大版本都能基本兼容,Angular 4 的文档也相对丰富,故选择从这里开始。完全前后端分离可以更高效分工,带来一系列好处,如提高团队合作效率。而 Angular CLI 几乎已经成为默认的选项,这次也打算应用。至于 VSTS,最近的项目经历感觉没有最大程度发挥其价值,所以希望在也与项目中进一步探索其可能性。VS Code 虽已成为自己的常用工具,但能否完全担当起开发之职,也会是这次的一个课题。

起动步骤极为简单。

在安装 Node.js 后,通过命令行安装 Angular CLI:

CD 定位至希望的文件夹后,新建 Angular 项目:

运行新建的项目,并以 open 选项打开浏览器页面,默认端口为4200:

此时,通过 VS Code 对代码做任何修改并保存后都会立即体现在程序上。

至此,尝试 Angular 的第一步已经踏出。今后将不定期更新心得感想。

JavaScript 避免 Ajax Get 方法因缓存而返回错误数据结果的问题

代码与范例:

方法4 – 页面 meta tag

说明:Ajax 调用存在缓存,再次以相同参数调用时可能会直接调取先前结果,造成结果错误。可以用以上四种方式回避该问题。

在 Windows 下安装与配置 Karma

1. 安装 Karma 与相关插件

karma 与 karma-chrome-launcher 将被安装至当前工作目录下的 node_modules 并以 devDependencies 形式保存于 package.json。这样一来,其他开发者只需通过 npm install 来获取这些已经安装的依赖。之后,通过 -g 指定在全局安装 CLI 以实现命令行操作。

2. 创建配置文件
在项目的测试用例文件夹下执行以下命令

3. 启动 Karma

或在配置文件路径下执行

4. 终止 Karma

AngularJS 中为 input 添加字母大小写不敏感正则表达式匹配验证

代码与范例:

说明:虽然包括 JavaScript 在内的正则表达式实现支持大小写不敏感匹配(i),但 HTML5 中,input 元素的 pattern 属性并不支持该标记位。为此,要实现该功能,必须借助额外的逻辑。如需显示错误信息,可为错误信息添加 ng-show=‘!isEmailValid’ 属性。

JavaScript 中设置与读取 Cookie

代码与范例:

说明:如果要设置过期,则需要为expires赋值。否则默认为 session cookie,可能在浏览器结束后被自动清除。

JavaScript 中判断哪个链接(a 标签)被点击

代码与范例:

说明:可通过 callback 回调方法或许当前被点击的 a 标签,进一步得到诸如 href 或 title 等元素属性,就能知道用于点击了哪一个链接。此处的 a 标签也可以替换为其他包含 click 事件的元素。

 

写给程序员的 AngularJS 语法快速入门

基本示例

index.html

使用控件

index.html

todo.js

todo.css

 

未完待续

通过正则表达式过滤/去除 XML 1.0 的非法字符

说明:
XML 1.0 的合法字符如下:

Char::= #x9 | #xA | #xD | [#x20-#xD7FF] | [#xE000-#xFFFD] | [#x10000-#x10FFFF] /* any Unicode character, excluding the surrogate blocks, FFFE, And FFFF. */

例如,.NET 框架中的 SQLDataAdapter.Fill() 将自动将 XML 1.0 不支持的 Unicode 字符转换为 HTML 字符(如 #xB 等),因此,在这类场景中,应当首先过滤非法字符,否则 XSL 等可能会无法正确处理由 XmlDocument.LoadXml() 得到的 XML。
另,改用 XML 1.1 也是一种解决方案,XML 1.1 的非法字符仅有 NUL (x00)、xFFFE 与 xFFFF 这三个。

用于匹配 XML 1.0 非法字符的正则表达式模式如下:

VB.NET 代码示例: