Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

This example demonstrates how to react on a model change to trigger some further actions. The value greeting will be changed whenever there's there’s a change to the name model and the value is not blank.

...

In this example, we can then reference data on the ParentController's ParentController’s containing $scope on the child scope.

...

Advanced Concepts

Directives

Directives are Angular's Angular’s method of creating new HTML elements with their own custom functionality. For instance, we can create our own custom element "my-directive"

...

...

  • Scopes

    • The $rootScope object is the closest object we have to the global context in an angular app. It's It’s a bad idea to attach too much logic to this global context, just like it's it’s not a good idea to dirty the javascript global scope.
    • A model refers to a traditional JavaScript object {} where transient state should be stored. Persistent state should be bound to a service, which is then responsible for dealing with persisting that model.
  • Data Binding

    • Due to the nature of javascript itself and how it passes by value vs. reference, it's it’s considered a best- practice in Angular to bind references in the views by an attribute on an object, rather than the raw object itself.

...

  • Directives

    • While declaring an AngularJS directive, the naming convention followed is camelCase. For example, we would define the name of the directive as 'myDatePicker'. But when you actually use the directive in your HTML, it is the dash-separated version (my-date-picker).
    • To make your directives and attributes HTML5 compliant, you can prefix all AngularJS attributes with "data“data-" or "x“x-". That is, "x“x-ng-show" show” or "data“data-date-picker"picker”, and AngularJS will treat it just like you wrote it like a normal HTML element.

...