Angular
RubyMine integrates with Angular also known as Angular 2. This platform makes it easy to build web, mobile, or desktop applications.
Before you start
- Install Node.js and configure it as a local Node.js interpreter.
- Install and enable the NodeJS and AngularJS repository plugins on the Plugins page as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
Creating a new Angular application
You can use the angular-cli package or create an empty RubyMine project and install Angular in it.
Angular CLI is the recommended way to start building a new Angular application. Angular CLI should be installed globally so it can be used in any RubyMine project.
To install Angular CLI globally
- Open the built-in RubyMine Terminal (Alt+F12) and type
npm install -g @angular/cli
at the command prompt.
To create an application
- Choose Create New Project on the Welcome screen. The New Project dialog box opens. on the main menu or click
- In the left-hand pane, choose Angular CLI.
- In the right-hand pane:
- Specify the path to the folder where the project-related files will be stored.
- In the Node Interpreter field, specify the Node.js interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one
- In the Angular CLI field, specify the path to the
angular-cli
package.
- When you click Create, RubyMine generates an Angular-specific project with all the required configuration files.
To create an empty RubyMine project
- Choose Create New Project on the Welcome screen. The New Project dialog box opens. on the main menu or click
- In the left-hand pane, choose Empty Project.
- Specify the path to the folder where the project-related files will be stored.
- When you click Create, RubyMine creates and opens an empty project.
To install Angular in an empty project
- Open the empty project where you will use Angular.
- Open the embedded Terminal ( ) and type
npm install @angular/core
at the command prompt. That will install the core Angular package with the critical runtime parts of the framework. You may also need to install other packages that are parts of Angular, see the list of packages.
Starting with an existing Angular application
To continue developing an existing Angular application, open it in RubyMine and download the required dependencies.
To open the application sources that are already on your machine
- Click Open on the Welcome screen or choose on the main menu. In the dialog that opens, select the folder where your sources are stored.
To check out the application sources from your version control
- Click Check out from Version Control on the Welcome screen or choose on the main menu.
- Select your version control system from the list.
- In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.
To download the dependencies
- Click Run 'npm install' in the pop-up window:
Generating Angular structures
In an Angular CLI project, you can have specific structures generated automatically.
- On the main menu, choose .
- In the pop-up list that opens, click the relevant type of structure.
- In the dialog box that opens, specify the name of the structure to be generated and the path to it relative to the
src/app
folder of your project. If you want to generate a structure in a separate folder, create this folder first. This does not apply to components, which are by default generated in separate folders unless the--flat
option is specified.If necessary, specify additional options, for example,
--flat
to have a new component generated directly in the specified location without creating a separate folder.
Using Angular language service
RubyMine integrates with the Angular language service developed by the Angular team to improve code analysis and completion for Angular-TypeScript projects. Note that the Angular language service works only with the projects that use Angular 2.3.1 or higher and TypeScript version compatible with it. Also make sure you have a tsconfig.json
file in your project.
To install the @angular/language-service package
- Open the Terminal tool window ( or Alt+F12).
- Change the current folder to the project root and at the command prompt run
npm install @angular/language-service –save-dev
.
The Angular language service is activated by default so RubyMine starts it automatically together with the TypeScript service and shows all the errors and warnings in your TypeScript and HTML files both in the editor and in the TypeScript Tool Window.
To toggle the status of the service
- In the Settings/Preferences dialog (Ctrl+Alt+S), click Typescript under Languages and Frameworks. The TypeScript page opens.
- Select the TypeScript Language Service checkbox and then select or clear the Angular Language Service checkbox.
Using Angular Material Design components
RubyMine recognizes Angular Material components and attributes and provides coding assistance for them:
- Completion for components
- Completion for attributes
- Navigation between a component or an attribute and its declaration (Ctrl+B or on the context menu).
To install Angular Material
- Open the built-in RubyMine Terminal (Alt+F12) and type
npm install --save @angular/material
at the command prompt. For details, see Getting Started on the Angular Material Official website.