Angular 4 学习系列（1）

比眉伴天荒 2022-06-08 06:56 189阅读 0赞

# Angular 4 学习系列（一） #

三月前，尝试Angular 4开发程序，使用Angular 4后，顿觉如有神助，开发速度大幅提高。开发期间，看了无数Angular 4的博客，为感谢各位分享的“同志”，“基友”，特开此博客，贡献体会，分享经验。

### 首先，推荐官方教程： ###

[https://angular.cn/translations/cn/home][https_angular.cn_translations_cn_home]

### 开发环境，Webstorm（一年1000多软妹币买的） ###

#### 开发步骤： ####

1.    
    
2.  打开Webstorm, New Project -> Angular CLI，新建Angular 4 项目，会碰到第一个坑：找不到Angular CLI。如果找不到，  
    1.1 请用npm 安装，前往：[https://nodejs.org/en/download/][https_nodejs.org_en_download]，[https://www.npmjs.com/][https_www.npmjs.com] 下载Node.js和npm Windows或者Mac安装包。

> npm的使用，请移步[http://www.runoob.com/nodejs/nodejs-npm.html][http_www.runoob.com_nodejs_nodejs-npm.html]  
> 1.2 安装Angular需要的包  
> angular是用typescript编写的，所以先安装typescript，再安装angularjs-cli  
> npm install -g typescript typings  
> npm install -g angular-cli –ignore-scripts  
> npm install

1.3 搞完之后，总算可以新建项目了。建完项目之后，怎么还是会报很多错？原来，还要到Webstorm下面的Terminal，运行命令npm install，下载并安装依赖的包，切记切记。  
1.4 怎么运行呢？点开左下角的npm（记住在左下角），然后点start, webstorm会自动编译，编译完之后，在浏览器输入localhost:4200, Angular项目总算跑了

[https_angular.cn_translations_cn_home]: https://angular.cn/translations/cn/home
[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[https_www.npmjs.com]: https://www.npmjs.com/
[http_www.runoob.com_nodejs_nodejs-npm.html]: http://www.runoob.com/nodejs/nodejs-npm.html