Tutorial 1: Learn AngularJS from the Ground up

In AngularJS by Administrator7 Comments

Welcome to AngularJS tutorials. AngularJS is a client-side JavaScript application framework or web application framework that lets you extend HTML vocabulary for your application. AngularJS app is for experienced web developers with good understanding of core javaScript.This is first of many tutorials in learning AngularJS. I shall keep all angularjs tutorials simple, stay with Angular core topics, examples angularjs, tutorials will be straightforward to help you learn angularjs quickly and make your first single page application. I’ll provide you with app templates also. List of all tutorials is as follows:

Before beginning AngularJS tutorial series, here are answers to common questions about AngularJS

Q1. What you will cover in learning course of AngularJS tutorials ?

We will learn what angularJS framework is and how we can create simple page application faster and more efficiently. We’ll be building a complete angularjs app.We shall talk about MVC that typically forms the foundation of angularJS , how to divide project in modules and how to work with angularjs services (like http, route provider and animations).

Model View Controller(MVC) is pattern for implementing user interfaces. It divides an application into three interconnected parts– Model is your data, view is how your data is displayed in a template and controller which links Model and View together.

Q2. What you need to know before learning AngularJS application framework?

You should be familiar with how HTML works, JavaScript concepts, difference between JS and JSON. AngularJS is NOT for beginners because it is advance javaScript but if you have worked on online web projects then you must check it. Though app building with angularjs is fairly easy to learn.
To work with Angular you need to have a text-editor for this course I will be using Sublime Text Editor or you can use any other which suits you.

Q3. What is AngularJS app?

AngularJS is a JavaScript framework for creating single page web applications. Additional content will be loaded when needed in single page instead of going pages to pages. It is faster because your site will load only the content it needs. What is the difference between Ajax and angular? 

Framework implies that instead of writing code, you change the code according to standard rules defined by framework. This way you can take advantage of built-in functions such as template, data binding & filtrating etc.

Q4. Why use AngularJS app framework? Advantages.

  • It saves your time writing code.
  • It has template engine which lets you write special tags inside HTML which is then replaced by data to ease your workflow. For example tags in Angular looks like: {{prevItem}} , {{nextItem}} These are two angular tags wrapped around curly brackets. These tags will be converted into data.
  • Angular does not let you build templates separately. Templates are integral part of Angular which means you can also use Mustache.js or Handlebar.js with Angular.js
  • It has AJAX functionality for loading external data and it can easily load a JSON data.It automatically take care of DOM, means you don’t have to worry about user interactions and responses.
  • It uses MVC Architecture approach.

Q5. What are core features of AngularJS?

  • It uses directives or simply commands. You place directives inside your html tag. Directives tell angular to do its job. Angular directives start with “ ng- “ without inverted commas and then the name of operation. For Example: <div ng-view>hello Angular</div>(This example won’t work yet). 
  • It has data-binding which means you can easily bind input field or other tags with some other data seamlessly.For Example:
    If you have list of names like Hafiz, Faraz, Mukhtar and you enter Hafiz in input field then it will show you Hafiz only without any hassle.
  • It has filters that let you organize data.For Example:You can order data in ascending or descending order with just one keyword. We shall get into that in a moment.
  • Instead of writing gigantic JavaScript code you break your code into modules. Modules make your code easier to maintain. You can have multiple modules for multiple functionalities.
  • Its uses routes means when somebody puts /list in the URL, it will load that page. You can obviously have multiple routes. Advantage of routes is that your angular application will be functional for multiple URLs.
  • Controllers control where data is coming from and how to display that data using template to the end-user.
Next Tutorial

Share this Tutorial

  • Cyra Cyed

    nice effort

    • Hafiz Faraz Mukhtar

      Thanks. Keep visiting. Check out Lesson 2:

  • zia

    gr8 effort bro

  • raheel masood

    Love the way you describe the MVC of Angular JS. I was in a sense that there should be separate folders for Model Views and Controllers like other PHP MVC frameworks.

  • Pingback: Getting started with bootstrap tutorial - hfarazm()