Angular入门到精通系列教程（7）- 组件（@Component）基本知识
1. 概述
2. 创建Component
2.1. 组件模板
3. 视图封装模式
3.1. 特殊的选择器 :host
3.2. inline-styles
4. 总结
环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
1. 概述
组件是 Angular 应用的主要构造块。每个组件包括如下部分：
一个 HTML 模板，用于声明 ...
Angular入门到精通系列教程（2） - Angular基本概念
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） ...
「译」Blazor VS React / Angular / Vue.js
原文作者: Christian Findlay
原文链接： https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js/
Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最 ...
ABP+Angular框架搭建踩坑记
最近用angular和.net core 搭建一个前后端分离的BS框架，准备使用ABP模板实现。
1、首先在ABP的官网https://aspnetboilerplate.com/Templates去创建一个框架代码，如下
因为准备前端代码也在VS2019里面写，所以此处勾上了One solution ...即前后端都放在一个解决方案里面。
2、创建后解压下载下来的安 ...
angular-gridster2使用
1、安装：npm install angular-gridster2 --save
2、引入
3、html代码
<div id="fullscreen" style="position:relative;padding-top:20px;background: #fff;" >
<em class="fa fa-compress hand " style="position: absolute;right: 0px;top: 0px; font-size: 30px;" (click)="zoomItem()" (touchstart)="zoomItem()" ...
Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）
前言：
上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用 ...
Angular 的安装和使用
本文内容概要：
angular简单介绍
安装angular的依赖环境
angular的简单应用（创建项目+组件+module+service+class）
组件中主要文件的介绍
介绍
Angular是一套用于构建用户界面的JavaScript框架。有Google开发和维护，主要用来开发单页面应用程序。类似于vue.js。
特性
MVVM（数据驱动视图思想）
组件化
模块化 ...
Angular实战之使用NG-ZORRO创建一个企业级中后台框架（入门篇）
前言：
在之前的一篇文章已经介绍过了，公司正在使用NG-ZORRO组件库开发后台应用，并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。
NG-ZORRO介绍：
官网地址：https://ng.ant.design/docs/introduce/zh
ng-zo ...
Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目
前言：
最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。
Angular学习前必备基础知识点：
TypeScript基本常识：
https://www.tslang ...
.NET Core +Angular 项目 部署到CentOS
前言：
最近公司需要开发项目能在Linux系统上运行，示例开发项目采用.Net Core + Angular开发；理论上完全支持跨平台。
但是实践才是检验真理的唯一标准；那么还是动手来验证实现下；过程中万一出现什么问题也算是积累经验。
一、环境准备
由于本次主要验证项目部署Linux环境，也不想去重新搭建一个虚拟机环境；就使 ...
angular插件
1- Material
步骤 1：安装 Angular Material、Angular CDK 和 Angular 动画库
你可以使用 npm 或 yarn 命令行工具来安装这些包。请从下面的例子中任选一个适合你项目需求的。
NPM 命令
npm install --save @angular/material @angular/cdk @angular/animations
步骤 2：配置动画
安装完动画包之后，请在应用中导入 Browser ...
ts安装和写法 angular安装及使用
1、全局安装
npm install -g typescript
2、将ts编译成js
tsc 文件名.ts //找到文件目录
注：可能这里会报错 参考下图
ts包容性不错 如果str没加string编译报错，但是可以正确转换成js
function abc(person:string){
return 'hello '+person
}
let str:string = '123'
console.log(abc(str))
转 ...
Angular(4)路由
1. 最基本的路由
1.1 API：
Router
ActivatedRoute
路由的基本使用
名称
简介
Routes
路由的配置，保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示
RouterOutler
在HTML中标记路由内容呈现的占位符指令
Router
运行时执行的路由对象，可以通过navigate()和navigateByUrl()方法来导航到指定路由
...
angular入门
本文系参考B站大地老师angular教学视频总结：
第一讲⦁ angular前提准备：⦁ typescript入门教程：https://www.itying.com/goods-905.html⦁ angular环境搭建：⦁ node.js⦁ 若需要的话，安装淘宝镜像⦁ Angular脚手架安装（只需安装一次）：npm install -g @angular/cli (终端输入：ngv；检验angular脚手架是否安装成功)⦁ ...
手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。官方网站：devui.designNg组件库：ng-devui（欢迎Star）
引言
“他在正午、黄昏，在一天里的许多时刻去感受它、记录它，结果也就让我们看到了那么多的不同。他描绘它的角度没 ...
Angular(2)
1. TemplateRef
就是 Template 的类型
https://segmentfault.com/a/1190000008672478
<h1>hello world</h1>
<div class="box" #box>box</div>
<ng-template #tpl>
<span>hello</span>
</ng-template>
import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@ang ...
Angular(1)
一、补充
1. 引入第三方库(bootstrap为例)
a. MDN 引入
在index.html中直接引入mdn
<link rel="stylesheet" href="..." integrity="..." crossorigin="anonymous">
<script src="..." integrity="..." crossorigin="anonymous"></script>
<script src="..." integrity="..." crossorigin="anonymous"></script>
<script ...
Angular的工作原理
来源：https://www.cnblogs.com/moriah/p/6096998.html
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
<png-init=" name='World' ">Hello {{name}}!</p>
</body>
</html>
当你用浏览器去访问index.html的时候，浏览器依次做了如下一些 ...
Angular数据双向绑定
来源：https://www.cnblogs.com/jingwhale/p/5117419.html
Angular数据双向绑定
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
一.什 ...
angular 原理图（Schematic）的学习笔记
介绍
Schematics 是什么?
Schematics 是现代前端开发工作流的工具；它可以将变化应用到你的项目中。比如创建一个组件、添加配置项、将框架添加到现有项目，或者更新你的代码来修复更新依赖时带来的 break change。
Schematics — AnIntroduction
有道云链接
起步
首先需要安装全局依赖
$ npm i @angular-devkit/schematic ...
