Book Image

DART Cookbook

By : Ivo Balbaert
Book Image

DART Cookbook

By: Ivo Balbaert

Overview of this book

Table of Contents (18 chapters)
Dart Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a view


In this recipe, we isolate the code for the filters from previous recipe in its own component: search_job in the folder lib\component\. You can follow along with the code in the project angular_view.

How to do it...

The change we make in this recipe is transparent to the user; the web page stays the same, but the project code is refactored.

  1. In our main web page angular-view.html, the <div id="filters"> section is now replaced by the HTML code for the component. Have a look at the following code:

      <search-job
           type-filter="ctrl.typeFilter"
           company-filter-map="ctrl.companyFilterMap">
      </search-job>
    
  2. In the constructor of JobListingController, the following code is added:

       for (var company in companies) {
            companyFilterMap[company] = false;
       }
  3. The behavior of the component is coded in search_job_component.dart as follows:

    import 'package:angular/angular.dart';
    
    @Component(
        selector: 'search-job',
        templateUrl: 'packages/angular_view...