angular Flashcards
angular: To set the scope of an app into the html
add the html attribute ng-app=”appName” to the html tag or whatever div you want angular to run in
angular: To render a variable into the html, type
{{ myVar }}
angular: To create a variable named varName that becomes the value of whatever is in an input field and vice versa, type
-input type= “text” ng-model=”varName”>
angular: The file that contains all of the functions you want to run is called
controllers.js
angular: The $scope argument to a controller function
is an object that gives you access to the variable namespace inside the tags its declared in.
angular: To change the value of a variable inside the template using a controller, type
$scope.varName = “string”;
angular: To loop over all the items of a list and render them as list items, type
-li ng-repeat=”item in listVar”> {{ item }} -/li>
angular: When rendering an images source from an angular variable, you must
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
angular: To make a url that will not reload the page, but where the change will be listened to by angular, type
href=”#/path”
angular: The file structure of an angular app is
index.html
scripts
vendor
styles
angular: To make the app.js file the real app
start the file with
angular. module(“projectName”, [])
note: [] is mandatory
angular: The [ ] in angular.module(“projectName”, []) is for
listing dependencies
angular: directives are
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>
angular: files that contain directives should be
imported into the html template after the app script
angular: To create a directive function that can only be called as an element/tag, type
angular.module("appName")
.directive("directiveName", function(){
return {
template: "string",
restrict: "E"
}
})angular: directive names should be written
as camel case in scripts, but lower case with dashes between words.
e.g.
myDirective would be
-my-directive>-/my-directive>
angular: To make a directive only work as a tag and not an attribute type
angular.module("appName")
.directive("directiveName", function(){
return {
template: "string",
restrict: "E"
}
})angular: The return of a directive can also be a
function
angular: The naming convention for angular controller is
nameCtrl
angular: To make a controller, type
angular.module("nameCtrl"),
.controller("nameCtrl", function($scope){
$scope.functionName = function() {
...
}
})angular: To set the controller into some tags
add the attribute ng-controller=”controllerName” into the chosen tags
angular: To run a function from a controller on click of an html element
add the attribute ng-click=”functionName()”
angular: A function or method that is available to many controllers is called a
service
angular: Services must
be set as a dependency in the controllers that want to use them
angular: A common service is
a rest api connector
angular: inside of a services callback function, the “this” method refers to
the service itself
angular: To create a service with the $http provider that gets data, type
.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)
}
})
angular: ng-repeat automatically gives each item a
$index in their scope which you can pass to an ng-click function like ng-click=”functionName($index)”
angular: To onclick change the value of a variable to it’s opposite, type
ng-click=”varName = !varName”
angular: To hide something based on if a variable returns true, type
ng-hide=”varName”
angular: To add fake data to your app for testing,
assign an array of javascript objects to a variable in the $scope of one of the controllers
angular: To change the value of a variable when a user clicks outside of the input they are using, type
ng-blur=”varName = value”
angular: To apply a class based on whether or not a variable returns true, type
ng-class=”{ ‘class-name’: varName, ‘class-name’: varName }”
angular: To watch for when the value of an input changes and then run a function, type
ng-change=”functionName()”
angular: To add a new object to an array already in $scope, type
$scope.arrayName.push( {“key”: “value”} )
angular: To remove an object from an array already in $scope, type
$scope.arrayName.splice(indexOfObject, 1)
angular: To hide an element until it is fully rendered so you do not see mustaches
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
angular: To limit the number of items ng-repeat renders, type
limitTo:10
angular: To sort ng-repeat according to one field, type
| note: false refers to reverse ordering or not
orderBy: ‘fieldName’: false
angular: To run a function on page load, type
into the controller
$window.onload = function(e) {
…
}
note: Must pass in $window object into the controller
python: To create an http server, type
python -m http.server
json: Json objects
must have quotes around key names
angular: To create an if else statement in the template
Create two divs, each with
ng-if=”varName == 10”
ng-if=”varName != 10”
angular: To import angular route, type
-script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js”>
angular: To set where in the index.html angular will inject the view, type
-div ng-view>-/div>
angular: To add routes to angular, type
angular.module("negatizer", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/", {
controller: "nameCtrl",
templateUrl: "partials/template.html"
})
.otherwise({
redirectTo: "/path/"
});
});http: to set a cookie on a browser without javascript
Use the Set Cookie http response header
angular: You should use $scope.$apply(function (){ … }) if
You are updating your variables after a full turn of javascript rendering so that angular knows to update the ui.
angular: Putting your function inside rather than before $scope.$apply(function (){ … }) is preferable because
$apply puts your code in a try catch block so errors are caught within angular.
angular: If sending a parameter to a service, send it
through this.methodName, not the anonymous function of the service
angular: new FormData() must be
capitalized
angular: To create a service that posts a form, type
.service(“postFormData”, function($http){
this.postFormData = function(data, callback){
$http.post(“endpoint.com/”, data).then(callback)
}
})
js: To add a file in a form field to a FormData() object, type
var form = new FormData()
form.append("file", formElement.files[0], "file.csv")angular: When using angular inside a django app
put the index.html into base.html and then put the rest of the app inside the static folder.
angular: Import that app.js into the page
last
