Step by Step AngularJS series - Part-I
This is a first part of Step-by-Step AngularJS series. In this series, we will discuss and learn AngularJS as per our ease.
In this series we will start with very basics and gradually go with few complex code/examples.
Step by Step AngularJS series - Part-IBackground
In these days, JavaScript framework are on the top. I was trying to dig my head into AngularJS an awesome JavaScript framework.Introduction
This is a first part of Step-by-Step AngularJS series. In this series, we will discuss and learn AngularJS as per our ease.
In this series we will start with very basics and gradually go with few complex code/examples.What is AngularJS?
AngularJS is a JavaScript framework and developed by Google and it is based on MVC framework like other frameworks eg. BackboneJS and EmberJS etc.
Most important it is an opensource. If you want to add some new exciting features you're welcomed to do so ?
It gives developers to highly structured approach to develop rich web applications.Where to/from get AngularJS
AngularJS can download as complete source code from https://angularjs.org/How AngularJs talks with web pages?
AngularJS reads HTML with additional tags, attributes which provides great interactions within pages.
This is very good for Single Page Apps (SPA).
This is a very first and basic part of our series, so, we are not getting into depth of this topic. For more details of these additional things just visit: https://docs.angularjs.org/api Create Simple AngularJS App
To start with AngularJS app creation, follow these step(s):Use AngularJS in web page
Add following code in your 'html', aspx or any other webpage:
<body>
<div class="jumbotron" ng-app>
<h1>A simple AngularJS Page</h1>
{{"This is a demo app"}}
</div>
</body>
In above snippet we added ng-app. This is nothing but a root element of our AngularJS page.
We can put this directive anywhere but mostly we put this with or . Here, we use this diective with
which makes it a root level container. The curly braces {} tells angular to compile the things.
Lets take a look into following snippet, where we just removed the ngApp directive:
<body>
<div class="jumbotron">
<h1>A simple AngularJS Page</h1>
{{"This is a demo app"}}
{{3}} + {{7}} = {{3+7}}
</div>
</body>
In above, contents with {{}} are not executed.
Now, lets re-write above code using ng-app
<body>
<div class="jumbotron" ng-app>
<h1>A simple AngularJS Page</h1>
{{"This is a demo app"}}
{{3}} + {{7}} = {{3+7}}
</div>
</body>
Now it will give us the desired output.
Here, is the complete code-snippet:
<html >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lets start learning AngularJS step-by-step</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/angular.min.js"> </script>
<script src="js/app/myapp.js"> </script>
</head>
<body>
<div class="jumbotron" ng-app="MyApp">
<div ng-controller="MyCtrl">
<h3>List of authors</h3>
<ul ng-repeat="author in authors">
<li>{{author}}</li> </ul>
</div>
</div>
</body>
</html>Closing notes
In this part we learned basics of AngularJS, by rendering simply contents with the use of AngularJs.
In coming parts, we will see more advance stuffs with more examples.
A complete source code of simple angular stuffs is available here: Simple AngularJS