Angular CLI is here for AngularJS 2

原文链接地址:  点击打开链接 http://www.talkingdotnet.com/angular-cli-for-angularjs-2/?utm_source=tuicool&utm_medium=referral

初次翻译,有许多不对的地方还请斧正。共同进步。谢谢大家。

Angular CLI is here for AngularJS 2_第1张图片
相比AngularJS1 来说,在你的应用中建立AngularJS2是相当容易。为了建立AngularJS1.X,你要做的仅仅是增加一个引用,但是对Angular2,这需要很多工作,因为它依赖Grunt 和Gulp才能构建,使用TypeScript和它的编译器。并且设置这些在Visual Studio2015是很费时间的,Angular团队意识到这个问题并且提出了一个解决方案,Angular2 新的命令行工具,Angular CLI is here for AngularJS 2 applications.
CLI(命令行工具)变得非常有用且简单,允许用户做所有的操作。Node.JS,浏览器,ruby on rails 和其他已经存在的都可以使用,早期的ASP .NET团队使用的donet cil去构建ASP.NET 应用,Angular2为什么就不可以呢?这是一个经过深思而且明亮的观点,在写这篇文章的时候,Angular CLI处于beta阶段。
Angular CLi的功能
Angular CLi是非常强大的,并且带来了很多功能,你可以创建一个Angular2 的应用,构建,编译,测试以及单元测试,并且可运行于你的浏览器中,并且是实时的装载,部署在你的产品中。喔!!!从开始到结束,事实上,你也可以生成一个新的组建,路由,服务和 通道为你的应用程序。
如何安装和使用AngularCLI呢?
为了使用AngularCLI, 你需要有安装一个Node4 或者更高级别的版本在你的系统中。 首先让我们安装AngularCLI在你的系统,在全局中跟随如下命令去执行npm.
npm install angular-cli -g
这个需要一些时间从安装直到结束,安装完后,让我们创建一个新的工程,但是在创建新的应用之前,让我们先用如下命令去修复npm权限依赖的错误; npm cache clean
创建一个新的应用的语法是:ng new application-name (application-name是你的应用名称)
让我们使用命令先创建一个简单的应用; ng new AngularCLIDemoApp

一旦你运行了这个命令,你的屏幕会出现node.js的下载包和安装进度。
Angular CLI is here for AngularJS 2_第2张图片
此时你在看文件夹,你可以看到如下结构,“src”文件夹会有你的typescript文件和其他组建。
Angular CLI is here for AngularJS 2_第3张图片
现在不用做任何事,就可以运行这个程序,选择你的目录用如下命令去运行;
ng server
你会得到一个URL在命令行栏,打开这个URL在你的浏览器,你就可以看见AngularJS2应用已经运行在浏览器里啦,是不是很酷呢。。。你也可以使用其他的命令;
比如说构建一个应用的命令:ng build
运行一个测试用例:ng test
正如早期提到的一样,你也可以通过AngularCLI创建一个新的class,components,directives,services和pipes在你的应用中。 你应该使用的命令是 ng generate 或者ng g 命令。


你也可以创建一个route通过AngularCLI。
ng g route demo
这个命令会创建一个名叫test的文件夹,还有test component,依赖的样式和html文件。但是如果你不希望分开样式和html文件,也可以使用内置的html样板和样式,命令如下:
ng g route demo --inline-template --inline-style
下图显示了连个不同命令的差异。
Angular CLI is here for AngularJS 2_第4张图片

以下代码是一个新生成的组建。
Angular CLI is here for AngularJS 2_第5张图片
注意:这个html模版和样式是class组建的一个子元素。你也可以使用命令装饰和格式化代码:
ng lint
ng format

总结:
在写这个的时候,AngularCLi还处于beta阶段,因此你可能会遭遇一些错误当你在使用它工作的时候,但是这是一个好的工具去构建配置和启动AngularJS2应用,这个CLI工具能干所有的事从创建应用到部署应用。
最后,谢谢你们的阅读,希望它能帮到你,请保持关注这个博客,并且分享到你的网络。请把你的想法和意见反馈到评论部分。

你可能感兴趣的:(web前端框架)