angulardart_translate_filter

AngularDart i18n translate filter

How to use the example provided

  • Create a new Dart project. (Open DartEditor - File - New Project)
  • Open pubspec.yaml file
  • Add these lines to pubspec.yaml:
dependencies:
  angular: '>=1.1.0 <2.0.0'
  browser: '>=0.10.0+2 <0.11.0'
  web_components: '>=0.10.1 <0.11.0'
  angulardart_translate_filter: any
  • Run pub get. Wait for dependencies to be loaded.
  • Copy example directory to the root of your project
  • Copy "lib/components" directory to the "lib" directory of your project
  • Right click your project name and choose Refresh using DartEditor
  • Open example/main.dart file and change these lines:
import 'package:angulardart_translate_filter/components/header.dart';
import 'package:angulardart_translate_filter/components/footer.dart';
import 'package:angulardart_translate_filter/components/content.dart';

to

import 'package:yourProjectName/components/header.dart';
import 'package:yourProjectName/components/footer.dart';
import 'package:yourProjectName/components/content.dart';

Open pubspec.yaml file, add these lines at the end and then save it:

transformers:
- angular:
    html_files:
      - lib/components/header.html

Right click on index.html file and choose "Run in Dartium"

See main.dart for service setup:

  TranslateConfig translateConfig = new TranslateConfig();
  translateConfig.localeSetup = {
    "activeLang": "En", //starting language
    "localeFiles": {"prefix": 'i18n/lang-', "suffix": '.json'}, //locale files prefix + suffix
    "langsList": ['En', 'Ro'] //the list used for creating languages menu
  };

How to use the filter inside your app

  • Add dependencies to pubspec.yaml
dependencies:
  angular: '>=1.1.0 <2.0.0'
  browser: '>=0.10.0+2 <0.11.0'
  web_components: '>=0.10.1 <0.11.0'
  angulardart_translate_filter: any

or load the package via DartEditor (open pubspec.yaml file, click on "Overview" tab, click on the "Add" button and search for "angulardart_translate_filter"

  • Open your main.dart file and setup the i18n filter and import dependencies:
import 'package:angulardart_translate_filter/angulardart_translate_filter.dart';
  • Add the filter to the app module:
class AppModule extends Module{
  AppModule(){
    bind(Translate);
    ...
  }
}
  • Configure the filter:
  TranslateConfig translateConfig = new TranslateConfig();
  translateConfig.localeSetup = {
    "activeLang": "En", //starting language
    "localeFiles": {"prefix": 'i18n/lang-', "suffix": '.json'}, //locale files prefix + suffix
    "langsList": ['En', 'Ro'] //the list used for creating languages menu
  };

Use the filter in your components:

  • Open your component dart file and import the dependencies required for the filter to work: "angular" and "angulardart_translate_filter"
    import 'package:angular/angular.dart';
    import 'package:angulardart_translate_filter/angulardart_translate_filter.dart';
  • load the filter inside your component's controller:
    class yourConstructor{
        @NgOneWay('activeLang')
        Map activeLang;
        TranslateConfig translateConfig;

        yourConstructor(this.translateConfig){
            activeLang = translateConfig.getActiveLang;
        }
    }
  • Use the filter inside your component's html file:
    {{'key' | translate:{'lang':activeLang.langCode} }}

Reference

https://pub.dartlang.org/packages/angulardart_translate_filter

Libraries