(Based on Angular V8.x ~ 11.x)

1. Angular-CLI
   Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

It is the MUST have tool to write Angular code, so make sure you are familiar with its commands.

1. IDE
2. 1 Visual Studio Code
   Visual Studio Code: Best and free IDE for web developing.
   Plugins:

Angular Language Service - This extension provides a rich editing experience for Angular templates, both inline and external templates.
This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
Prettier - VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Code Spell Checker - A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
GitLens - If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
1.2 Alternatives
Atom by GitHub
Sublime Text 3
PyCharm
IntelliJ IDEA
Webstorm
There are may alternatives, you can choose which you are familiar with.
*

2. UI Framework
3. 1 Angular Material
   Angular Material is Material Design components for Angular.
   There are many alternatives. But Angular Material is the official one from Angular, and Angular also give detail upgrade solution on Angular plus Angular Material in https://update.angular.io/.

For future upgrade reason, this is your best choice.

3. State Management - NgRx
   @ngrx/store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

NgRx Store is mainly for managing global state across an entire application.

4. Code Reuse
5. 1 Angular libraries
   Angular libraries should what you need.

Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains that can be adapted for re-use in different apps. Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages.

An Angular library is an Angular project that differs from an app in that it cannot run on its own. A library must be imported and used in an app.

You can easily reuse your Angular library or also submit your library into npm server.

4.2 Alternatives - Angular custom elements
Note that libraries are intended to be used by Angular apps. To add Angular functionality to non-Angular web apps, you can use Angular custom elements.

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

• 1. 基本概念

1. 基本概念

1. Kubernetes 是为生产环境而设计的容器调度管理系统，对于负载均衡、服务发现、高可用、滚动升级、自动伸缩等容器云平台的功能要求有原生支持。
2. 由于 Kubernetes 在 K 和 s 间有 8 个字母，因此常简称 K8s。
3. K8s 系统最核心的两个设计理念：一个是容错性，一个是易扩展性。

—————- END —————-

======================

Angular入门到精通系列教程（2） - 基本概念

• 1. Angular （Angular2）v.s. AngularJS
• 2. 检查本地环境的版本
• 3. TypeScript
• 4. Angular CLI
• 5. Angular 的版本
• 6. Angular 版本如何升级
• 7. 依赖注入（dependency injection）
• 8. 编译-AOT和JIT的区别

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. Angular （Angular2）v.s. AngularJS

Angular最早期的版本，也叫AnugularJS，使用javascript开发；新的版本，才叫Angular，也称为Angular2，使用typescript开发，Angular和AngularJS是不兼容的（当然，官方也有2个版本的集成方案）。

2. 检查本地环境的版本

检查npm, node 版本:

• npm 版本：npm -v
• node版本： node -v
• angular、angular CLI全局、本地版本 ng --version

3. TypeScript

Angular要求开发语言必须为TypeScript。TypeScript有很多好处，比如引入了类、接口的概念，比如强类型，可以在写代码时（编译时）就能检查到一些错误，避免只有代码在执行时才发现异常。

如果没用过TypeScript，不要害怕TypeScript这个新的概念，只要你有javascript经验，直接入手，没有任何难度。只需要用到class、interface等东西时，参考一下别人如何使用，或者查一下typescript文档即可。

4. Angular CLI

angular-cli又称 Angular脚手架，是angular开发团队自行维护的一个开发工具，用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等， 并且可以通过参数，按照自己的需求去创建。可以说是angular开发必不可少的利器。
参考：https://cli.angular.io/

ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升级angular自身，以及依赖
ng version： 显示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方库。会做2件事，1）基于npm安装node_modules, 2）自动更改配置文件，保证新的依赖正常工作

总结一下，Angular的开放，离不开AngularCLI。

5. Angular 的版本

不同于Angular2+Angular的不兼容， Angular 2.0 之后会保证向下兼容。官方的版本发布计划是：

• 每 6 个月发布一个主版本（第一位版本号，主版本）
• 每个主版本发布 1 ~ 3 个小版本（第二位版本号，Feature 版本号）
• 每周发布一个补丁版本（第三位版本号，Hotfix 版本号）

6. Angular 版本如何升级

Angular CLI提供了升级命令(ng update)，同时，官网（https://update.angular.io/）也有升级指南。选择从哪个版本升级到哪个版本后，会给出一步一步的升级命令，直接执行就好。

7. 依赖注入（dependency injection）

依赖注入是Angular实现的一种应用程序设计模式， 是Angular的核心概念之一。

依赖就是具有一系列功能的服务(service)， 应用程序中的各种组件和指令（derictives）可能需要服务的功能。 Angular提供了一种平滑的机制，通过它我们可以将这些依赖项注入我们的组件和指令中。因此，我们只是在构建依赖关系，这些依赖关系可以在应用程序的所有组件之间注入。

使用依赖注入还有以下好处，

1. 不需要实例化，（new 实例）。不需要关心class的构造函数里需要什么参数
2. 一次注入（app module通过Providers注入），所有组件都可以使用。而且是用同一个service实例（Singleton），也就是说一个service里的数据是共分享的，可以用于组件间数据传递。

8. 编译-AOT和JIT的区别

每个Angular应用程序都包含浏览器无法理解的组件和模板。 因此，在浏览器内部运行之前，需要先编译所有Angular应用程序。

Angular提供两种编译类型：

1. JIT(Just-in-Time) compilation
2. AOT(Ahead-of-Time) compilation

区别在于，在JIT编译中，应用程序在运行时在浏览器内部进行编译；而在AOT编译中，应用程序在构建期间进行编译。
显而易见，AOT编译好处多多，因而是Angular的默认编译方式。主要优点

