AngularJS JetBrains WebStorm简介

最新推荐文章于 2024-04-27 09:12:42 发布

cunchi4221

最新推荐文章于 2024-04-27 09:12:42 发布

阅读量302

点赞数

文章标签： java python linux unity 机器学习

原文链接：https://www.journaldev.com/8276/angularjs-introduction-to-jetbrains-webstorm

版权

We are going to look at some of the useful developer tools for angularJS development through a series of posts. In this post, we will discuss about the IDE, JetBrains WebStorm and how to create a sample project using WebStorm

我们将通过一系列文章来介绍一些用于angularJS开发的有用的开发人员工具。在本文中，我们将讨论IDE，JetBrains WebStorm以及如何使用WebStorm创建示例项目。

内容 (Contents)

JetBrains WebStorm简介 (Introduction to JetBrains WebStorm)

You will find many IDEs for angularJS development like JetBrains WebStorm, Sublime Text, Atom etc that makes your life easy. I recommend using WebStorm and I am going to show you to set up the developer tools for angularJS through a series of posts.

您会发现许多用于angularJS开发的IDE，例如JetBrains WebStorm，Sublime Text，Atom等，使您的生活变得轻松。我建议使用WebStorm，并通过一系列文章向您展示如何为angularJS设置开发人员工具。

You can download the latest trial version of WebStorm from here .

您可以从此处下载WebStorm的最新试用版。

You will see the following screen when you launch the WebStorm for the first time. You can choose the required option.

首次启动WebStorm时，将显示以下屏幕。您可以选择所需的选项。

Click on Create New Project and you will see a list project types and you can choose depending on your requirements.

单击创建新项目 ，您将看到一个列表项目类型，您可以根据需要进行选择。

You will see the following sample angularJS project created, if you select AngularJS from the list.

如果从列表中选择AngularJS，您将看到以下示例angularJS项目创建。

You can also check out from the version control repository to your WebStorm. You can select the following option shown in the figure if you wanted to do so.

您也可以从版本控制存储库中签出到WebStorm。如果需要，可以选择图中所示的以下选项。

In this post, I’m going to start everything from scratch. Therefore, you can choose the empty project type and set your project directory in the location field.

在这篇文章中，我将从头开始。因此，您可以选择空项目类型，并在位置字段中设置项目目录。

I have created a project directory named Angular under Projects folder.

You will see the following screen when you click on the create button.

我在Projects文件夹下创建了一个名为Angular的 项目目录。
单击创建按钮时，您将看到以下屏幕。

在WebStorm中创建我们的第一个项目 (Creating Our First Project in WebStorm)

Download AngularJS framework from here.

从这里下载AngularJS框架。

I have created a directory libs/Angular to attach the downloaded angular.min.js file. You can see that in the following image.

我创建了一个目录libs / Angular来附加下载的angular.min.js文件。您可以在下图中看到它。

Now we are going to create a simple application. You can create an HTML file as shown in the following figure. Right click on your project and select the type of file you want to create.

现在，我们将创建一个简单的应用程序。您可以创建一个HTML文件，如下图所示。右键单击您的项目，然后选择要创建的文件类型。

I have created an HTML page called index.html

我创建了一个名为index.htmlHTML页面

You can see the auto completion feature of JetBrains WebStorm as you type.

键入时，您会看到JetBrains WebStorm的自动完成功能。

Finally, we will include the angular.min.js file in libs/Angular directory into the index.html.

最后，我们将libs / Angular目录中的angular.min.js文件包含到index.html中。

<script src="libs/Angular/angular.min.js"></script>

We have used the following HTML in this post to introduce WebStorm for angularJS development.

我们在这篇文章中使用了以下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"></span>!</p>

</div>
<script src="libs/Angular/angular.min.js"></script>
</body>
</html>

You can run the above application simply by clicking on one of the browser icons shown on top left of the WebStorm. You can see that in the following figure.

您只需单击WebStorm左上方显示的浏览器图标之一，即可运行上述应用程序。您可以在下图中看到它。

We have successfully created our first angular application using WebStorm.
That’s all for now and we will discuss about the package manager Bower and its usage in the coming post.

我们已经使用WebStorm成功创建了我们的第一个角度应用程序。
到此为止，我们将在下一篇文章中讨论软件包管理器Bower及其用法。