Scribd Logo
Upload

Welcome to Scribd!

  • Ngularjs Jumpstart: View, Directives and Filters

    Uploaded by

    Narendran Murali
    12 views24 pages
    content delivery

    Original Title

    Module-2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    content delivery

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views24 pages

    Ngularjs Jumpstart: View, Directives and Filters

    Uploaded by

    Narendran Murali
    content delivery

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 24

    ngularJS JumpStart

    View, Directives
    and Filters

    © Wahlin Consulting – All Rights Reserved


    Data Binding Overview

    Directives and Expressions

    Iterating Over Data

    Sorting and Formatting Data


    The Big Picture

    Module

    Config

    Routes

    View $scope Controller

    Directives *Factory
    Data Binding Overview
    Data Binding

     JavaScript doesn't provide native support for data


    binding
     Two-way data binding can lead to significant
    reductions in code

    Changes updated
    in property

    Name: John Doe Name Property

    Changes updated
    in control
    Control-Oriented
    versus
    Data-Oriented
    Control-Oriented Development Workflow

    Name: John Doe Submit

    1. Code assigns value to a textbox

    document.getElementById('name').value = 'John Doe';

    2. User modifies data


    3. User clicks a button
    4. Code pulls the value out of the textbox

    var name = document.getElementById('name').value;
    Data-Oriented Development Workflow

    Name: John Doe Submit

    1. Property is bound to a textbox

    <input type="text" bindProperty="name" />

    2. User modifies data


    3. Property value is automatically updated!
    Directives and Expressions
    What are Directives?

    Directives teach HTML new tricks!


    What can Directives Do?

    DOM Manipulation View Loading

    Data Binding CSS

    Controllers/ Events
    Modules
    Examples of AngularJS Directives

    DOM Manipulation Modules/Controllers


    ng-hide ng-app
    ng-repeat ng-controller
    ng-show
    ng-view

    Data Binding Events


    ng-bind ng-click
    ng-init ng-keypress
    ng-model ng-mouseenter
    Defining Directives

     Directives can be defined multiple ways:

    <div ng‐hide="isHidden">

    <div data‐ng‐hide="isHidden">

    <ng‐view></ng‐view>
    AngularJS Expressions

    Expressions are code snippets


    placed in binding markup:

    Binding
    markup {{ 1 + 1 }}

    Expression
    Iterating Over Data
    Iterating with the ng-repeat Directive

    <html ng‐app>
    ... Provides initial data

    <div ng‐init="names=['Dave','Jeff','Heedy','Danny']">

    <h3>Iterating through data with ng‐repeat</h3>
    <ul>
    <li ng‐repeat="name in names">{{ name }}</li>
    </ul>
    </div>

    ... Iterate through


    </html> names
    Sorting and Formatting Data
    Filters and Pipes

     AngularJS can "pipe" data through filtering,


    formatting, and sorting functions
     Uses the | character

    $9.99

    9.9912
    Currency Filter
    Key AngularJS Filters

    currency
    date
    filter
    json
    limitTo
    lowercase
    number
    orderBy
    uppercase
    Sorting and Formatting Data

    <ul>
    <li data‐ng‐repeat="cust in customers | orderBy:'name'">
    {{ cust.orderTotal | currency }}
    </li>
    </ul>
    Format as currency Order customers by
    name property
    Filtering Data

    <input type="text" data‐ng‐model="nameText" />


    <ul>
    <li data‐ng‐repeat="cust in customers | filter:nameText | 
    orderBy:'name'">
    {{ cust.name }} ‐ {{ cust.city }}</li>
    </ul> Filter customers by
    model value
    Summary
    The Big Picture

    Module

    Config

    Routes

    View $scope Controller

    Directives *Factory
    Summary

     Views handle UI functionality

     Directives enhance HTML:


     Manipulate the DOM
     Used to reference model properties
     Iterate over data and generate HTML
     Much more..

     Filters are used to format, sort, or filter data

    © Wahlin Consulting – All Rights Reserved

    You might also like