angular4.0学习

1. 安装angular CLI

npm install -g @angular/cli

2. 创建一个新项目

ng new project_name

创建好后我们看到项目的结构

src下面有个app目录，各个文件的功能分别为：
app.component.html 模板文件
app.component.scss 样式文件
app.component.spec.ts 单元测试文件
app.component.ts typescript脚本文件
app.module.ts 数据模型定义文件
3. 指定端口运行项目

ng serve --port 8888

4. 安装bootstrap

npm i bootstrap -S

安装好以后，node_modules里面就会有bootstrap包

在angular.json配置文件styles中引入bootstrap，并且在app.component.html中写几个bootstrap的button，查看效果：

5. idea报错处理：is not declared in any Angular module
   

6. 创建一个组件步骤：
   6.1 在app目录下新建一个server目录
   6.2 创建一个server.component.ts组件文件，从@angular/core中引入Component装饰器，建立一个普通类并用@Component装饰他，在@Component中，设置selector自定义标签，以及template模板

import {Component} from '@angular/core';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html'
})
export class ServerComponent {
}

6.3 创建一个server.component.html页面文件

7. 使用组件
   7.1 在app.module.ts中声明创建的组件
   
   7.2 在app.component.html中调用创建的组件
   
   查看效果
   

8. 通过命令创建组件：ng g c servers,会自动在app下面创建一个servers组件目录并生成相应的文件，并且会在数据模型定义文件app.module.ts中自动声明刚创建的组件
   

9. 属性引用，在组件文件中新建一个图片url：
   
   在页面中引用imgsrc变量：
   
   查看效果：
   

10. 事件绑定，通过(click)或者on-click来进行事件绑定：
    
    

11. 双向绑定,通过[(ngModel)]进行双向绑定，同时需要在app.module.ts中导入FormsModule：
    
    
    
    

12. 指令(Directives)
    有三种指令，分为为组件，结构和属性(1)使用模板的组件指令(2)结构指令通过添加和移除DOM元素来改变DOM布局(3)属性指令更改元素组件或其他指令的外观或行为