diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
new file mode 100644
index 0000000..3442361
--- /dev/null
+++ b/.idea/compiler.xml
@@ -0,0 +1,13 @@
+
+
-第一,模块
-- 不同于Node.js或ES6中的模块的模块,NG的模块就是一个抽象的容器,用于对组件进行分组
-整个应用初始时只有一个主模块:AppModule
-
-第二,组件
-- 是一段可以反复使用的页面片段,如页头、轮播、手风琴
-- 组件(Component)=模板(Template)+脚本(Script)+样式(Style)
-
-第三,数据绑定
-- HTML绑定:{{ NG表达式 }}
-- 属性绑定
-- 指令绑定
-- 事件绑定
-- 双向数据绑定
-
-第四,过滤器
- - Filter:过滤器,用于在View中呈现数据时显示为另一种格式;过滤器的本质是一个函数,接收原始数据转换为新的格式进行:`function(oldVal){ ... return newVal}`
- - 使用过滤器:{{e.salay | 过滤器名(也称为管道)}}
-
-# 目录
-* 1. [创建一个自定义组件](#)
- * 1.1. [创建组件Class ,自定义一个文件如`book.component.ts`](#Classbook.component.ts)
- * 1.2. [在某个模块中注册组件class,模块文件如:`book.module.ts`中](#classbook.module.ts)
- * 1.3. [使用已经注册过的组件,如:在`book.component.html`中使用`
](#book.component.htmlapp-book...XX..app-bookbr)
- * 1.4. [$\color{red}{Angular CLI 提供快速创建组件的工具}$
](#colorredAngularCLIbr)
-* 2. [数据绑定](#-1)
- * 2.1. [简单的绑定](#-1)
- * 2.1.1. [初始化内容](#-1)
- * 2.1.2. [$\color{red}{HTML绑定}$
](#colorredHTMLbr)
- * 2.1.3. [$\color{red}{属性绑定}$
](#colorredbr)
- * 2.1.4. [$\color{red}{事件绑定}$
](#colorredbr-1)
- * 2.2. [Angular中的指令系统](#Angular)
- * 2.2.1. [Angular中的指令分为三类:](#Angular:)
- * 2.2.2. [循环绑定:*ngForof
](#ngForofbr)
- * 2.2.3. [选择绑定:*ngIf
](#ngIfbr)
- * 2.2.4. [样式绑定:[ngStyle]
](#ngStylebr)
- * 2.2.5. [样式绑定:[ngClass]
](#ngClassbr)
- * 2.2.6. [了解:特殊选择绑定:[ngSwitch]
](#:ngSwitchbr)
- * 2.2.7. [$\color{red}{双向数据绑定指令:[(ngModule)] — 重点}$
](#colorredngModulebr)
- * 2.2.8. [扩展知识:如何自定义指令
](#br)
-* 3. [自定义管道(过滤器)](#-1)
- * 3.1. [练习:
](#br-1)
- * 3.1.1. [实现添加、删除事件](#-1)
- * 3.1.2. [创建员工列表数组
](#br-1)
- * 3.2. [创建对象的两种方式
](#br-1)
-
-# 内容
-## 1. 创建一个自定义组件
-### 1.1. 创建组件Class ,自定义一个文件如`book.component.ts`
-```typescript
- //装饰器声明这是一个组件
- @Component({
- selector:'app-book', //被调用时名称
- template:'
这是一个属性
`这是一个属性
`
-#### 2.1.4. $\color{red}{事件绑定}$
-```typescript
- //在html文件中添加button按钮实现事件
-
- //在component.ts文件class中添加事件函数
- export class bookComponent{
- //class内部成员属性
- uname = 'Zhang';
- age = 22;
-
- //class内部成员方法,不需要返回类型
- printUname(){
- console.log(this.uname)
- }
- }
-```
-### 2.2. Angular中的指令系统
-#### 2.2.1. Angular中的指令分为三类:
-- 组件指令:NG中Component继承自Directive
-- 结构型指令:会影响DOM树结构,必须使用 * 开头,如*ngFOr、*ngIf
-- 属性型指令:不会影响DOM树结构,只会影响元素外观或行为,必须用 [] 括起来,如[ngClass]、[ngStyle]
-#### 2.2.2. 循环绑定:*ngForof
- `
当前用户名:{{uname}}
- - //.component.ts文件中添加函数 - unameChange(){//实时监听uname是否改变 - console.log(this.uname); - } -``` -#### 2.2.8. 扩展知识:如何自定义指令...
-``` -## 3. 自定义管道(过滤器) -- 创建管道class,实现转换功能 -- 在模块中注册管道 -- 在模板视图中使用管道 -- 可以使用CLI命令行`ng g pipe 管道名`
-{{e.sex | sex }}
- -``` -### 3.1. 练习:This is no accidence
- - -| - no employee!! - | -- - | -||||
| {{e.eid}} | -{{e.ename}} | -{{e.sex}} | -{{e.sex| sex : 'en'}} | -{{e.salay}} | -- - | -
module-a works!
`, - styles: [], -}) -export class moduleAComponent implements OnInit { - constructor(private service: moduleAService) {} - - ngOnInit(): void { - this.service.sample().subscribe(console.log); - } -} diff --git a/angular/projects/moduleA/projects/module-a/src/lib/module-a-routing.module.ts b/angular/projects/moduleA/projects/module-a/src/lib/module-a-routing.module.ts deleted file mode 100644 index 4f13b50..0000000 --- a/angular/projects/moduleA/projects/module-a/src/lib/module-a-routing.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core'; -import { DynamicLayoutComponent } from '@abp/ng.core'; -import { Routes, RouterModule } from '@angular/router'; -import { moduleAComponent } from './components/module-a.component'; - -const routes: Routes = [ - { - path: '', - pathMatch: 'full', - component: DynamicLayoutComponent, - children: [ - { - path: '', - component: moduleAComponent, - }, - ], - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class moduleARoutingModule {} diff --git a/angular/projects/moduleA/projects/module-a/src/lib/module-a.component.spec.ts b/angular/projects/moduleA/projects/module-a/src/lib/module-a.component.spec.ts deleted file mode 100644 index 930b5a6..0000000 --- a/angular/projects/moduleA/projects/module-a/src/lib/module-a.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; - -import { moduleAComponent } from './module-a.component'; - -describe('moduleAComponent', () => { - let component: moduleAComponent; - let fixture: ComponentFixture{{ '::LongWelcomeMessage' | abpLocalization }}
- - {{ 'AbpAccount::Login' | abpLocalization }} -Here are some links to help you get started:
-- - - - -
-A Complete Web Application Platform Built on the ABP Framework
-- ABP Commercial is a platform based - on the open source ABP framework. It provides pre-built application modules, rapid - application development tooling, professional UI themes, premium support and more. -
- -- Abp Framework - Abp Commercial - abpframework -
-