Introduction
This is a step-by-step learning series of tutorials. In this we will start from the very basic and slowly reach the expert level. This series contains small demo examples.
In this very first series, we will learn a few basic terms of AngularJS.
AngularJS
So, AngularJS is a JavaScript framework developed by Google based on the MVC framework like other frameworks. Example: BackboneJS and EmberJS and so on. Most important is that it is open source. If you want to add some new exciting features you're welcome to do so.
It gives developers a highly structured approach to develop rich web applications.
Whom this tutorial is for
For all who want to get started with this great framework and want to learn.
Where to get AngularJS
You can download the AngularJS complete source code from: https://angularjs.org/.
How AngularJS interacts with web pages
AngularJS reads HTML with additional tags and attributes that provide great interactions within pages. This is very good for Single Page Apps (SPA). For more details of these additional things just visit: AngularJS API Docs.
Let's start with a simple AngularJS App
Here we will discuss AngularJS by creating a simple Web project. Use the following procedure:
- Download AngularJS from: https://angularjs.org/.
- Download Bootstrap from: Download Bootstrap.
- Create a view (for convenience I used a simple HTML page).
- Create a Service and Controller using JavaScript.
Here is the folder structure
![index]()
We will discuss complex code later in this tutorial.
How to use AngularJS in a page
After following all the preceding procedure, we just need to let our web page know about AngularJS.
![use AngularJS]()
In the preceding 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 the <html> or <body>. Here, we use this directive with a <div> that makes it a root level container. The curly braces {} tells angular to compile the things. The output of the preceding will be as:
![sample angularJS]()
Let's have a look into the following snippet, where we just removed the ngApp directive:
![code]()
What will be the output of this? Yes, you are right; angular will not compile the things within curly braces {}. It will produce the following:
![anjularJS page]()
Let's add ngAPP back to the above snippet.
![jumbotron]()
It will produce the following:
![demo app]()
The following is the complete code:
![complete code]()
Getting user input
AngularJS provides us many great directives and one of these is ng-model. This is a magic directive, it get the input and bind it to its own expression.
Let's discuss the following snippet:
![course]()
Here, we are telling AngularJS that "course" is bound with the input box and the ohter things will be taken care of by AngularJS, it will automatically assign the values of Input to "course". It will work as:
![new cource]()
Whatever you enter, it will display immediately.
Working depending on user input
The most useful and great directive is ng-click. See the following snippet:
![Working as per user input]()
Here we defined “MyApp” and a controller “MyCtrl”. “ng-click” triggers the “show()” function and produces output as:
![MyApp]()
Take the following snippet and understand how it works:
![function]()
In the above, we defined $scope that is nothing but a container.
Using Services and Controllers
Let's think of a scenario where we need to separate our controller from its implementations, here we use a controller and services. See the following snippet:
![Services and Controllers]()
The following are the service/controller classes:
![controller classes]()
Here is the output:
![list of authors]()
Conclusion
In this tutorial we learned the basics of AngularJS, what the basic directives are and how to create a simple web page.
In future tutorials, we will see more advanced stuff with more examples. A complete source code of the simple angular stuff is available here: https://github.com/garora/angularjsstuff/tree/master/simpleangularjs.