Tag Editor

AngularJS tag editor.

The Tag Editor is designed to enable managing meta/link tags in page header sections, and can be used to upload user-defined themes (or other resources) to the AngularJS apps.

📘

Before You Start

See how to upload 3rd party Bootstrap themes to your AngularJS & Bootstrap app here.

Tag Editor UI

To start working with the Tag Editor, open an existing app or create a new AngularJS & Bootstrap or AngularJS & Ionic app.

Working with the Tag Editorfor different app types is similar with the exception of their components and index page configuration.

In Ionic AngularJS apps, index pages don’t allow adding components, and you can only define headers, footers, tabs, etc. as these apps are mobile-oriented.

Go to Project > App settings > General.

There you’ll find the Custom tags table, with each table row consisting of three columns:

  1. Tag name is a select field with the tag name. There are two for now: meta and link.
  2. Attributes is a text input field with a string of tag attributes.
  3. Delete buttons to remove tags.
1152

New tags can be dynamically added to this table (for example, when adding CSS or JavaScript via CREATE NEW > CSS or CREATE NEW > JavaScript) or deleted from it by a user. Tags are also drag and droppable and validation works for the attributes input.

Managing Tag Priority

It is also possible to manage tag priority and their execution order. Just drag a tag to the new position and drop it:

917

📘

Note

The higher the tag is on the list, the lower its priority.

After moving the tag higher and saving, click TEST to see the change:

520

Adding a Custom Tag Example

Lets add a custom tag on a refresh example:

  1. First, let’s add a new meta tag in App settings > General.
  2. For Attribute, paste the following and click Save:
http-equiv="refresh" content="2"
901
  1. By clicking TEST, you may see the screen’s content refresh every 2 seconds.

📘

Note

Changing the initial-scale value of the default <meta name=”viewport” content=”width=device-width, initial-scale=1″/> tag won’t affect the web preview (TEST button). It can only be seen on mobile devices, but remember making changes to this tag may result in the misbehaviors of iOS devices.