Scribd Logo
Upload

Welcome to Scribd!

  • hGsvk8UWSie15e3kizbl3g AngularJS Reference Guide Takeaway

    Uploaded by

    atasimaiti
    8 views1 page
    This document provides an introduction to AngularJS for beginners by walking through building a simple pet application. It includes setting up the Angular module and controller, defining a list of pets in the controller, and using Angular directives like ng-repeat, ng-model, filters and ng-click to display and interact with the pet data in the HTML. The application allows ordering the pet list by name, breed or status by clicking on the table headers and searching within the list.

    Original Description:

    Original Title

    hGsvk8UWSie15e3kizbl3g_befe244bfa374595b8423ce0eea4b0f1_AngularJS_Reference_Guide_Takeaway

    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
    This document provides an introduction to AngularJS for beginners by walking through building a simple pet application. It includes setting up the Angular module and controller, defining a list of pets in the controller, and using Angular directives like ng-repeat, ng-model, filters and ng-click to display and interact with the pet data in the HTML. The application allows ordering the pet list by name, breed or status by clicking on the table headers and searching within the list.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views1 page

    hGsvk8UWSie15e3kizbl3g AngularJS Reference Guide Takeaway

    Uploaded by

    atasimaiti
    This document provides an introduction to AngularJS for beginners by walking through building a simple pet application. It includes setting up the Angular module and controller, defining a list of pets in the controller, and using Angular directives like ng-repeat, ng-model, filters and ng-click to display and interact with the pet data in the HTML. The application allows ordering the pet list by name, breed or status by clicking on the table headers and searching within the list.

    Copyright:

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

    Anatomy of an Page AngularJS for Beginners: Getting Started

    <!DOCTYPE html>
    <head>
    <!-- Cloning the angular-seed app will use the popular html5-boilerplate --> a Guided Project by Randal L. Carr
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AngularJS Reference</title> https://www.coursera.org
    <meta name="description" content="Learning AngularJS basics">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
    <!-- App template at GitHub
    Put custom CSS that applies to your entire app in app.css
    -->
    <link rel="stylesheet" href="app.css">
    <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
    <!--
    Use this script, angular.min.js, in order to make it available in your app. You may
    use the src= reference in an online URL, or have the file stored in your local
    file system. https://github.com/angular/angular-seed
    -->
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    </head>
    <body>

    <div ng-app="petApp" ng-controller="petController">

    <h1>List of Pets</h1>

    <label for="rowContains">Find: </label>


    <!-- ng-model will associate the value of this HTML input field
    to application data. Changing this value will affect other
    parts of the app, such as search results when you apply
    this value to a filter using filter:rowContains. The filter
    refers to the name of ng-model in this input tag.
    -->
    <input type="text" name="rowContains" ng-model="rowContains" />
    <hr /> AngularJS Documentation
    <table border="1" width="100%">
    <tr>
    <!-- ng-click will execute the defined function when
    https://docs.angularjs.org
    you click on the heading cell in the HTML table.
    The argument in parenthesis matches the pet list
    variable that is being displayed in that column.
    -->
    <th ng-click="orderByThis('name')">Name</th> AngularJS Tutorials
    <th ng-click="orderByThis('breed')">Breed</th>
    <th ng-click="orderByThis('status')">Status</th>
    </tr> https://www.w3schools.com/angular/
    <!--
    ng-repeat will read the list called pets and draw an
    HTML table row for each item in the list. It is similar
    to "for loops" in other programming languages. https://docs.angularjs.org/tutorial/
    Output code is piped to two filters.
    filter: is used to limit the rows that are displayed
    using the text that is found in the rowContains input.
    orderBy: is calling the thisOrder function that is
    defined in the petController. The column heading that Glossary
    is clicked will determine how the table is ordered.
    -->
    <tr ng-repeat="x in pets | filter:rowContains | orderBy:thisOrder">
    <!--
    https://angular.io/guide/glossary
    Curly brackets enclose an AngularJS "expression"
    Each cell in the table that has a filter will be
    processed separately to format the value of the cell
    --> module
    <td>{{x.name | uppercase}}</td>
    <td>{{x.breed | lowercase}}</td> https://angular.io/guide/glossary#module
    <td>{{x.status}}</td>
    </tr>
    </table> directive
    </div>
    https://angular.io/guide/glossary#directive
    <script>
    // angular.module defines your app by binding to the value
    // of ng-app in a particular HTML element.
    // angular.controller defines the controller name found in
    // the ng-controller value of a particular HTML element.
    // Controllers contain variables, functions and app logic.
    // Note: Modules and controllers are usually placed in their own More courses from this author...
    // files in your app folder structure as a best practice, but
    // are shown here for your convenience.
    angular.module("petApp", []).controller("petController", function($scope) {
    // This is a list of pets. Each item has three variables.
    $scope.pets = [
    {name: 'Spot', breed: 'Rat Terrier', status: 'trained'},
    {name: 'Miss Kitty', breed: 'Tabby', status: 'trained'},
    {name: 'Fido', breed: 'English Bulldog', status: 'trained'},
    {name: 'Belle', breed: 'Dachshund', status: 'trained'},
    {name: 'Lovey', breed: 'Persian', status: 'in progress'},
    {name: 'Charlie', breed: 'Poodle', status: 'in progress'}
    ];
    // This is a defined function that will handle the orderBy filter
    $scope.orderByThis = function(x) {
    $scope.thisOrder = x;
    }
    });
    </script>

    </body>
    </html>
    https://www.coursera.org/instructor/randalcarr

    You might also like