Terminology and Key topics when usinmg AngularJS
Quiz yourself by thinking what should be in
each of the black spaces below before clicking
on it to display the answer.
Help!
|
|
||||
|---|---|---|---|---|---|
| REST | Representational State Transfer.
🗑
|
||||
| AngularJS | A Structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your applications components clearly.AngularJS's data binding and dependency injection cut down on boiler plate code.
🗑
|
||||
| True | AngularJS is a complete client-side web application framework.
🗑
|
||||
| Yes | Can you access AngularJS using any modern web browser?
🗑
|
||||
| JavaScript | AngularJS's interactivity is written using standard __________.
🗑
|
||||
| 1.6.5 | Which version of AngularJS do we use in class?
🗑
|
||||
| Model View Whatever (MVW) Architecture | Architecture which keeps logic out of the UI and promotes testability.
🗑
|
||||
| 2 Benefits of Two-Way Data Binding w/ Simple JS Objects | 1. Automates moving data to and from the UI.
2. No need to manipulate the HTML Document Object Model (DOM).
🗑
|
||||
| Dependency Injection | Declare dependencies when creating components. Framework will load and inject the dependencies automatically. Simplifies creating complex applications.
🗑
|
||||
| True | AngularJS can use data from multiple sources, including relational and NoSQL databases.
🗑
|
||||
| Single-Page Application (SPA) | AngularJS applications are usually created as a ______-____ ____________. This contains one static HTML page and other content is loaded dynamically.
🗑
|
||||
| Models | ______ represent data that is displayed in the UI or entered by users; can be created locally, or with a REST service.
🗑
|
||||
| Views | _____ are HTML templates that display the data.
🗑
|
||||
| Whatever | ________ is the code that links the model and view. It is called this because developers have named this code the controller, presenter, or view model. Controller is most popular.
🗑
|
||||
| True | In a SPA, data is retrieved in separate HTTP requests, which are returned as JSON data and are not part of the HTML document.
🗑
|
||||
| 3 Things Data binding automates | 1. Creating DOM structure based on the template
2. Merging data into templates
3. Retrieving data from inputs back into variables
🗑
|
||||
| True | Controllers rely on services.
🗑
|
||||
| 2 Options without Dependency Injection | 1. Component creates its dependencies using new
2. Application must have global instance of each dependency
🗑
|
||||
| 2 ways how AngularJS performs Dependency Injection | 1. Component declares its dependencies as constructor arguments
2. AngularJS has an injector that looks up each dependency and passes it to the constructor
🗑
|
||||
| 2 Advantages of Dependency Injection | 1. Each component's dependencies are clearly visible
2. Much easier to isolate each component for effective automated testing
🗑
|
||||
| Data binding removes the need for | Code to move the data to and from the UI for presentation.
🗑
|
||||
| Describe a Single-Page Application (SPA) | A single, fixed page (index.html) with dynamic views(*.html) and controllers (*.js) to be added by a framework, making HTTP calls to (*.json)data.
🗑
|
||||
| Dependency Injection | States what you need to work (i.e. - $ The framework finds the object that implements the functionality, then provides it as a constructor argument.
🗑
|
||||
| Views | Templates which are written with HTML that contain Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render this dynamic component that a user sees in the browser.
🗑
|
||||
| False | It is not possible for the view to display and format data independently of the controller or model.
🗑
|
||||
| False | Angular views are not written using an HTML skeleton.
🗑
|
||||
| 3 markups which views contain | 1. Directives
2. Expressions
3. Filters
🗑
|
||||
| Angular.js | Main Angular JS file
🗑
|
||||
| angular.min.js | Use this Angular file for production.
🗑
|
||||
| True | The angular.js script tag should be included just before the end body html tag.
🗑
|
||||
| Directives | __________ are used by Angular to teach HTML new Functionality; usually written as custom attributes or elements.
🗑
|
||||
| Slug | Directives are declared in markup using a ____ syntax (i.e. - ng-app, ng-model); All built in directives are prefixed with ng-*
🗑
|
||||
| ng-app | Used to bootstrap the application when the page first loads. Commonly placed on the <html> element
🗑
|
||||
| ng-model="propertyName" | Used to create or reference a named property in Angular. Angular will synchronize all references to each of these properties.
🗑
|
||||
| JavaScript-like language to display data in HTML | Employs "handlebars" or "mustache"-style syntax
{{ expression }}
🗑
|
||||
| 4 types of AngularJS Expressions | 1.simple math {{ 1+2 }}
2.String concatenation {{ "Hello" + name }}
3.Drilling down into object properties {{ current.nmame }}
4.Array indexing {{ players[1].points }}
🗑
|
||||
| True | Expressions cannot include control of flow logic; including logic would make Angular applications more difficult to test.
🗑
|
||||
| ng-init | Directive which allows data initialization in the HTML page.
🗑
|
||||
| True | ng-init is only useful in a training course (or when rapid prototyping); only correct use for ng-init is with ng-repeat directive (i.e. - <body ng-init="locations=['London', 'NYC', 'Paris']">)
🗑
|
||||
| ng-repeat | Directive which enumerates the items in a collection of data; similar to a for or for each loop.
🗑
|
||||
| True | ng-repeat clones the HTML element containing the ng-repeat and its contents (i.e. - ng-repeat="item in collectionName"). Use an expression to reference item.
🗑
|
||||
| 6 Variables Created in ng-repeat Loop | 1. $index
2. $first
3. $last
4. $middle
5. $even
6. $odd
🗑
|
||||
| Angular Filters | Allow data to be formatted or transformed for presentation (i.e. data | nameOfThisThing).
🗑
|
||||
| False | Filters cannot have arguments.
🗑
|
||||
| True | Filters may have arguments (i.e. - data | nameOfFilter:arg0:arg1).
🗑
|
||||
| True | Filters may be chained together (i.e. - data | nameOfFilter0 | nameOfFilter1).
🗑
|
||||
| 6 Filters that Operate on Simple JS Data Types | 1.uppercase
2.lowercase
3.date:formatName
4.date:formatString
5.number:numberOfDecimalPlaces
6.currency
🗑
|
||||
| 5 Filters that Operate on Collections | 1.filter:string
2.filter:object
3.orderBy:string:reverse
4.orderBy:function:reverse
5.limitTo:numberOfRecords
🗑
|
||||
| True | If the limitTo number is negative, records are kept from the end of the collection.
🗑
|
||||
| 2 files needed to Create an AngularJS Application | 1. index.html
2. angular.js
🗑
|
||||
| ng-app | Directive used to bootstrap the application.
🗑
|
||||
| 5 Features of AngularExpressions | 1. String concatenation
2. Simple math
3. Object property traversal
4. Collection indexing
5. Ternary expression
🗑
|
||||
| Angular Controller | Named container for Angular functionality. Every Angular application will contain at least one of these; and all Angular controllers must be registered with one of these.
🗑
|
||||
| angular.module("name", ['dependency0', 'dependency1']) | Angular Module creation syntax; takes a string module name; takes an array of named dependencies, returns a module object.
🗑
|
||||
| True | Existing modules can also be referenced using angular.module(name); A controller's declaration may be chained to this method.
🗑
|
||||
| app.js | AngularJS application's main module is conventionally declared in a file named this.
🗑
|
||||
| App | AngulaJS best-practice convention is to keep the app.js file in the ___ directory.
🗑
|
||||
| True | Module must be referenced using ng-app="moduleName"
directive.
🗑
|
||||
| Module | Conventional to create one ______ per main application feature.
🗑
|
||||
| True | Common to use a mnemonic prefix to disambiguate application and Angular code (i.e. - AngularJS's module naming pattern is ngSomeAngularModule).
🗑
|
||||
| app | Conventional to place each module of an Application's code and components in a subfolder of the ___ directory, with the name of that feature/module.
🗑
|
||||
| True | Conventional to have one JavaScript file per feature for development.
🗑
|
||||
| Concatenate and Minify | Use a build process to ___________ and ______ files for deployment.
🗑
|
||||
| Controller | Defined by a JavaScript constructor function that is used to augment the Angular scope.
🗑
|
||||
| Controller | When a __________ is attached to the DOM via the ng-controller directive, Angular will instantiate a new controller object, using the specified controller's constructor function.
🗑
|
||||
| Controller | A __________ brings together the data and behavior for a view; properties within this can supply data binding in the view; methods in this can be invoked from directives in the view.
🗑
|
||||
| Syntax to register a controller on a module | moduleObject.controller("SomeController", function($scope));
🗑
|
||||
| $scope | Controller data and behavior can be created by building up properties and methods on the ______ argument.
🗑
|
||||
| True | Both properties and methods can be attached to the $scope object.
🗑
|
||||
| Properties attached to the $scope object | Data that can be displayed using Angular expressions and input data that can be read using the ng-model directive.
🗑
|
||||
| Methods attached to the $scope object | nested functions inside the controller. Often involed from the view using event-handling directives (i.e. - ng-click, ng-change, and ng-focus).
🗑
|
||||
| Scope | _____ objects are arranged in a hierarchy. Top-level scope is called the root scope; defined on the element with the ng-app directive.
🗑
|
||||
| 2 ways Scope object properties can be constructed | 1. Implicit declarations in HTML views
2. Explicit properties attached to $scope in controller
🗑
|
||||
| Data Binding | ____ _______ relies on scope to watch properties to see if they change; this process is called dirty checking; Done auto-magically for Angular data.
🗑
|
Review the information in the table. When you are ready to quiz yourself you can hide individual columns or the entire table. Then you can click on the empty cells to reveal the answer. Try to recall what will be displayed before clicking the empty cell.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
Created by:
Jordan.WBL
Popular Computers sets