Skip to content

Latest commit

 

History

History
139 lines (101 loc) · 3.71 KB

step-3.md

File metadata and controls

139 lines (101 loc) · 3.71 KB

Step 3: Add a button and controller

In this step you add a button and a controller that coordinates the button, label, and badge.

Keywords: controller, module, click event

Edit piratebadge.dart.

→ Create an empty class named BadgesController, and give it a name property.

...
class BadgesController {
  String name = '';
  BadgesController();
}

void main() {
...

→ Add an NgController annotation to the class.

@NgController(
  selector: '[badges]',
  publishAs: 'ctrl')
class BadgesController {

Key information:

  • The NgController annotation tells Angular that BadgesController is an Angular controller.
  • The required selector argument defines the CSS selector that triggers the controller. It can be any valid CSS selector that does not cross element boundaries.
  • The publishAs argument specifies that the controller instance should be assigned to the current scope under the specified name.

→ Modify the main() method to create a new module.

void main() {
  ngBootstrap(module: new Module()..type(BadgesController));
}

Key information:

  • The Module instance provides all of Angular’s built in services and directives.
  • Your app’s module is added to the list of modules that Angular loads.

→ In the BadgesController class, add an inputIsNotEmpty getter, a label getter, and a generateName() method.

class BadgesController {
  String name = '';
  BadgesController();
  
  bool get inputIsNotEmpty => !name.trim().isEmpty;
  String get label => inputIsNotEmpty ? "Arrr! Write yer name!" : "Aye! Gimme a name!";
    
  generateName() {
    name = 'Anne Bonney';
  }
}

Edit piratebadge.html.

→ Add badges to the <body> element. 

<body badges>

Key information:

  • Thanks to the badges selector, a BadgeController now controls every element under <body>.

→ Add a button element under the input field.

<div class="widgets">
  <div>
    <input type="text" id="inputName" maxlength="15" ng-model="name">
  </div>
  <div>
    <button ng-click="ctrl.generateName()">{{ctrl.label}}</button>
  </div>
</div>

Key information:

  • ng-click is a built-in Angular directive that allows you to specify custom behavior when an element is clicked. In our example, it invokes the generateName() method on the controller.
  • As {{ctrl.label}} shows, an Angular expression can refer to a getter.

→ Update data binding: replace name with ctrl.name.

<input type="text" id="inputName" maxlength="15" ng-model="ctrl.name">

<span id="badgeName">{{ctrl.name}}

→ Add a ng-disabled directive to the button tag. 

<button ng-click="ctrl.generateName()" ng-disabled="ctrl.inputIsNotEmpty">
  {{ctrl.label}}
</button>

Key information:

  • ng-disabled disables the element whenever the condition is true. In this case, the button is disabled whenever the input field contains text.

  • Like ng-click, ng-disabled is a built-in AngularDart directive.

Run the app in Dartium.

Click the button. "Anne Bonney" appears in the text field and badge, and the button becomes disabled.

Erase all text from the input field. The button becomes enabled again.

Problems?

Check your code against the files in 3-buttonbadge.

Home | < Previous | Next >