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