由于应用程序是在浏览器内部运行之前进行编译的，因此浏览器会加载可执行代码并立即呈现应用程序，从而加快了呈现速度。

在AOT编译中，编译器将与应用程序一起发送外部HTML和CSS文件，从而消除了对那些源文件的单独AJAX请求，从而减少了ajax请求。

开发人员可以在构建阶段检测并处理错误，这有助于最大程度地减少错误。
AOT编译器将HTML和模板添加到JS文件中，然后再在浏览器中运行。 因此，没有多余的HTML文件可读取，从而为应用程序提供了更好的安全性。

• 1. 概述
• 2. 框架比较
• 3. 为什么国内Angular不是很流行

1. 概述

总的来说一句话，如果你是老大，你可以选择用什么；如果你不是，那么，老大让用什么，你就用什么。

• 前端框架Angular,Vue,React三选一，没有第四种。 （当然，如果只是一两个简单的页面，纯JS、jquery足够了）。
• 国内的话，React和vue更流行一点，国外的话React和Angular更流行。
• Vue 中文资料更多一些
• Angular有些资源访问受限或者较慢（防火墙问题）

2. 框架比较

网上比较的文章太多了，如果想了解，baidu、google一下吧，这个就不再多说了。

3. 为什么国内Angular不是很流行

只说些个人看法，更多原因请自行搜索。

1. Angular有些资源访问受限或者较慢（防火墙问题）
2. 上手难度稍大，或者说需要更多的时间培训才能开发。
3. Angular对anuglarJS（1.0版本）不支持（虽然后期推出了兼容方案）， 伤了很多人的心。不过这个难免，一个组件、框架的升级，如果一直背负的早期债务，很难有更好的提升。
4. TypeScript。Angular是第一个吃螃蟹的，完全抛弃了js，转入Typscript，得罪的很多js的铁杆粉丝，以及惧怕ts的人。不过现在看来，typescript才是前端的趋势。vue3也声称用typescript重写了，并打算更完美的支持typescript。
5. 大而全的框架。选择Angular的话，它自带了很多东西，路由、表单、动画、http请求等等，需要更多的时间去学习和理解。而其他框架，很多组件都是有备选方案，或者第三方提供的（如vue使用axios处理http请求），让人觉得了解框架更简单。
6. 版本升级较快。每半年一个主版本，优缺点共存吧。
7. 恶性循环：用的人少 》 聊的人少 》 资源少 》 用的人更少。
8. vue更符合国人的习惯，考虑了一些小的常用细节。比如自带支持避免一个按钮点击多次（修饰符once，@click.prevent.once）。

• 1. 需求
• 2. 方案
• 3. 总结

  1. 需求

  一个angular web站点，通过一个iframe嵌套在另一个web站点中。点击一个按钮，希望能够在一个新的页面（Tab）中打开另外一个页面。

2. 方案

主要困难在于处理2个站点的地址不同的问题。既可以通过 html 设置href实现，又可以直接使用js代码实现。

Code:

1
2
3
4

<a [href]="url" target="_blank">1. open New Tab - based on a.href </a>

<button (click)="openNewTab()" >2. open New Tab -  by pure js/ts</button>

1
2
3
4
5
6
7
8
9
10

// 1. open New Tab - based on a.href
url = "";
ngOnInit() {
this.url = window.location.origin + "/help.html";
}

// 2. open New Tab -  by pure js/ts
openNewTab() {
window.open(window.location.origin + "/help.html", "_blank");
}

3. 总结

主要困难在于处理2个站点的地址不同的问题（window.location.origin），和是否嵌套在其他站点（iframe）没有关系。

Error on renaming database in SQL Server, when rename the database:

1

ALTER DATABASE MY_DB MODIFY NAME = [MY_DB_bak]

But it shows an error when executing:

1

The database could not be exclusively locked to perform the operation.

The solution is setting the database to single user mode.

1
2
3
4

use master
ALTER DATABASE MY_DB SET SINGLE_USER WITH ROLLBACK IMMEDIATE
ALTER DATABASE MY_DB MODIFY NAME = [MY_DB_bak]
ALTER DATABASE MY_DB_bak SET MULTI_USER

Why Hexo

I’m a fan of Node.js, and github, and I want to choose a tool written in node.js to help me write blogs.
And it is Hexo! It is a fast, simple & powerful blog framework, powered by Node.js.

Features of Hexo

• Blazing fast generating
• Support for GitHub Flavored Markdown and most Octopress plugins
• One-command deploy to GitHub Pages, Heroku, etc.
• Powerful plugin system

Several Node.js Static Site Generators

I like Node.js, so I give you several choose beside the Hexo!

Metalsmith

Metalsmith immediately caught my attention not only thanks to its beautiful and minimal design, but also because of the following tagline: An extremely simple, pluggable static site generator. The first blurb goes on to explain that all of the logic in Metalsmith is handled by plugins. You simply chain them together. This makes Metalsmith the most versatile of all the systems presented here.

Wintersmith

Wintersmith claims to be a flexible, minimalistic, multi-platform static site generator built on top of Node.js. Certainly, minimalistic is the key word! Wintersmith isn’t suited for beginners, but it’s perfectly fine for intermediate or advanced developers looking to get up and running with little fuss. Wintersmith’s approach isn’t the only thing that’s minimal. It was coded in CoffeeScript and ships with Jade and Markdown ready to go.

Assemble

Assemble is a powerful tool that integrates Grunt and Yeoman into its workflow. Like Punch and DocPad discussed later in this article, Assemble tries to get designers and developers on the same page. For example, Assemble comes pre-packaged with Handlebars, one of the most widely used and beginner-friendly templating systems available.