angular

Question 1

angular: To set the scope of an app into the html

Answer 1

add the html attribute ng-app=”appName” to the html tag or whatever div you want angular to run in

Question 2

angular: To render a variable into the html, type

Answer 2

{{ myVar }}

Question 3

angular: To create a variable named varName that becomes the value of whatever is in an input field and vice versa, type

Answer 3

-input type= “text” ng-model=”varName”>

Question 4

angular: The file that contains all of the functions you want to run is called

Answer 4

controllers.js

Question 5

angular: The $scope argument to a controller function

Answer 5

is an object that gives you access to the variable namespace inside the tags its declared in.

Question 6

angular: To change the value of a variable inside the template using a controller, type

Answer 6

$scope.varName = “string”;

Question 7

angular: To loop over all the items of a list and render them as list items, type

Answer 7

-li ng-repeat=”item in listVar”> {{ item }} -/li>

Question 8

angular: When rendering an images source from an angular variable, you must

Answer 8

use ng-src instead of src so that the browser does not try to fetch src={{ myVar }} in seconds before angular compiles in the correct value

Question 9

angular: To make a url that will not reload the page, but where the change will be listened to by angular, type

Answer 9

href=”#/path”

Question 10

angular: The file structure of an angular app is

Answer 10

index.html
scripts
vendor
styles

Question 11

angular: To make the app.js file the real app

Answer 11

start the file with

angular. module(“projectName”, [])
note: [] is mandatory

Question 12

angular: The [ ] in angular.module(“projectName”, []) is for

Answer 12

listing dependencies

Question 13

angular: directives are

Answer 13

custom tags or attributes inside tags that render the return of the directives function inside of them

e. g.
- my-directive>-/my-directive> or
- tag my-directive>-/tag>

Question 14

angular: files that contain directives should be

Answer 14

imported into the html template after the app script

Question 15

angular: To create a directive function that can only be called as an element/tag, type

Answer 15

angular.module("appName")
.directive("directiveName", function(){
  return {
    template: "string",
    restrict: "E"
  }
})

Question 16

angular: directive names should be written

Answer 16

as camel case in scripts, but lower case with dashes between words.
e.g.
myDirective would be
-my-directive>-/my-directive>

Question 17

angular: To make a directive only work as a tag and not an attribute type

Answer 17

angular.module("appName")
.directive("directiveName", function(){
  return {
    template: "string",
    restrict: "E"
  }
})

Question 18

angular: The return of a directive can also be a

Answer 18

function

Question 19

angular: The naming convention for angular controller is

Answer 19

nameCtrl

Question 20

angular: To make a controller, type

Answer 20

angular.module("nameCtrl"), 
.controller("nameCtrl", function($scope){
  $scope.functionName = function() {
    ...
  }
})

Question 21

angular: To set the controller into some tags

Answer 21

add the attribute ng-controller=”controllerName” into the chosen tags

Question 22

angular: To run a function from a controller on click of an html element

Answer 22

add the attribute ng-click=”functionName()”

Question 23

angular: A function or method that is available to many controllers is called a

Answer 23

service

Question 24

angular: Services must

Answer 24

be set as a dependency in the controllers that want to use them

Question 25

angular: A common service is

Answer 25

a rest api connector

Question 26

angular: inside of a services callback function, the “this” method refers to

Answer 26

the service itself

Question 27

angular: To create a service with the $http provider that gets data, type

Answer 27

.controller(“nameCtrl”, function($scope){
nameService.methodName(function(response) {
$scope.varName = response.data
})
})

.service("nameService", function($http){
  this.methodName = function(callback) {
    $http.get("url.com").then(callback)
  }
})

Question 28

angular: ng-repeat automatically gives each item a

Answer 28

$index in their scope which you can pass to an ng-click function like ng-click=”functionName($index)”

Question 29

angular: To onclick change the value of a variable to it’s opposite, type

Answer 29

ng-click=”varName = !varName”

Question 30

angular: To hide something based on if a variable returns true, type

Answer 30

ng-hide=”varName”

Question 31

angular: To add fake data to your app for testing,

Answer 31

assign an array of javascript objects to a variable in the $scope of one of the controllers

Question 32

angular: To change the value of a variable when a user clicks outside of the input they are using, type

Answer 32

ng-blur=”varName = value”

Question 33

angular: To apply a class based on whether or not a variable returns true, type

Answer 33

ng-class=”{ ‘class-name’: varName, ‘class-name’: varName }”

Question 34

angular: To watch for when the value of an input changes and then run a function, type

Answer 34

ng-change=”functionName()”

Question 35

angular: To add a new object to an array already in $scope, type

Answer 35

$scope.arrayName.push( {“key”: “value”} )

Question 36

angular: To remove an object from an array already in $scope, type

Answer 36

$scope.arrayName.splice(indexOfObject, 1)

Question 37

angular: To hide an element until it is fully rendered so you do not see mustaches

Answer 37

add to css
[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

add attribute
ng-cloak

Question 38

angular: To limit the number of items ng-repeat renders, type

Answer 38

limitTo:10

Question 39

angular: To sort ng-repeat according to one field, type

Answer 39

| note: false refers to reverse ordering or not

orderBy: ‘fieldName’: false

Question 40

angular: To run a function on page load, type

Answer 40

into the controller

$window.onload = function(e) {
…
}

note: Must pass in $window object into the controller

Question 41

python: To create an http server, type

Answer 41

python -m http.server

Question 42

json: Json objects

Answer 42

must have quotes around key names

Question 43

angular: To create an if else statement in the template

Answer 43

Create two divs, each with

ng-if=”varName == 10”

ng-if=”varName != 10”

Question 44

angular: To import angular route, type

Answer 44

-script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js”>

Question 45

angular: To set where in the index.html angular will inject the view, type

Answer 45

-div ng-view>-/div>

Question 46

angular: To add routes to angular, type

Answer 46

angular.module("negatizer", ['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
    .when("/", {
        controller: "nameCtrl",
        templateUrl: "partials/template.html"
    })
    .otherwise({
        redirectTo: "/path/"
    });
});

Question 47

http: to set a cookie on a browser without javascript

Answer 47

Use the Set Cookie http response header

Question 48

angular: You should use $scope.$apply(function (){ … }) if

Answer 48

You are updating your variables after a full turn of javascript rendering so that angular knows to update the ui.

Question 49

angular: Putting your function inside rather than before $scope.$apply(function (){ … }) is preferable because

Answer 49

$apply puts your code in a try catch block so errors are caught within angular.

Question 50

angular: If sending a parameter to a service, send it

Answer 50

through this.methodName, not the anonymous function of the service

Question 51

angular: new FormData() must be

Answer 51

capitalized

Question 52

angular: To create a service that posts a form, type

Answer 52

.service(“postFormData”, function($http){
this.postFormData = function(data, callback){
$http.post(“endpoint.com/”, data).then(callback)
}
})

Question 53

js: To add a file in a form field to a FormData() object, type

Answer 53

var form = new FormData()
form.append("file", formElement.files[0], "file.csv")

Question 54

angular: When using angular inside a django app

Answer 54

put the index.html into base.html and then put the rest of the app inside the static folder.

Question 55

angular: Import that app.js into the page

Answer 55

last