Click here to Skip to main content
15,042,397 members
Articles / Programming Languages / Javascript
Tip/Trick
Posted 16 Apr 2015

Stats

24.6K views
39 bookmarked

Learning AngularJs - Episode 1 of 15

Rate me:
Please Sign up or sign in to vote.
4.68/5 (19 votes)
16 Apr 2015CPOL3 min read
Learning AngularJs : Episode 1 of 15

Introduction

We'll cover the following topics in this post:

  • About Angular
  • Environment set-up
  • About code editors
  • Building blocks
  • Brief of DOM
  • Pre-requisites
  • Directives

What is AngularJs?

  • Popular new generation JavaScript libraries and framework
  • Developed by Miško Hevery and Adam Abrons in 2009
  • Powered by Google
  • Based on MV* / MVW (Model View Whatever) framework
  • Promotes a high productivity web development experience
  • Empowers traditional HTML
  • Helps to build SPA (Single Page Application)
  • Moreover an Open Source available on GitHub

Set-up the Framework

  • Download the library (offline version) from official website http://angularjs.org
    • direct download
    • using Package Manager
      • npm
      • bower
      • NuGet (if using Visual Studio)
  • Use Content Delivery Network (CDN) reference (online version)

Refer to the following image:

Image 1

Where to Write Code (Code Editors)?

  • Any text editor of your choice like:
    • Notepad, Notepad++ [Free]
    • Sublime, JetBrain WebStorm [Paid]
    • Visual Studio (my favorite)
  • Couple of online client side scripting tools (supporting AngularJs) are very popular like:
    • Plunker [http://plnkr.co/edit]
    • JSBin [http://jsbin.com/]
    • JSFiddle [ https://jsfiddle.net/]

That's it. You are done. The "angular.min.js" file itself is enough for getting started with AngularJs scripting.

The Building Blocks of AngularJs

Essentially, there are few building blocks that we must know. We'll discuss each element of building blocks in subsequent parts:

  • Directives
  • Filters
  • Templates
  • Modules
  • Controllers
  • Scope
  • Services
  • Factories
  • Routing
  • Dependency Injection
  • Validation

You shall be hearing about DOM throughout the AngularJs. I think this is the right time to know about DOM in short.

Document Object Model (DOM)

  • is a convention written by W3C
  • convention for HTML, XML and XHTML documents
  • used by internet browsers throughout the rendering process
  • More details can be found on W3C's official website...

Pre-requisites

Presumably, you know the JavaScript fundamentals, HTML, CSS (optional), AJAX (in certain cases) and JSON

I believe we must now have the basic understanding of Angular, hence should jump start the implementation... here we go...

Directive

  • An extension of the DOM elements (using predefined directives or custom directives)
  • Attaches new behavior to DOM when DOM is compiled by the compiler
  • Transform the DOM elements in object tree
  • Starts with prefix "ng-"

Some of the predefined most commonly used and popular directives are:

ng-app Root element for AngularJs app. Auto-bootstrap the application.
ng-init Initialize app data and evaluate an expression
ng-model Binds view into the model
ng-controller Attach controller class to view
and many more Will discuss in future posts

You are free to create custom directives on need basis for Angular to use.

You can use directives in four different ways like within tag as attribute, as CSS class name, as comment and as element but it is always advised using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.

Let's jump into the code...

Please note that I've used Visual Studio 2013 as an editor and AngularJs v1.3.15 as angular framework.

  1. The first thing is to add the AngularJs reference at the end before closing </body> tag.

    Image 2

  2. Mandatory action: Add the ng-app directive in any of the container tags like <body>, <div>, etc. but I have added it to <html> tag because this will be available to the entire page. This can be written as ng-app only besides of ng-app="". Also, any name could be specified in ng-app="...." but we'll discuss this when we start reading Modules in subsequent episodes.

    Image 3

  3. Main piece of code to be written under the <body> tag.

    Example A.

    Image 4

    Double opening and closing curly braces "{{ }}" ensures to execute angularjs script for you.

    Output

    Example: using expression

    The sum of numbers (5+8+2) is : 15.
    The sum of numbers (5+8+ -2) is : 11.

    Example B

    Image 5

    Output

    Example: using ng-init and ng-bind directives

    11 is more than 9

    There are 7 days in a week.

    Example C.

    Image 6

    Output

    Image 7

Complete Code

HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="">
<head>
    <title>Understanding Directives with Maitrey</title>

</head>
<body>
    <!--Directives in this example:
        ng-init, ng-bind, ng-app, ng-model etc.
    -->
<h2>Hello Readers!</h2>
<h5>Understanding Directives with Abhishek Maitrey</h5>

    <h4>Example: using expression</h4>
    <div>
        <span>The sum of numbers (5+8+2) is : {{5 + 8 + 2}}.</span><br/>
        <!--abnormal expression but valid-->
        <span>The sum of numbers (5+8+ -2) is : {{5 + 8+ -2}}.</span>
    </div>

    <h4>Example: using ng-init and ng-bind directives</h4>

    <!--variable 'total' is assigned a value '10' using ng-init directive-->
    <div ng-init="total = 10">
        <p>
            <!--used expression and ng-bind in same statement-->
            {{total + 1}} is more than <span ng-bind="total - 1"></span>
        </p>
    </div>

    <!--multiple variables (semi-colon; separated) can also be assigned -->
    <div ng-init="numberOfDays = 7; units = 'days'; collection = 'week'">
    <p>
        There are {{numberOfDays}} {{units}} in a <span ng-bind="collection"></span>.
    </p>
    </div>

    <h4>Example: using ng-model directives</h4>
    <!--Accepting input value in text box control and print with a message-->
    <div>
        Enter your name : <input type="text" ng-model="yourName"/>
        <p>Hi {{yourName}}! Thanks for reading this article.</p>
    </div>

<script src="../Scripts/angular.min.js"></script>

</body>
</html>

 

Episode 2: Click here

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhishek Maitrey
Technical Lead
India India
Project Manager in MNC. Having 12 years of corporate experience mostly in Microsoft Technologies. Developer by passion. A happy husband and father of two lovely kids.
Like writing, association of professionals, leadership, public speaking.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Rupesh Telang18-May-15 1:53
MemberRupesh Telang18-May-15 1:53 
GeneralRe: My vote of 5 Pin
Abhishek Maitrey19-Sep-15 0:10
MemberAbhishek Maitrey19-Sep-15 0:10 
GeneralMy vote of 4 Pin
Santhakumar Munuswamy @ Chennai9-May-15 8:37
professionalSanthakumar Munuswamy @ Chennai9-May-15 8:37 
GeneralRe: My vote of 4 Pin
Abhishek Maitrey11-May-15 23:17
MemberAbhishek Maitrey11-May-15 23:17 
GeneralRe: My vote of 4 Pin
Abhishek Maitrey19-Sep-15 0:10
MemberAbhishek Maitrey19-Sep-15 0:10 
SuggestionNice Article though a suggestion Pin
Rahul D.27-Apr-15 0:00
MemberRahul D.27-Apr-15 0:00 
GeneralRe: Nice Article though a suggestion Pin
Abhishek Maitrey28-Apr-15 6:44
MemberAbhishek Maitrey28-Apr-15 6:44 
QuestionNice work, Pin
Alan volk.cloud20-Apr-15 5:13
MemberAlan volk.cloud20-Apr-15 5:13 
AnswerRe: Nice work, Pin
Abhishek Maitrey20-Apr-15 17:24
MemberAbhishek Maitrey20-Apr-15 17:24 
QuestionSchedule of following episodes... Pin
Sean McPoland18-Apr-15 1:49
MemberSean McPoland18-Apr-15 1:49 
AnswerRe: Schedule of following episodes... Pin
Abhishek Maitrey18-Apr-15 19:54
MemberAbhishek Maitrey18-Apr-15 19:54 
GeneralRe: Schedule of following episodes... Pin
Sean McPoland18-Apr-15 19:56
MemberSean McPoland18-Apr-15 19:56 
GeneralRe: Schedule of following episodes... Pin
Abhishek Maitrey20-Apr-15 17:26
MemberAbhishek Maitrey20-Apr-15 17:26 
QuestionThis was a tip... Pin
OriginalGriff16-Apr-15 20:07
mveOriginalGriff16-Apr-15 20:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.