AngularJS

Question 1

dependency injection

Answer 1

• when pass a dependency (function or object) to a function to use, instead of allowing the function to look for it itself, or to define it inside its body

Question 2

anchor tags

Answer 2

• mechanism in html for moving within document using hyperlinks

Steps

1. create a tag with href
   
   • <‘a href=”#section1”>Go to Section 1<‘/a>
2. Create a tag with corresponding id
   
   • <‘a id=”section1”>This is Section 1<‘/a>

Question 3

service

AngularJS

Answer 3

• basically an Angular function or object
• almost always a singleton ($scope is an exception)
• custom services can be used implement app-wide functionality
• or to pass data between controllers
• some services are built in
  
  • $scope
  • $log
  • $timeout
• 3 ways to register (create) custom services
  
  • app.service() function
  • app.factory() function
  • app.provider() function

Question 4

model

AngularJS

Answer 4

• any data that lives within the scope of an angular controller
• $scope variable is used to store data that exists in the model
• $scope (and therefore model) is unique for every controller

Question 5

view

AngularJS

Answer 5

• view is just some html that is linked to a controller
• usually two-way bindings

2 contexts

1. portion of a regular html document (index.html)
   
   • linked to controller via the ngController directive
2. standalone html file
   
   • use the ngView directive to insert into page
   • linked to controller via $routeProvider

Question 6

controller

AngularJS

Answer 6

• component of an AngularJS app that operates on the model (data)
• each controller has its own scope (own model)
• controllers are linked to views

Question 7

routing

AngularJS

Answer 7

• used to display different html to user based on active url hash

Steps

1. Add ngRoute module in script tag
2. Inject ngRoute dependency into main app module
3. Use myApp.config, and inject $routeProvider dependency
4. Each url hash should be linked to:
   
   • tempalteUrl
   • controller

Question 8

directives

Answer 8

• html-side commands
• analagous to template tags and filters in Django or liquid in Shopify {% %}

2 flavors

1. Built-in directives
   
   • ng-model
   • ng-view
   • ng-controller
2. Custom directives

Question 9

ngController

Answer 9

• built in AngularJS directive
• essentially turns a portion of html into a view (linked to a specific controller)

Question 10

ngView

Answer 10

• built in AngularJS directive
• designates a location in page to imports html from a standalone document
• used in conjuction with routing
• consults the $routeProvider to determine which template to import (based on the current url hash)

Question 11

ngTransclude

Answer 11

• built-in Angular directive
• allows you to incorporate any html located in your custom directive tag into the generated view

Steps

1. Add some text inside the tag of your custom directive (the spot where directive was added)
2. Add ‘transclude’ to directive object, set to true
3. Add ngTransclude tag to the inside of the directive’s html template

Question 12

custom directives

Answer 12

• custom directives are essentially snippets of reusable html they can be added to an html page
• can sit inside or outside of a view

Steps

1. Create directive on app
   
   • myApp.directive(‘directiveName’, function() {} )
2. Create an object (directive definition object) inside function that takes several options
3. Return directive object

Question 13

directive definition object

Answer 13

• object you define when creating a directive
• has several predefined options:

1. templateUrl ⇒ relative location of the html use to generate the directive’s ouptut
2. scope object ⇒ used to create isolate scope
3. compile function ⇒ allows you to edit directive html before generation
4. link function ⇒ allows you to edit each individual instance of directive DOM
5. controller constructor ⇒ allows you to share data between directives
6. transclude ⇒ boolean indicating whether ngTransclude is usee

Question 14

isolating the scope

Answer 14

• process of separating scope (model) of custom directive from scope of its enclosing view
• defines a unique scope for every instance of custom directive

Steps

1. Add scope property to directive object
2. If you “poked holes” in scope, list variables you wish to access

Question 15

“poking holes” in the scope

Answer 15

• allow directive with isolated scope to access variables in parent scope (enclosing view’s model)

Steps

1. In site of “instantiation”, request access to a variable located in the parent scope by…
2. Adding custom attributes to tag of custom directive
3. Where the key is the name of the variable in the isolate scope and the value is the name of variale you want
4. On directive side, add key/val pairs to the scope object for each variable you requested…
5. Where keys are same as the keys of custom attributes (in camel case)
6. And values are symbols used to indicate type of data being passed
   
   • ’@’ → text (one-way binding)
   • ’>’ → object with one-way binding
   • ’=’ → object with two-way binding
   • ‘&’ → function
7. On the template side, access variables using names as defined in scope object

Question 16

“compilation”

AngularJS

Answer 16

• does not relate to compiling and linking in traditional CS
• process of turning a custom directive into a DOM element
• four functions are invoked (in this order) when directive is “instatiated”
  
  1. compile
  2. controller constructor
  3. pre-linking
  4. post-linking

Question 17

compile

AngularJS

Answer 17

• function that executes during the “compilation” of a custom directive
• during compile phase, scope doesn’t exist
• function allows you to change raw template of custom directive (which will effect all instances)

Syntax

• compile: function(elem, attrs) { }

Steps

1. Add compile as key in directive definition object
2. Perform any changes using arguments
3. Optionally, define and return linking functions

Question 18

controller (directive)

[AngularJS]

Answer 18

• function that executes during “compilation” of custom directive
• function can be used, like ‘link’, to tweak instance of directive
• but used primarily to pass data to other directives
• in this sense, more like a shared scope object than an actual controller

Syntax

• controller = function($scope) { // this bindings }

Steps

1. Attach methods and properties to controller object using this binding
   
   • this always refers to the controller itself in this situation
2. Elsewhere, another directive uses ‘require’ to access this directive’s controller object
3. Then it read its properites like an normal object

Question 19

linking

AngularJS

Answer 19

• two functions invoked during “compilation” of custom directive
• allows you to update the instance of custom directive
• or attach events to generated DOM element

2 functions:

1. pre-linking
   
   • Code runs, and then nested directives are compiled and linked
   • Almost never done, because additional changes might be made by nested directives
2. post-linking
   
   • after all nested directives are compiled and linked, code runs
   • this is what “linking” really is

2 approaches:

1. Defined within compile: method
2. Defined separated in link: method

Question 20

defining linking functions in

link: property

Answer 20

• use link: property defined in directive definition object

2 choices

• Make link: property is an object
• Object has methods pre: and post:
• You define pre-linking and and post-linking in that object

— or —

• Make link: property is a method
• That function is treated as the post-linking function

Question 21

defining linking functions in compile property

Answer 21

• defining linking function in compile property is optional
• Not preferred

2 choices

• Create an object with methods pre: and post:
• You define pre-linking and and post-linking in that object
• Return that object

— or —

• Return a function
• That function is treated as the post-linking function