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 = "亲爱的你好";
原文地址:https://www.cnblogs.com/jingyukeng/p/13434434.html