[译]为Angular 2开发设置环境
By robot-v1.0
本文链接 https://www.kyfws.com/applications/setting-up-environment-for-angular-development-zh/
版权声明 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
- 8 分钟阅读 - 3660 个词 阅读量 0[译]为Angular 2开发设置环境
原文地址:https://www.codeproject.com/Articles/1197941/Setting-up-Environment-for-Angular-Development
原文作者:Snesh Prajapati
译文由本站 robot-v1.0 翻译
前言
In this article we will learn how to setup development environment for Angular 2 using Visual Studio Code and Windows OS. 在本文中,我们将学习如何使用Visual Studio Code和Windows OS为Angular 2设置开发环境.
- 源代码-4 kb(Source Code - 4 kb) **注意:(Note:)**在附加的代码中,node_modules文件夹的所有内容都被删除,因此将无法按原样运行.请按照文章中给出的说明运行它.(In attached code, all content of node_modules folder is deleted so it will not run as it is. Please follow the instructions given in article to run it.)
介绍(Introduction)
最近,我正在使用Visual Studio Code学习Angular 2.这是我第一次使用Visual Studio Code和Angular2.VisualStudio Code是轻量级的,但是如果与旧的好Visual Studio进行比较,我们必须自己做很多事情.在本文中,我们将分享我为设置开发环境所做的一系列步骤.(Recently I was learning Angular 2 using Visual Studio Code. This was my first experience with Visual Studio Code and Angular 2. Visual Studio Code is lightweight but we have to do many thing ourselves if we compare with old good Visual Studio. In this article we will share the set of steps I did in order to setting up development environment.)## 基本安装(Basic Installations)
- 安装Node.js:(Install Node.js :) 让我们开始(Lets start with) Node.js(Node.js) 它将用作JavaScript运行时.它还用于使用npm工具(节点模块的软件包管理器)管理JavaScript软件包.(which will serve as JavaScript runtime. It is also used for managing JavaScript packages using the npm tool (a package manager for node modules).) 可以从以下位置安装Node.js(Node.js can be installed from) 这里(here) 有关Node.js的更多信息,请参见此处的各种链接.(For more on Node.js various links are given at this) stackoverflow讨论(stackoverflow discussion) .您可能还会想到一个问题:是否有必要使用Node.js或使用我们可以运行TypeScript编译器来编译.ts文件以获得.js文件的其他替代方法?这是在回答(. One question also may come in your mind: Is it necessary to use Node.js or any other alternate is also available by using that we can run TypeScript compiler to compile .ts files to get .js files? This is answered at) 这里.(here.)
- 安装TypeScript:(Install TypeScript :) 在Angular 2中,我们以TypeScript语言编写代码. TypeScript代码需要编译为JavaScript.为此,我们需要安装TypeScript编译器,它将在JavaScript代码中转换TypeScript代码.可以使用以下命令提示符中的npm命令来安装TypeScript.(In Angular 2, we write code in TypeScript language. The TypeScript code needs to be compiled into JavaScript. For that we need to install TypeScript compiler which will convert TypeScript code in javascript code. TypeScript can be installed using following npm command in Command Prompt.)在这里,-g表示需要全局安装TypeScript,以便可以在计算机中的任何项目中使用它.(Here –g means TypeScript needs to be installed globally so it can be used in any project in your machine.)
- 安装Visual Studio Code:(Install Visual Studio Code :) 我们需要一个源代码编辑器来编写将要使用Visual Studio Code源代码编辑器的应用程序.为JavaScript应用程序编写代码非常轻巧.(We need a source code editor to write the application for that we will be using Visual Studio Code source code editor. It is very light weight to write code for JavaScript applications.) 从安装Visual Studio Code(Install Visual Studio Code from) 这个连结(this link) .欲了解更多详情,请访问(. For more detail please visit) 该网页(this web page) .(.)
创建演示应用(Creating Demo App)
-
在系统中所需的位置上创建一个名为FirstAnguar2Demo的文件夹.打开Visual Studio代码编辑器,然后单击选项"文件">“打开文件夹"按钮.浏览” FirstAnguar2Demo"文件夹.现在,VS Code编辑器窗口看起来像.(Create a folder called FirstAnguar2Demo in your desired location in the system. Open Visual Studio Code editor and click on option ‘File’ > ‘Open Folder’ Button. Browse ‘FirstAnguar2Demo’ folder. Now VS Code editor window looks like as.)
-
浏览应用程序文件夹" FirstAngular2Demo"后,VS代码编辑器将如下所示.(After browsing the application folder ‘FirstAngular2Demo’, VS code Editor will look like as.)
到目前为止,我们还没有将任何文件添加到该文件夹,因此我们开始吧.将文件添加到此文件夹,名称为package.json.(So far we did not add any file to the folder so let’s do it. Add a file to this folder name it as package.json.)
将以下代码粘贴到package.json文件中.(Paste following code in package.json file.)有关package.json文件的更多信息,请参见(More about package.json file is explained at) 这里(here) .在上面的代码中,以下是关键部分:(. In above code following are the critical parts:) **脚本:(scripts:)**是package.json脚本文件的属性.它包含脚本命令,这些命令在包的生命周期中的不同时间运行.看一下(is a property of package.json script file. It contains script commands that are run at various times in the lifecycle of your package. Have a look at) 这一页(this page) 有关更多说明.(for more description.) **依赖项:(dependencies:)**在本节中,我们指定角度应用程序所需的所有依赖关系.(in this section we specify all required dependencies for the angular application.)
- 将一个名为Systemjs.Config.js的文件添加到" FirstAnguar2Demo"文件夹中.将以下代码粘贴到Systemjs.Config.js文件中(Add a file called Systemjs.Config.js to ‘FirstAnguar2Demo’ folder. Paste the below code in Systemjs.Config.js file)有关Systemjs.Config.js的更多信息,请参阅(For more about Systemjs.Config.js have a look at) 在此链接.(at this link.)
- 将一个名为tsconfig.json的新文件添加到" FirstAnguar2Demo"文件夹中.(Add a new file called tsconfig.json to ‘FirstAnguar2Demo’ folder.)**tsconfig.json:(tsconfig.json:)**我们指定TypeScript编译器所需的设置,以将组件代码转换为当前浏览器可读的普通ECMAScript 5 JavaScript代码.(we specify settings required by the TypeScript compiler to transpile the component code into plain ECMAScript 5 JavaScript code readable by current browsers.)
- 添加一个名为Types.json的新文件.在新创建的文件中添加与以下代码相同的代码:(Add a new file called typings.json. Add the same code as written below in the newly created file:)**杰森:(typings.Json:)**它用于检查编译时错误并提供智能提示.(it’s used to check compile time errors and provides the intellisense.)
- 打开命令提示符,直到应用程序文件夹路径(对我来说是E:\ Angular2 \ FirstAnguar2Demo).运行以下命令:(Open command prompt and reach till application folder path(for me it is E:\Angular2\FirstAnguar2Demo). run following command:)
通过运行此命令,将安装packages.json文件中指定的所有必需依赖项.打开" FirstAnguar2Demo"文件夹,您将能够看到" node_modules"文件夹已创建.打开此文件夹,您将看到所有依赖项已添加.(By running this command all required dependency specified in packages.json file will be installed. Open ‘FirstAnguar2Demo’ folder, you will be able to see ‘node_modules’ folder is created. Open this folder you will see all dependencies are added.) 单击VS代码中的"刷新"选项,现在node_modules文件夹也将在VS代码中可见.(Click on Refresh option in VS code, now node_modules folder will be visible in VS code as well.)
-
在根文件夹中添加一个名为app的新文件夹.添加一个名为main.ts的文件.(Add a new folder called app in root folder. Add a file called main.ts.)到达命令提示符中的应用程序文件夹并运行以下命令.(Reach app folder in Command Prompt and run following command.)当我们运行此命令时,TypeScript编译器将编译main.ts文件,并在同一位置创建main.js文件.(When we run this command main.ts file is compiled by TypeScript compiler and creates main.js file at the same location.)
-
现在我们需要一个.html文件,该文件可以在浏览器中查看,因此让我们在根文件夹级别(E:\ Angular2 \ FirstAnguar2Demo)添加一个Index.html文件.将以下代码粘贴到此处编写的Index.html文件中.(Now we need a .html file which can be viewed in browser so let’s add a Index.html file at the root folder level (E:\Angular2\FirstAnguar2Demo). Paste the below code in Index.html file as written here.)
运行演示应用(Running Demo App)
我们将使用(We will use) 精简版服务器(lite-server) 快速运行该应用.它提供静态内容,检测更改,刷新浏览器并提供许多自定义设置.让我们使用lite-server安装和运行该应用程序:(to run the app quickly. It serves the static content, detects changes, refreshes the browser, and offers many customizations. Lets install and run the app using lite-server:)
在浏览器中,您将能够看到您的第一个angular 2应用正在运行.(In browser you will be able to see your first angular 2 app is running.)
结论(Conclusion)
在本文中,我们学习了如何使用Visual Studio代码为Angular 2应用程序开发设置环境.希望这些步骤对您学习Angular 2有所帮助.(In this article we learned how to setup environment for Angular 2 application development with Visual Studio code. Hope those steps will help while you take first step in learning Angular 2. Your comments and suggestions are most welcome.)
参考文献(References)
1 为什么我们要为Angular 2.0安装Node.js?(Why do we have install Node.js for Angular 2.0?) 2 systemjs.config.js在angular 2打包结构中做什么?(What does systemjs.config.js do in angular 2 packaging structure?)
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
HTML Typescript Javascript AngularJs Dev Architect 新闻 翻译