✔ AngularJS Modules
> defines an application
> container for the differenct parts of an application
> container for the application controllers [ controllers always belong to a module]
<div ng-app="myApp"> </div>
<script>
var app = angular.module("myApp", []);
</script>
1. adding Controller
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
2. adding Directive
> AngularJS has a set of built-in directives which you can use to add functionally to application.
<div ng-app="myApp" test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("testDirective", function(){
return {template: "I was made in a directive constructor!"};
});
</script>
3. modules and controllers in files
> it's common in AngularJS application to put hte module and the controllers in .js files
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>myApp.js
> without '[ ]' parameter, you are not creating a new module, but retrieving existing one.
var app = angular.module("myApp", []);myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstNmae = "John";
$scope.lastName = "Doe";
});
!! when to load the Library
> it is common in HTML application to place scripts at the end of the <body>
But! in AngularJS it is recommened to load library in the <head> or at the start of the <body>
This is because calls to angular.module can only be compiled after the library has benn loaded.
'IT' 카테고리의 다른 글
| AngularJS #6 - ng-model Directive (0) | 2021.12.19 |
|---|---|
| AngularJS #5 - Directives (0) | 2021.12.18 |
| VS CODE 다운로드 (0) | 2021.01.28 |
| Node.js 다운로드 (0) | 2021.01.28 |
| Tibero 오류 메세지 참고 파일 (0) | 2020.11.19 |