So lets start diving into the world of AngularJS. Angular is a javascript based framework developed and supported by Google and famous for its wide support for SPAs.It basically follows an architecture known as a MVVM architecture owing to its 2-way binding between views and model. By 2-way binding, we mean that any change made on view is visible on model on real time (or so it seems) and vice-versa. This is obtained in angular by a set of $watch variables which continously look for any change to occur on any one of the model or view and reflect it into another.
To start all you need is to visit angularjs.org and download the latest version of angular available or you can directly include the following CDN in your scripts section. Don't forget to look for the latest CDN as the CDN might get update by the time you come across this tutorial.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
Once you have accomplished the above, the next step is to identify key factors in angular programming. Angular is a world of DOM manipulation, Directives, Services, Factories and many more. Don't worry for now, we will cover all that smoothly.
For now all you need to know is that every angular application is characterized by an ng-app attribute. This attribute tells the angular framework the scope for the angular use. ng-app is just a directive or take it as a regular HTML attribute for now, that needs to be defined at the start of angular application. This lays the foundation of angular application and is must for angular framework to work.
Defining Angular Application:
Defining ng-app is sweet and simple. We need to declare a name of our choice, which will then become the module for our application and all the angular goodies will thereafter work on this module. We can define an angular ng-app as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="myModule">
</body>
</html>
Kindly note that where you define ng-app is all up to you. But the scope of angular framework will be restricted to a particular portion wherever the ng-app is defined. For the entire page to use angular, it must be defined in page root. i.e <html> or <body> tag.
Angular model:
Angular model or ng-model is another attribute that can be assigned to almost any element in the view. Defining a model is again pretty simple. You go editing your DOM as follows:
<input type="text" ng-model="name"></input>
Angular Controller:
Next important thing in angular is controllers. These are responsible for the two way binding of angular and work as the means of taking data from views to model and vice versa. The scope of all models is limited by a particular controller in general. For now, we will keep it short and you can go with the complete example below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
angular.module("myModule", [])
.controller("myController", function($scope) {
$scope.name = "Change this text";
} );
</script>
</head>
<body ng-app="myModule">
<div ng-controller="myController" >
<input type="text" ng-model="name"></input>
<p ng-bind="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Go ahead, and type or edit something in the box and see the angular magic yourself. As you will notice both the <p> tags change, so both ng-bind and {{ }} are angular's way of binding model's data to the views.
Hope you got some taste of angular by now. In the next tutorial, we will understand controllers in deep.
To start all you need is to visit angularjs.org and download the latest version of angular available or you can directly include the following CDN in your scripts section. Don't forget to look for the latest CDN as the CDN might get update by the time you come across this tutorial.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
Once you have accomplished the above, the next step is to identify key factors in angular programming. Angular is a world of DOM manipulation, Directives, Services, Factories and many more. Don't worry for now, we will cover all that smoothly.
For now all you need to know is that every angular application is characterized by an ng-app attribute. This attribute tells the angular framework the scope for the angular use. ng-app is just a directive or take it as a regular HTML attribute for now, that needs to be defined at the start of angular application. This lays the foundation of angular application and is must for angular framework to work.
Defining Angular Application:
Defining ng-app is sweet and simple. We need to declare a name of our choice, which will then become the module for our application and all the angular goodies will thereafter work on this module. We can define an angular ng-app as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="myModule">
</body>
</html>
Kindly note that where you define ng-app is all up to you. But the scope of angular framework will be restricted to a particular portion wherever the ng-app is defined. For the entire page to use angular, it must be defined in page root. i.e <html> or <body> tag.
Angular model:
Angular model or ng-model is another attribute that can be assigned to almost any element in the view. Defining a model is again pretty simple. You go editing your DOM as follows:
<input type="text" ng-model="name"></input>
Angular Controller:
Next important thing in angular is controllers. These are responsible for the two way binding of angular and work as the means of taking data from views to model and vice versa. The scope of all models is limited by a particular controller in general. For now, we will keep it short and you can go with the complete example below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
angular.module("myModule", [])
.controller("myController", function($scope) {
$scope.name = "Change this text";
} );
</script>
</head>
<body ng-app="myModule">
<div ng-controller="myController" >
<input type="text" ng-model="name"></input>
<p ng-bind="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Go ahead, and type or edit something in the box and see the angular magic yourself. As you will notice both the <p> tags change, so both ng-bind and {{ }} are angular's way of binding model's data to the views.
Hope you got some taste of angular by now. In the next tutorial, we will understand controllers in deep.
No comments:
Post a Comment
Your valuable comments on this post are welcomed. Think something is missing, something is inappropriate or want to share something???
Please feel free to comment..