Angular --框架搭建

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aimin_com/article/details/88541716

感慨

学习了Angular以来没有写过博客，一直想早点结束，发现都是bug，并且感觉收获不是很多，现在马上要进去IToo考评发现知识量不够，今天得知师父的提点:学习官网，非常有道理，第一官网是实时存在的，第二就是时时更新，第三看书肯定是比视频快而稳。

配置环境

1. Node.js ：cmd环境下输入：node -v

2. npm包管理器： cmd环境下输入：npm -v

   由于npm是从国外服务器下载安装所以网络问题很大，
   我们可以利用淘宝团队开发的完整的npmjs.org镜像，
   用cnpm替代npm,用法就是每次需要输入npm时候用cnpm替代即可，其他都一样。
   

3. 安装cmpm：cmd环境下输入：npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：检查是否安装cnpm：cmd环境下输入：cnpm-v npm同理。

搭框架

1. cmd界面建立一个新的工作区(anuglar-tour-of-heroes)：cmd环境下输入：ng new anuglar-tour-of-heroes
2. 打开webstorm，我们在下面输入ng serve --open
   
   此刻我们的环境已经搭好，接着我们介绍一下我们建立成功后的内容：
   
   
   
   
   

开始做Demo

我们做一个最简单的页面，显示内容：Angular您好！

1. 我们先做一个全局样式：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;
		}

2. 我们修改组件类文件：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 您好！';
		}

3. 最后我们在html页中只显示title：

		<h1>{{title}}</h1>

扩展知识点

插值绑定语法：双花括号（ {{}} ），意思是把组件的title属性绑定到HTML中的h1标记中。