The objective of “How to Learn and Master Angular easily – Part1” tutorial series is to easily master the basics of Angular and understand the foundation.
The initial inception of the Front End Java Script Frameworks have been almost over and we have few frameworks that most of the big corporations are evaluating for a full scale implementation. The challenge now is how to adapt this new concept and train mass resources to be more productive.
The industry went through very similar adaptation with the advent of Java or HTML. Now we are dealing with Angular, Ember, Backbone, React and many similar frameworks.
“Google” being there behind Angular JS has immensely helped it to become one of the most popular one. While there are many books, videos and tutorials are available on Angular JS many developers are still facing challenges to learn Angular in an efficient way.
I have seen developers facing challenges to grasp Angular JS. There are though few reasons:
- Concept wise Angular is very different than JQuery, Dojo, ExtJS or similar library available in the market.
- It’s very easy to start with Angular on simple tasks however it gets complicated when you are trying to finish a complete production ready application in Angular. The learning curve is not smooth, means in order to get started you really need to read at least 80%-90% of a book or tutorial. Learning AngularJS is not like JQuery or ExtJS where you can read two chapters and get some coding completed.
- Directives are complicated to understand for entry-intermediate level programmers.
- In case you are not a hands-on person on HTML5, CSS3 and JavaScript and coming from a Spring MVC, JSF, Struts, ASP background you may face challenges on understanding Angular.
I don’t want this to be just another tutorial for AngularJS. I want to address the challenges most of the developers are facing and help them learn Angular in a much faster and efficient way.
Before we get started, here are few important direction I am going to follow in this series, so that anyone can become familiar with Angular in a fast and efficient way.
- Don’t try to learn everything at once.
- I will not be talking about directive at all in this first series (find more on this below ).
- Learn by example. Our objective will be to create an application and understand the concept of Angular.
- Understand the HTML on which we are going to add the Angular code.
I am not going to talk about how to create Angular directive
in this series, since custom directives are the most complicated concept to understand and beginners shouldn’t worry about it while starting.I have been working on real time production application for one of the largest corporation and based on my experience, directive is something not used in a daily basis, it should be learned once you have understood everything else about AngularJS. I will talk about directive, security, build tools etc in the next series.
Learn by example is a very efficient way of mastering any topic; we will also follow the same. We will develop a TaskTracker application in Angular by end of the series.
In order to focus more on Angular JS, rather on HTML/CSS, I have already created the HTML & CSS required for this tutorial.I would recommend you to download the “chapter 1” from the github repository and follow along.
Here are the screen prints below. You will see the list of labels at the left side. The right side content area will display the list of task associated with the Label. It’s basically a ToDo Application.
A new task can be added by clicking on the New Task button.
You can create a label by clicking on the create Label button.
You can find the code in the following location:
https://github.com/adeveloperdiary/angular-for-web-developers/tree/master/chapter1
Note: The HTML is not fully responsive. I didn’t want to spend too much time on that since responsiveness is not something we want to achieve here.
Project File Structure:
Here is the project file structure. We will be using bootstrap, however you don’t need to know bootstrap.
I have the js libraries JQuery & Bootstrap inside the js folder. The style.css has all the custom css. Once you have downloaded the source, go ahead and open the index.html in Chrome.
Note: I will be using Chrome developer tools throughout this series.I suggest you the same.
Structure of the HTML:
As of now there are 3 HTML files – index.html
, createTask.html
, createLabel.html
, all of them have the same structure. Each for one dynamic content. So even if now we have 3 static html files, we will end up having one base index.html and we will use angular to dynamically replace contents inside the #page-body
.
NOTE: I have omitted some of the css classes here in the pseudo code below so that you can understand easily. Please refer the github repository for the actual content.
The #wrapper
is the parent div which has two sections, the #sidebar-wrapper
and #page-content-wrapper
. The #sidebar-wrapper
is for showing the left side menu and the #page-content-wrapper
is for the right side content & header.
<div id="wrapper"> <div id="sidebar-wrapper"> </div> <div id="page-content-wrapper"> </div> </div>
The #sidebar-wrapper
has a ul
to display the left side menu list. The header on the top of our Task Tracker application is not one div, the logo and name is actually the first li
element of the ul
element.
<div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li>Logo + App Name</li> <li>Inbox</li> <li>All Tasks</li> </ul> </div>
The #page-content-wrapper
has two sections, #page-header
& #page-body
. The #page-header
has a bootstrap panel component to display the right section of the application header which includes Filter
& New Label
button.
<div id="page-content-wrapper"> <div class="panel" id="page-header"> <div class="panel-body"> </div> </div> <div id="page-body"> </div> </div>
The #page-body
has another bootstrap panel which holds the dynamic contents like the Task Lists, New Task Creation etc. We have a custom panel header inside the #panel-body
, we will not be using bootstrap panel header here.
<div id="page-body"> <div class="panel panel-default"> <div class="panel-body"> <div class="panel-top-header"> </div> <!-- Panel Content Start --> <!-- Panel Content End --> </div> </div> </div>
It is very important to understand the structure of the HTML since we will be making many changes on top of this.
Tips: I strongly recommend to use a proper IDE than notepad or eclipse. You can use brackets.io
,this is open source and works on both windows and mac.
We will create a Single Page Application ( SPA ) using these 3 html templates in Angular. All the contents including the html templates will be loaded asynchronously. Once the index.html has been loaded, it will load Angular JS and other libraries, which will then bootstrap the application and load all required components asynchronously from the server whenever required.
You don’t have to name the initial page as index.html, you can name anything like app.jsp or app.asp.
In Part 2 we will start with Angular architecture and then change the HTML pages to make an application.
Leave a Reply