✔ AngularJS Directives
> AngularJS lets you extend HTML with new attributes called Directives.
> AngularJS has a set of built-in directives which offers functionality to your applications.
> AngularJS also lets you define your own directives.
1. AngularJS Directives
> extended HTML attributes with the prefix 'ng-'
> 'ng-app' directive initializes an AngularJS application
> 'ng-init' directive initializes application data
> 'ng-model' directive binds the value of HTML controls (input, select, textarea) to application data.
> https://www.w3schools.com/angular/angular_ref_directives.asp
Angular Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>: 'ng-app' directive also tells AngularJS that the <div> elements is the OWNER of the AngularJs application
2. Data Binding
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total: {{ quantity * price }}
</div>: 'ng-init' is not very common. not a good choice
3. Repeating HTML elements
<div ng-app="" ng-init="names=['Kim','Lee','Park']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>: 'ng-repeat' actually clones HTML elements once for each item in collection.
: 'ng-repeat' used on an array of objects
<div ng-app="" ng-init="names=[
{name: 'Kim', country: 'Korea'},
{name: 'Lee', country: 'china'},
{name: 'Park', country: 'japan'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
4. The ng-app Directive
> defines the root element of an AngularJS application
> will auto-bootstrap (automatically initalize) the application when a web page is loaded.
5. The ng-init Directive
> defines initial values for an AngularJS application
> Normally, will not use ng-int. will use a controller or module instead
6. The ng-model Directive
> binds the value of HTML controls (input, select, textarea) to application data.
> can provide type validation for application data (number, email, required)
> can provide status for application data (invalid, dirty, touched, error)
> can provide CSS classes for HTML elements
> can bind HTML elements to HTML forms
7. Create New Directives
> New directives are created by using .directive functions
<body ng-app="myApp">
<test-directive></test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("testDirective", function(){
return { template: "<h1>Made by a directive!</h1>" };
});
</script>
</body>
8. can invoke a directive by using....
> element name [E]
<test-directive></test-directive>
> attribute [A]
<div test-directive></div>
> class [C]
<div class="test-directive"></div>
> comment [M]
<!-- directive: test-directive -->
9. Restrictions
> you can restrict directives to only be invoked by some of the methods.
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});: E for Element name
: A for Attribute
: C for Class
: M for Comment
!! default -> EA
'IT' 카테고리의 다른 글
| AngularJS #7 - Data Binding (0) | 2021.12.21 |
|---|---|
| AngularJS #6 - ng-model Directive (0) | 2021.12.19 |
| AngularJS #4 - Modules (0) | 2021.12.18 |
| VS CODE 다운로드 (0) | 2021.01.28 |
| Node.js 다운로드 (0) | 2021.01.28 |