4. Control Variables in Form
formName.inputFieldName.property
<div class="error” ng-show=“signup_form.name.$invalid">
...
...
</div>
Unmodified Form - formName.inputFieldName.$pristine
Modified Form - formName.inputFieldName.$dirty
Valid Form - formName.inputFieldName.$valid
Invalid Form - formName.inputFieldName.$invalid
Errors - formName.inputfieldName.$error
15. Directives…
Creating directive – example 1
Directive of Directive can be composed.
Break view into separate HTML using templateUrl
Creating directive – example 2
templateUrl: function(elem, attr){
return 'customer-'+attr.type+'.html';
}
20. Module. Why?
• Each feature
• Each reusable Component
• Application level module
HTML Compiler
Compile
Link
21. Quick check
angular.copy angular.isArray
ngHide ngChange
angular.isDate
angular.toJson
ngShow
ngPaste
$http $location $log
$exceptionHandler
F u n c t i o n s
D i r e c t i v e s
S e r v i c e s
Best practice: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background
AngularJs make properties available on $scope object, so as to set form inside DOM. That enable us to react to form in real time.
Unmodified form – boolean property tells us if user has modified the form. True if user did not modify form.
Modified form – This is set only and only if user has modified the form, this is set even if form validation is not set.
Valid form – tell us if form is valid.
Invalid form – tell us if form is invalid
Above two properties are mostly useful for showing or hiding DOM element.
Error – this object contain all the validation on particular form, and tell if they are valid or not.
http://www.ng-newsletter.com/posts/validations.html
By default on every event angular update model and trigger form validation. So what it you want to control it.
The same way we can delay changes in model update that we call debounced/ non-immediate changes
https://docs.angularjs.org/guide/forms
http://www.ng-newsletter.com/posts/validations.html
http://anandmanisankar.com/posts/angularjs-dependency-injection-demystified/
It turns out Angular just reads the function definition using toString and parses the string to extract the parameter names.
fnText = fn.toString().replace(STRIP_COMMENTS, '');
argDecl = fnText.match(FN_ARGS);
forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) {
arg.replace(FN_ARG, function(all, underscore, name) {
$inject.push(name);
});
});
A module for each feature
A module for each reusable component (especially directives and filters)
And an application level module which depends on the above modules and contains any initialization code.
https://docs.angularjs.org/guide/compiler
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
Compile: traverse the DOM and collect all of the directives. The result is a linking function.
Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
Some directives such as ng-repeat clone DOM elements once for each item in a collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
