Syntax for Specifying file path (relative and absolute)

Question

I want to know a way of specifying the path of files. I am currently following:

href="css/lib/bootstrap.css"

I find that some people specify the file location in a different way:

templateUrl: 'lib:components/bootstrap.css'

I am not able to understand how to create/specify custom directories, as mentioned above using lib: or package:.

A brief on creating custom packages in dart would be very helpful.

Answer 1

When you want to reference a file from the lib directory and the path contains a package name you always omit the lib directory in the path. Paths containing the package name implicitly go into the lib directory.

I have never seen the lib:xxx import style you mentioned.

import Dart files

That is different depending on context

• If you want to import a Dart library file to another Dart file:

  • relative

  import '../otherdir/somefile.dart';

You should use this only if you are referencing a file within the same top-level package directory (between files and folders within the lib directory (or within bin, web, test, example)

• absolute

  import 'package:somepackage/somedir/somefile.dart';

(somedir is a subdirectory of of the lib directory in the package somepackage.
You can use such an absolute path even within the same package. When you want to reference a file in the lib directory from a file in the web (or bin, web, ...) directory it is preferred to use this absolute path variant.

`import 'package:mypackage/somedir/somefile.dart';`

Import other resource files

This may differ between different frameworks (AngularDart, PolymerDart, ...) You can also either reference using an relative path or an absolute path.

Polymer

In Polymer you need to use relative paths for all ressource files.

You need to go up to the top-level directory like web and then from there further using the packages directory.

If your file is in web/somedir and you want to reference a file in lib/otherdir you reference it

href='../packages/mypackage/otherdir/somefile.css

If you want further examples you should describe your concrete situation.

• what framework are you using
• where are the files (source/target)
• what is the purpose of the import (import a CSS to an entry page or to a Polymer element, or to a Angular component, ...)

If you want to import a file from another package and the file you import to is stored in the lib directory you need to go one extra level up (I think that is a temporary workaround and might change before Polymer 1.0 is released).

Example:

two files like

my_package1/lib/comp1/comp1.html
my_package2/lib/comp2/comp2.html

to import comp1 from comp2 you need

<link rel="import" href="../../../packages/mypackage1/comp1/comp1.html>

Answer 2

For absolute path

import 'package:your_app_name/lib/some_dir/some_file.dart';

But skip the lib/, so:

import 'package:your_app_name/some_dir/some_file.dart';