Angular 2 CLI 开发环境的建立与App应用开发入门

0 前言

Angular CLI是Angular命令行接口工具,它可以创建项目(Application)、组件(Component)和服务(Service)等,同时可以方便地完成应用启动,调试和打包发布等开发功能。

本教程指导读者完成Window下Angular 2 CLI环境安装,并利用CLI工具开发一个Angular 2入门应用。好,让我们开始吧!


1 开发环境建立

• 在控制面板-删除程序中试着查找Node.js, 如发现删除之。

• 删除C:\Users\username\AppData\Roaming\npm目录下全部内容。

• 到 https://nodejs.org/en/download/current/ 查找 Nodejs 最新版本下载并安装。

•  打开命令行窗口,使用下列命令(-g 参数是全局安装)安装angular-cli 

>npm install -g angular-cli

2 使用Angular CLI创建Angular 2 Web应用

• 首先,创建你的应用目录,如:c:\test,并按住shift键,用鼠标右键点击该目录打开菜单,选择Open command windowhere,打开命令行窗口。

Angular 2 CLI 开发环境的建立与App应用开发入门_第1张图片

• 使用下列命令创建应用: 

>ng new myapp

Angular 2 CLI 开发环境的建立与App应用开发入门_第2张图片

• 这样应用就建好了,我们进入应用myapp目录的命令行窗口,并运行: 

>cd myapp

>ng new myapp

Angular 2 CLI 开发环境的建立与App应用开发入门_第3张图片

• 执行应用打开浏览器,在地址栏输入http://localhost:4200/ 回车,可以看到应用界面

Angular 2 CLI 开发环境的建立与App应用开发入门_第4张图片

 3 Angular 2应用的编辑工具

Angular应用的所有程序代码和资源都放在应用文件夹里,Visual Studio Code是编辑调试的理想集成环境,它是轻量级、免费开发集成环境。https://code.visualstudio.com/download

Angular 2 CLI 开发环境的建立与App应用开发入门_第5张图片

4 结束语

AngularJS是一个由Google支持的开源JavaScript框架,用它来开发、运行Web Application迅速方便,越用越好用。这是我上的第一篇原创文章,希望对初学者有所帮助,今后我将发布更多的技术文章。

你可能感兴趣的:(Angular 2 CLI 开发环境的建立与App应用开发入门)