https://github.com/normandy72/dynamic-html
Dynamic HTML. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/dynamic-html
angular angularjs html html5 javascript js
Last synced: about 1 month ago
JSON representation
Dynamic HTML. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/dynamic-html
- Owner: Normandy72
- Created: 2023-01-10T08:57:48.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T12:30:39.000Z (over 3 years ago)
- Last Synced: 2025-01-14T12:46:39.536Z (over 1 year ago)
- Topics: angular, angularjs, html, html5, javascript, js
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### "Why Angular?" in Terms of Directives
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable and quick to develop.
##### Typical Angular HTML
```
```
### Directive
Marker on a DOM elemet that tells Angular's HTML compiler to attach a specified behavior to that DOM element.
* The compiler can even transform / change the DOM elements and its children.
* A marker can be attribute, element name, comment or CSS class.
### Steps to Create Directive
#### Step 1: Register Directive
```
angular.module('app', [])
.controller('MyCtrl', MyCtrl)
.directive('myTag', MyTag);
```
`'myTag'` - normallized name that will appear in HTML
`MyTag` - Factory function, that returns DDO (Directive Definition Object)
#### Step 2: Define Factory Function
```
MyTag.$inject = [...];
function MyTag(...){
var ddo = {
template: 'Hello World!'
};
return ddo;
}
```
`MyTag.$inject = [...];` - inject other sercices, controller, etc. as usual
#### Step 3: Use In HTML
`` - note that the name is __not__ myTag, but my-tag
***
#### _Summary_
* Directive is a marker in HTML that Angular complies into some behavior.
* It can also change the HTML elements themselves.
* Register name of directive using (normallized) camelCase.
* Registered factory function must return a DDO.
* The factory function gets invoked only once.
* With custom directives, our HTML coding becomes
* reusable;
* semantically relevant to the actual web app we're building.
***
### Restricting Directive To Element or Attribute
```
function MyDirective(){
var ddo = {
restrict: 'AE',
...
};
return ddo;
}
```
`restrict: 'AE'` - Default: 'A' - attribute, 'E' - element
`restrict: 'A'` - Best Practice: restrict to attribute if directive is extending behavior, e.g., `ng-repeat`
`restrict: 'E'` - Best Practice: restrict to element if directive is defining a component with an associated template, e.g., ``
***
#### _Summary_
* The DDO's restrict property determines what AngularJS compiler should look for to detect your custom directive.
* Using directive as a different restrict type than defined will cause the compiler to simply ignore it.
* Best Practice: use 'E' for element when directive has content along with possible behavior.
* Best Practice: use 'A' for attribute when directive has no content and only extends the behavior of host element.
* Class and comment directives are possible, but not used.
***