Angular --框架搭建
感慨
学习了Angular以来没有写过博客,一直想早点结束,发现都是bug,并且感觉收获不是很多,现在马上要进去IToo考评发现知识量不够,今天得知师父的提点:学习官网,非常有道理,第一官网是实时存在的,第二就是时时更新,第三看书肯定是比视频快而稳。
配置环境
-
Node.js :cmd环境下输入:node -v
-
npm包管理器: cmd环境下输入:npm -v
由于npm是从国外服务器下载安装所以网络问题很大, 我们可以利用淘宝团队开发的完整的npmjs.org镜像, 用cnpm替代npm,用法就是每次需要输入npm时候用cnpm替代即可,其他都一样。
-
安装cmpm:cmd环境下输入:npm install cnpm -g --registry=https://registry.npm.taobao.org
注意:检查是否安装cnpm:cmd环境下输入:cnpm-v npm同理。
搭框架
- cmd界面建立一个新的工作区(anuglar-tour-of-heroes):cmd环境下输入:ng new anuglar-tour-of-heroes
- 打开webstorm,我们在下面输入ng serve --open
此刻我们的环境已经搭好,接着我们介绍一下我们建立成功后的内容:
开始做Demo
我们做一个最简单的页面,显示内容:Angular您好!
- 我们先做一个全局样式:src-styles.css
/* Application-wide Sytle */
h1{
color:#369;
font-family:Arial, Helvetica,sans-serif;
font-size:250%;
}
h2{
color:#444;
font-family:Arial,Helvetica,sans-serif;
font-weight:lighter;
}
body{
margin:2em;
}
body,input[type="text"],button{
color:#888;
font-family:Cambria, Georgia;
}
/* everywhere else */
8{
font-family:Arial, Helvetica,sans-serif;
}
- 我们修改组件类文件:app.component.ts 中修改title
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'Angular 您好!';
}
- 最后我们在html页中只显示title:
<h1>{{title}}</h1>
扩展知识点
插值绑定语法:双花括号( {{}} ),意思是把组件的title属性绑定到HTML中的h1标记中。