AngularJS is a JavaScript framework you can use to build applications, but run in a web browser using HTML. The AngularJS framework started as a project inside of Google, but it’s now an open source project.
An Angular Application
There are only two requirements for adding AngularJS to a web page. Firstly, you need to add a <script> tag pointing to angular.js. Angular.js is the only script file that you need for the core Angular features, because Angular has no other dependencies on other libraries. This is the only script file we need, except for the script files that we might write for ourselves.
The second requirement is that you need to add an ng-app attribute somewhere in your HTML.ng-app. In Angular terminology, this is called a Directive, and it is just one of many Directives that Angular provides. The ng prefix is short for Angular. So whenever you see ng in your code or in documentation, or in a website name, or a bumper sticker, think Angular. ng-app is what we call the Application Directive. It is a special Directive that Angular looks for inside of your HTML, and if it finds it, Angular will bootstrap itself; so it initializes itself and it jumps into action to start managing the page.
Controllers
Controllers are one of the central pieces of the Angular framework, and in working with Angular, Controllers are in charge of an area of the application. With Angular, a Controller is in charge or responsible for building a model. A model contains the data we need to work with and a Controller will do whatever it needs to grab that data. So it might need to make some calculations or call back to a web server that talks to a database, whatever it takes.
In this blog, I will show you how to build a controller that is able to build a model, and then we will be able to use data binding to show that model in a view; the view is the HTML for our webpage.
It is good to use IFFE while writing any java scripts. Controllers take $Scope object and attach model to it.
Calling HTTP
When we’re writing code inside of a Controller, we usually don’t just make up our data, like we are doing with the person object in the last clip. We need to fetch data from our web server, and our web server might need to talk to a SQL database to send us back the data we need, or it might talk to a no-SQL database, or XML files on the server’s disk; we really don’t care. We just need data from that server, so we need a way to communicate with the server, and this is the job of the $http Service in Angular. HTTP is a service that Angular provides, and this service is just an object, an object with methods I can use to make HTTP calls.
Using $http
The API I want to use in my demo is the GitHub.com API, and I do this for three reasons; the GitHub.com API has three characteristics, which very few real APIs with real data have.
- the API is available to call from JavaScript in a browser.
- the response is in JSON format, which is easy to consume from JavaScript. In fact, Angular’s $http service will automatically convert a JSON response into a JavaScript object for me.
- the service does not require you or me to sign up and provide authentication credentials or some sort of client or application key, making it really easy to use.
If this blog was useful, don’t miss my next blog in which I will discuss in depth Directives and Routing in Angular JS.
