AngularJS JetBrains WebStorm简介
我们将通过一系列文章来介绍一些用于angularJS开发的有用的开发人员工具。
在本文中，我们将讨论IDE，JetBrains WebStorm以及如何使用WebStorm创建示例项目。
内容
- JetBrains WebStorm简介
- 在WebStorm中创建我们的第一个项目。
JetBrains WebStorm简介
您会发现许多用于angularJS开发的IDE，例如JetBrains WebStorm，Sublime Text，Atom等，使您的生活变得轻松。
我建议使用WebStorm，并通过一系列文章向您展示如何为angularJS设置开发人员工具。
您可以从此处下载WebStorm的最新试用版。
首次启动WebStorm时，将显示以下屏幕。
您可以选择所需的选项。
单击创建新项目，您将看到一个列表项目类型，您可以根据需要进行选择。
如果从列表中选择AngularJS，您将看到以下示例angularJS项目创建。
您也可以从版本控制存储库中签出到WebStorm。
如果需要，可以选择图中所示的以下选项。
在这篇文章中，我将从头开始。
因此，您可以选择空项目类型，并在位置字段中设置项目目录。
我在Projects文件夹下创建了一个名为Angular的项目目录。
单击创建按钮时，您将看到以下屏幕。
在WebStorm中创建我们的第一个项目
从这里下载AngularJS框架。
我创建了一个目录libs/Angular来附加下载的angular.min.js文件。
您可以在下图中看到它。
现在，我们将创建一个简单的应用程序。
您可以创建一个HTML文件，如下图所示。
右键单击您的项目，然后选择要创建的文件类型。
我创建了一个名为index.htmlHTML页面
键入时，您会看到JetBrains WebStorm的自动完成功能。
最后，我们将libs/Angular目录中的angular.min.js文件包含到index.html中。
<script src="libs/Angular/angular.min.js"></script>
我们在这篇文章中使用了以下HTML来介绍WebStorm进行angularJS开发。
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app=""> <p>Enter Some text : <input type="text" ng-model="someText"></p> <p>Hello <span ng-bind="someText">!</p> </div> <script src="libs/Angular/angular.min.js"></script> </body> </html>
您只需单击WebStorm左上方显示的浏览器图标之一，即可运行上述应用程序。
我们已经使用WebStorm成功创建了我们的第一个Angular应用程序。
