angular学习（一）

第一天学习angular，首先看了基本的搭建过程和基本概念。

环境搭建：

首先安装nodejs和npm，然后安装angularcli，要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令：

npm install -g @angular/cli

创建工作空间和初始应用：

运行 CLI 命令 ng new 并提供 my-app 名称作为参数，如下所示：

ng new my-app

运行应用：

1. 导航到 workspace 文件夹，比如 my-app。

2. 运行下列命令：cd my-app ng serve --open

3. 如果你的安装和环境搭建成功了，就会看到如下页面：
4. 

   NgModule 简介：

         Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块。

         NgModule元数据：

NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。

最后，学习了一下angular三种括号各自的用法：

方括号[ ]

属性名加上方括号后，右侧赋值为表达式的值

如果属性没有方括号，右侧赋值为字符串

1.  
   <div class="red">red</div> //这里类名为red
2.  
   <div [class]="red">red</div> //这里类名为blue,就是说有方括号右侧为表达式
3.  
    
4.  
   //组件中
5.  
   red: string = "blue";

圆括号( )

圆括号用于事件绑定，就是触发元素上的事件，绑定的方法就会响应，如

<div (click)="go()">gogo</div>   //圆括号里面放事件
 
//组件类
go() {
 //表达式...

花括号{{   }}

使用花括号{{表达式}}这种方法称之为插值，可以放在模板中，注意里面的表达式不能用于赋值、运算等操作，用于显示一些值还是可以的。

<div>{{good}}</div> //<div>你好</div>
 
 
 
//组件类
 
good: string = "你好";

最后说一下字符串变量`${ }`，这个的用法，比如说用于赋值，注意加上` `反引号

 
goo: string = "你好";
 
good: string = `亲爱的${goo}`; //等于good: string = "亲爱的你好";