Angular学习---组件创建与数据绑定

安装

• 需要node.js环境，什么是node.js?
• Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 [2]  发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。 依次运行以下命令:

node -v
npm -v
npm install -g @angular/cli

或者设置淘宝镜像:

npm install -g cnpm  --registry=https://registry.npm.taobao.org
cnpm  install -g @angular/cli

验证安装:

ng -v

创建新的项目:

ng new my-first-angular-app

进入相应的目录:

cd my-first-angular-app

启动服务:

ng serve

访问地址:

localhost:4200

改变默认的运行端口:

ng serve --port 8888

开发工具选择

• VSCode

导入整体的项目目录:

src下的目录:

在项目中创建组件

以下命令说明在项目的app目录下,创建一个components文件夹,然后在其中创建一个new组件,如下图所示:

ng g component components/news

可以手动创建然后在app.module.ts中引入,如果像上面的方式在命令行中创建,项目会自动在app.module.ts中引入并配置在项目组件中:

在news.components.html中加入:

在app.component.html中加入:

cmd中输入命令:

ng serve --open

浏览器中访问:

localhost:4200

创建home组件:

ng g conponent components/home

会自动引入并配置home组件:

然后如法炮制:

启动服务并访问:

依次创建header组件.

数据绑定

在news.component.ts中,我们定义一个title:

上面的语法恍惚件觉得像是java,其实在定义title的时候之间省略了'public',然后通过花括号在news.components.html中进行数据的绑定:

在ts文件修改之后,页面会立即进行修改.vue也是这种双向绑定机制.

组件创建与数据绑定到此结束.