初识Angular前端框架

这里所说的Angular是指angular2.0以后的版本，和angularjs不同。以后我说的Angular都是指angular2.0以后的版本。截至现在Angular的版本为5.2.1。
Angular是google公司开源的一款前端框架，github地址为：https://angular.io/。是目前非常流行的前端框架之一，其它两个框架是react和vue。这里就不比较了，用一颗敬畏之心去学习并使用就好，Angular是我最喜欢的，也许先入为主吧，各有所好。Angular官网首页介绍的Angular的功能和特点，这里就不多说了，直接开始写第一个Angular网页应用。

Angular事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的, Angular本身也是TS开发的。TS 有很多好处——静态类型检查在大规模的应用中非常有用，同时对于 Java 和 C# 背景的开发者也是非常提升开发效率的。在不用 TS 的情况下使用 Angular 会很有挑战性。

---

• 全局安装angular-cli
  Angular CLI是一个命令行界面工具，可以创建项目，添加文件以及执行各种正在进行的开发任务，如测试，捆绑和部署，省去了你对项目繁琐的配置。包管理推荐用yarn，可以去官网查阅和学习，这里就不多说了。在使用的过程中也会有很多友好的提示，要注意查看和学习。

npm使用以下命令安装

npm install -g @angular/cli

yarn使用以下命令安装

yarn global add @angular/cli

-g 和 global是指全局安装的意思，安装过程中node-sass有可能会失败，多试几次。安装后用ng -v命令看看是否安装成功了。

• 用angular-cli建一个Angular项目
  打开Windows PowerShell，把路径切换为自己的工作空间，用ng命令创建一个Angular项目

ng set --global packageManager=yarn // 这是把ng的包管理设置为yarn
ng new my-app // 新建一个项目，并且安装项目依赖包，过程比较漫长
ng new my-app --skip-install // 新建一个项目，跳过安装依赖包的步骤，简写：ng new my-app -si，
// 没有安装依赖包的，需要用yarn install或者npm install安装依赖包

• 启动这个Angular项目
  在PowerShell中把路径切换到项目目录cd my-app,用ng serve --open命令来启动项目，使用--open（或者只是-o）选项会自动打开浏览器，项目默认启动在4200端口http://localhost:4200。
  
  

• 编辑你的第一个Angular组件
  

  用vscode打开项目，找到/src/app/app.component.ts文件，修改一下title并保存，看看浏览器中Logo上面标题有什么变化。
  
  再给title加点样式，找到src/app/app.component.css文件，加上以下样式并保存，看看浏览器中Logo上面的标题样式变化。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

这样，第一个Angular项目就算好了，但是距离实际开发还远远不够，继续努力学习吧，相信Angular会带给你更多惊喜。