Main points about AngularJS
AngularJS is a JavaScript framework
AngularJS can be added to an HTML page with only aDirectives, while binds data to HTML with Expressions.
AngularJS a JavaScript Framework
AngularJS is a library written in JavaScript so AngularJS is a Javascript framework.
AngularJS can be added to any HTML webpage with the below CDN just like the Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
How AngularJS Extends HTML
AngularJS extends HTML using ng-directives.
Below are the basic 3(Three) ng-directives of AngularJS
- The ng-app directive which defines AngularJS application.
- The ng-model directive fixes the value of HTML controls such as input, select, textarea to application data.
- The ng-bind directive muddles application data to the HTML view.
AngularJS Basic Example
<!DOCTYPE html ng-app > <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <p>Fullname : <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </body> </html>
Explanation of example above
AngularJS CDN starts angularjs script automatically when the web page have been loaded.
The ng-app directive in the <html> tag communicates with AngularJS that the web page element is the “possessor” of the AngularJS application.
The ng-model directive muddles the value of the input field to the application variable name.
The ng-bind directive fixes the innerHTML of the <p> element to the application variable name.
Other Directives of AngularJS
Note: AngularJS directives are just HTML attributes which has an ng prefix.
The ng-init or data-ng-init directive as the name implies initializes AngularJS application variables.
AngularJS Example for ng-init
<section ng-app="" ng-init="fullName='pete'"> <p>The name is <span ng-bind="fullName"></span></p> </section>
Alternatively with valid HTML:
AngularJS Example for ng-init
<section data-ng-app="" data-ng-init="fullName='Pete'"> <p>The name is <span data-ng-bind="fullName"></span></p> </section>
Note: You can either write data-ng-, instead of ng-, both works on your page but the data-ng- makes your page HTML valid.
AngularJS Expressions
Double braces symbol: {{ expression }} encloses AngularJS expressions.
AngularJS outputs data accurately wherever the expression is written.
Example for the AngularJS Expressions
<!DOCTYPE html>
<html ng-app >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Expression: {{ 5 + 5 }}</p>
</body>
</html>
Most important is that AngularJS expressions fixes AngularJS data to HTML same method in which the ng-bind directive does.
Example AngularJS Expression
<!DOCTYPE html>
<html ng-app >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</body>
</html>
Applications in AngularJS
There are two(2) basic applications in AngularJS
- AngularJS modules which defines AngularJS applications.
- AngularJS controllers that controls AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.
Example for AngularJS Application
<section ng-app="Apps" ng-controller="sCtrl">
Surame: <input type="text" ng-model="surName"><br>
maiden name: <input type="text" ng-model="maidenName"><br>
<br>
Full Name: {{ surName + " " + maidenName}}
</section>
<script>
var app = angular.module('Apps', []);
app.controller('sCtrl', function($scope) {
$scope.surName= "Pete";
$scope.maidenName= "Didi";
});
</script>
Explanation of the example
AngularJS modules defines the application
AngularJS Module
var app = angular.module('Apps', []);
AngularJS controllers controls the application
AngularJS Controller
app.controller('sCtrl', function($scope) {
$scope.surName= "Pete";
$scope.maidenName= "Didi";
});
