Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Ngularjs Jumpstart: Angularjs - The Big Picture

    Hochgeladen von

    Jilaani Shaik
    8 Ansichten31 Seiten
    test

    Originaltitel

    2014-03-24_01-35-16__Module1

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    test

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    8 Ansichten31 Seiten

    Ngularjs Jumpstart: Angularjs - The Big Picture

    Hochgeladen von

    Jilaani Shaik
    test

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 31

    ngularJS JumpStart

    AngularJS
    The Big Picture

    Wahlin Consulting All Rights Reserved

    The Big Picture


    Views, Directives and Filters
    Controllers, Scope and Modules
    Routing
    Services and Factories
    Animation

    Dan Wahlin
    Blog
    http://weblogs.asp.net/dwahlin
    Twitter
    @DanWahlin

    Target Audience
    Developers with experience using the following:

    HTML
    CSS
    JavaScript

    Expect to see a lot of JavaScript throughout the


    course!

    SPA Overview
    Jumping into AngularJS
    Key Players in AngularJS
    AngularJS Documentation

    SPA Overview

    Single Page Applications


    SPAs allow different views (screens) to be loaded
    into a shell page as the user interacts with the page
    SPA Demo
    http://www.myspa.com

    <div></div>

    Single Page Application Views


    Views can be replaced with other views
    SPA Demo
    http://www.myspa.com

    <div></div>
    View1

    Single Page Applications


    SPAs maintain a history of views that have been
    displayed
    SPA Demo
    http://www.myspa.com

    <div></div>
    View2

    The Challenge with SPAs


    SPAs rely on many different technologies:

    DOM manipulation
    History
    Routing
    Ajax
    Data Binding
    More

    http://angularjs.org

    Full-Featured SPA Framework

    Data Binding
    jqLite

    MVC
    Templates

    Routing
    History

    Testing
    Factories

    ngularJS is a full-featured
    SPA framework
    ViewModel
    Services

    Controllers

    Views

    Dependency Injection

    Directives
    Validation

    Jumping into AngularJS

    Getting Started with AngularJS


    Steps to get started with AngularJS:
    1.
    2.
    3.

    Reference the AngularJS script in an HTML page


    Add an ng-app directive
    Bind data using directives

    Step 1: Reference the AngularJS Script


    Add a reference to a local or hosted version of
    AngularJS:
    <script src="/Scripts/angular.js"></script>

    OR
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/
    [version]/angular.min.js"></script>

    Step 2: Add the ng-app Directive


    Add the ng-app directive into the HTML page:
    <!DOCTYPE html>
    <html ngapp>

    </html>

    Step 3: Bind Data using Directives


    Use AngularJS directives to add data binding
    functionality into a page:
    Data Binding
    Expression
    Name:<input type="text" ngmodel="name" />{{name }}

    AngularJS Directive

    Key Players in AngularJS

    The Key to Learning AngularJS


    1. Understand the available parts
    2. Understand how the parts fit together
    3. Understand how to organize parts

    Key Players in AngularJS


    Module
    Routes
    Logic/Data

    UI

    View

    $scope

    Controller

    Directives

    Factory

    Filters

    Service

    The Big Picture

    Module
    Config
    Routes

    View
    Directives

    $scope

    Controller
    *Factory

    What are Modules?


    Module
    Modules are containers for:

    Controllers
    Routes
    Factories/Services
    Directives
    Filters

    What are Factories/Services?

    Factories and Services:

    Factory
    Service

    Used to make RESTful calls


    Used to share data between
    controllers
    Used to handle custom logic
    Are Singletons

    What are Controllers?

    View
    $scope

    Controller
    Factory
    Service

    Controllers act as the "brain" for a


    view:
    Retrieve data from a factory/service
    and store it
    Handle events triggered by the view
    Know how to handle custom logic
    Rely on the $scope object to interact
    with the view

    What is Scope?

    View

    $scope

    Controller

    $scope is the "glue" (ViewModel)


    between a controller and a view

    What are Views?


    Controller
    $scope

    View
    Directives
    Filters

    Views render the user interface:


    Contain HTML and CSS
    Bind to data provided by a
    controller via the $scope object
    Use directives to enhance HTML
    and render data

    What are Routes?


    Routes
    Each route has a unique path:
    Reference a controller and view
    Can include route parameters:
    /customers/:customerId

    /customers

    customers.html

    customersController

    The Big Picture

    Module
    Config
    Routes

    View
    Directives

    $scope

    Controller
    *Factory

    AngularJS Documentation

    Summary

    Summary
    AngularJS is a full-featured SPA framework
    Applications are organized into one or more
    containers (modules)
    Different parts can be associated with a module:

    Controllers
    Factory/Service
    Directives
    Filters
    Wahlin Consulting All Rights Reserved

    Das könnte Ihnen auch gefallen