AngularJS is a java script framework developed by google. It is a library written in JavaScript. AngularJS extends HTML directives and binds data with HTML expressions.
AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA (Rich Internet Applications) application into models, views and controllers.
View - The views are specified using HTML + AngularJS's own template language.
Models and Controllers - The models and controllers are specified via JavaScript objects and JavaScript functions.
Thus, the views are specified declaratively, as HTML normally is, and the models and controllers are specified imperatively, as JavaScript normally is.
If you don't know the difference between declarative and imperative programming, don't worry. It is not important to know before learning AngularJS. Besides, it is pretty simple to find the definition on the web.
The MVC model is an example of what computer scientists and developers call a design pattern. It’s not a concept specific to Angular, but rather an approach to program architecture which has been implemented successfully across a variety of programming languages and environments, and which has been found to yield some good practical efficiencies as a time-tested design.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Second, we need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS:
AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA (Rich Internet Applications) application into models, views and controllers.
View - The views are specified using HTML + AngularJS's own template language.
Models and Controllers - The models and controllers are specified via JavaScript objects and JavaScript functions.
Thus, the views are specified declaratively, as HTML normally is, and the models and controllers are specified imperatively, as JavaScript normally is.
If you don't know the difference between declarative and imperative programming, don't worry. It is not important to know before learning AngularJS. Besides, it is pretty simple to find the definition on the web.
The MVC model is an example of what computer scientists and developers call a design pattern. It’s not a concept specific to Angular, but rather an approach to program architecture which has been implemented successfully across a variety of programming languages and environments, and which has been found to yield some good practical efficiencies as a time-tested design.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
NOTE : - It is a good idea to place scripts at the bottom of the body element.This improves page loading, because HTML loading is not blocked by scripts loading.
AngularJS Hello World Example :
AngularJS applications are a mix of HTML and JavaScript (as you have already seen) so the first thing we need is an HTML page :<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Second, we need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
Third, we need to tell AngularJS what part of our HTML page contains the AngularJS app. You do so by adding the ng-app attribute to the root HTML element of the AngularJS app. Typically, the root element is either the html element or thebody element. In this example I insert the ng-app attribute into the body element:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
</body>
</html>
Fourth, we need a view. A view is a section of HTML which is enclosed in an HTML element. Here is an example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2> Hello {{helloTo.title}} !</h2>
</div>
</body>
</html>
Fifth, we need a controller function. A controller function is a normal JavaScript function which takes a single parameter: The $scope parameter. The $scope parameter is the model object to be used by the controller function and the corresponding view. The controller function can insert data and functions into the model object. The view can then use the data and the functions.
Here is our little web app with the controller function inserted:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2> Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS"; });
</script>
</body>
</html>
The controller function is registered in angular via the angular.module(...).controller(...) function call.
The angular object is a global object created by the AngularJS JavaScript which is included at the beginning of the page.
Notice the first of the parameters to the angular.module()function call. The value of that parameter is
"myapp". This name matches the name specified in the ng-app attribute in the body element. This way AngularJS knows that the controller function being registered belongs to the myapp module, which happens to be the module which this AngularJS application is using (specified in the ng-app attribute in the body element).
The controller() function call is what registers the controller function itself. The first parameter passed to the controller() function is the name of the controller function. This is the name you refer to in the ng-controller attribute of the view. The second parameter is the controller function itself.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
</body>
</html>
Fourth, we need a view. A view is a section of HTML which is enclosed in an HTML element. Here is an example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2> Hello {{helloTo.title}} !</h2>
</div>
</body>
</html>
Fifth, we need a controller function. A controller function is a normal JavaScript function which takes a single parameter: The $scope parameter. The $scope parameter is the model object to be used by the controller function and the corresponding view. The controller function can insert data and functions into the model object. The view can then use the data and the functions.
Here is our little web app with the controller function inserted:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2> Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS"; });
</script>
</body>
</html>
The controller function is registered in angular via the angular.module(...).controller(...) function call.
The angular object is a global object created by the AngularJS JavaScript which is included at the beginning of the page.
Notice the first of the parameters to the angular.module()function call. The value of that parameter is
"myapp". This name matches the name specified in the ng-app attribute in the body element. This way AngularJS knows that the controller function being registered belongs to the myapp module, which happens to be the module which this AngularJS application is using (specified in the ng-app attribute in the body element).
The controller() function call is what registers the controller function itself. The first parameter passed to the controller() function is the name of the controller function. This is the name you refer to in the ng-controller attribute of the view. The second parameter is the controller function itself.
Blogger Comment
Facebook Comment