Clever Geek Handbook

Migration from AngularDart 0.14.0 to 1.0.0

I have a fairly large web application that is created using the @Controller annotation in AngularDart 0.14.0. The @Controller annotation has been removed, so I need to move on to something else. So my questions are about where I'm moving on and how to do it. I've looked at the documentation for the @Component annotation, but I can't see a way to navigate to it without requiring a lot of rework. Hope I'm missing something. I have looked at other similar questions, but none of them led me to a solution.

Here is an example below of how I am using @Controller.

pubspec.yaml

name: Admin
description: Server Admin Page
dependencies:
  angular: 0.14.0
transformers:
- angular:
    html_files: web/index.html

index.html

<!DOCTYPE html>
<html ng-app>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Server Configuration</title>
</head>
<body>
  <div admin id="container">
    <div id="header">
      <div id="app-header"><span id="app-name">Server Configuration</span></div>
      <div class="tab-panel ng-cloak" >
        <div class="{{ctrl.selectedTab != null && tab.name == ctrl.selectedTab.name ? 'tab-selected' : 'tab'}}" ng-repeat="tab in ctrl.tabs">
          <div class='tab-inner' ng-click='ctrl.selectTab(tab)'>{{tab.name}}</div>
        </div>
      </div>
    </div>
    <div id="body">
    <div class="ng-cloak" ng-if="ctrl.selectedTab != null" >
      <div>{{ctrl.selectedTab.name}} Content</div>
    </div>
    </div>
</div>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

index.dart

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

@Controller(
    selector: '[admin]',
    publishAs: 'ctrl')
class AdminPage{
  AbstractTab selectedTab;
  List<AbstractTab> tabs = new List<AbstractTab>();

  AdminPage()
  {   
    tabs.add(new AbstractTab("tab1","tab"));
    tabs.add(new AbstractTab("tab2","tab"));

    this.selectTab(tabs.first);
  }

  void selectTab(AbstractTab tab)
  {
    this.selectedTab = tab;
    this.selectedTab.load();
  } 
}

class AbstractTab{
  String name;
  String type;

  AbstractTab(this.name,this.type);

  load()
  {
    print("loading $name");
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    bind(AdminPage);
  }
}

void main() {
  applicationFactory()
      .addModule(new MyAppModule())
      .run();
}

Update:

The updated index.dart file now looks like this and everything works in AngularDart 1.0.0. Thank you for your help.

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

class AdminPage{
  AbstractTab selectedTab;
  List<AbstractTab> tabs = new List<AbstractTab>();

  AdminPage()
  {   
    tabs.add(new AbstractTab("tab1","tab"));
    tabs.add(new AbstractTab("tab2","tab"));

    this.selectTab(tabs.first);
  }

  void selectTab(AbstractTab tab)
  {
    this.selectedTab = tab;
    this.selectedTab.load();
  } 
}

class AbstractTab{
  String name;
  String type;

  AbstractTab(this.name,this.type);

  load()
  {
    print("loading $name");
  }
}

@Injectable() // don't forget that
class GlobalController {
  AdminPage ctrl;

  GlobalController() {
    ctrl = new AdminPage();
  }
}

void main() {
  applicationFactory().rootContextType(GlobalController).run();
}
+3


source to share


1 answer


I was in the same situation as you and I have to admit that there is no documentation on "how to do this correctly in angular V1".

So the best way to find the global controller is

main.dart

@Injectable() // don't forget that
class GlobalController {
  final Logger log = new Logger("GlobalController");
  AdminPage ctrl;
  OtherCtrl otherCtrl

  GlobalController() {
    ctrl = new AdminPage();
    otherCtrl = new OtherCtrl();
  }
}

void main() {
  applicationFactory().rootContextType(GlobalController).run();
}

index.html

<!DOCTYPE html>
<html ng-app>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Server Configuration</title>
</head>
<body>
  <div admin id="container">
    <div id="header">
      <div id="app-header"><span id="app-name">Server Configuration</span></div>
      <div class="tab-panel ng-cloak" >
        <div class="{{ctrl.selectedTab != null && tab.name == ctrl.selectedTab.name ? 'tab-selected' : 'tab'}}" ng-repeat="tab in ctrl.tabs">
          <div class='tab-inner' ng-click='ctrl.selectTab(tab)'>{{tab.name}}</div>
        </div>
      </div>
    </div>
    <div id="body">
    <div class="ng-cloak" ng-if="ctrl.selectedTab != null" >
      <div>{{ctrl.selectedTab.name}} Content</div>
    </div>
    </div>
</div>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>


It works great for me.

Note: Please note that all your methods and fields GlobalController

will be directly accessible. in this example, if you want to access otherCtrl

, just use otherCtrl

in your HTML file.

Note2: You don't need to put anything in your HTML ballet to make this work.

Info: I know that during the migration process you cannot allow large refactorings, but for your future angular development it is advised to split your code into several components.

rootContextType

+3


source






More articles:


All Articles