AngularJS Introduction

By

What is AngularJS?

AngularJs is Javascript Framework not a Javascript library written in Javascript.

Who owns it?

It is available as Open Source and maintained by Google Community. It is mostly being used to create Single Page Application Development.

Architecture:

The architecture is based on MVW (model-view-W stands for whatever).

How to add it to our webpage:

It is distributed as javascript file and can be added to webpage using a script tag like:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Or you can download in your project directory and reference from there.

Latest version:

1.5.x

Prerequisite Knowledge

1) HTML – Hyper Text Markup Language
2) Javascript
3) CSS – Cascading Style Sheet

Setup Requirements

1) Add <script> reference of AngularJS library like below
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
OR
<script src="angular.js"></script>
2) ng-app: This attribute initialize or tell browser that angular is available on this page or
In another word: A page with attribute define that this page has angular in it.
Placement of ng-app: If we put it on <body> then we have a smaller scope for AngularJS which will be slightly faster. But if we use ng-app on the  <html> then we can manipulate the  <title> tag as well
So the basic html can look like:
Introduction of AngularJS Example:
<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>LearnKode - Angular JS Introduction example</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController" >
    <h2>{{title}}</h2> 
  </div>
<script> 
  var app = angular.module("sampleApplication", []); 
  app.controller("sampleController", function($scope) { 
     $scope.title = "Finally, you created a Hello world page!"; 
  }); 
</script>     
</body>
</html>

Output

Finally, you created a Hello world page!

No comments:

Post a Comment