MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to AngularJS - OpenSource JavaScript Framework

In this article we will cover AngularJS at a glance, this article is not intended to be technically detail but to give you an overview of how powerful Angular is from the small pieces of its features.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction

Recent years was a bright year for javascript developers, many javascript frameworks were born. And each of the frameworks has their own temptation which attracts numbers of developers to be their fans. I'm sure you've ever heard about EmberJS, KnockoutJS, or BackboneJS, these are good javascript frameworks to choose. With the advent of these frameworks, it can be quite a pain for developers to choose one suitable framework. Today I will introduce you to another javascript framework, which is AngularJS. I'm pretty sure this one could end your searching for great javascript framework for your front-end. Let's take a look.

AngularJS Logo

Figure 1: AngularJS Logo

What is Angular ?

Angular claims itself as superheroic javascript framework, well it's not a verbiage. Angular enhances HTML for web apps. It has functionalities to ease the process of developing web apps. Think many years ago, when HTML had just been born, it was intended to build website or I can say a way to display static document, not to build a dynamic web apps. Now, imagine if HTML were first intended to build dynamic web apps, that is Angular. Angular is what HTML would have been if it were designed to build web apps. Don't worry if you still wondering with this explanation, read on, you will amaze at what Angular can do and will understand what I mean.

Why Angular ?

Before dig deeper to Angular features, I want to let you know that Angular is brought to you by Google. Why is this important to know? As you might guess, Google has talented and genius developers as their team. They really know the subtleties of web and web applications development. At least this fact can give you assurance Angular comes from the right people you can trust. Also, if you've ever used Google product think Gmail or Google Plus, don't you amaze with their interactivity and also seamlessly ajax everywhere without refreshing the whole page. You can imagine that you can achieve that experience in your app using Angular, way easier than using any other frameworks.

What do I need to know before learning Angular?

A strong understanding of basic javascript will be required to use Angular. If you feel that you're beginner, keep going, Angular is not necessarily for advanced developers, but you will be dealing with a lot of objects so you have to be familiar with object oriented paradigm in javascript. After all Angular built to make development easier so you need not to worry.

What makes Angular special.

Two way data-binding

Two way data-binding in Angular is ability to change object's property value, at the same time the UI reflects that change, and viceversa. For example if you have an object's property called 'Page.title', every time 'Page.title' value changes, the UI should automatically updates and display the new value of 'Page.title'. And if you have some input in your app UI, it can update the UI and object's property as well. All of this are handled by Angular so you don't need to write manually like in some other javascript frameworks. What we do is simply defining our model, and now whenever a model is changed, it will change anywhere it is placed, be it in actual object or in the presentation layer. The model in Angular is just a plain old javascript, nothing fancy but it's as useful as you might expect.

Listing 1: Example code

// index.html
… 
      <input type="text" ng-model="greeting" /><br/>
      <span>{{greeting}}</span>
… 

// script
… 
<script>
// define controller
app.controller('AppCtrl', function($scope){
    $scope.greeting = "";
  });
</script>
… 

In Listing 1, we use a model called “greeting” and put that to our input box using angular built-in directive 'ng-model' which is a way to specify which model to use. And then we write an expression inside a span tag {{greeting}}, it's just a pointer to the model name. In the javascript we define a controller and define a model “$scope.greeting” with empty value. Now everytime we type in the input box, it will update the model is currently used by that input and will also update to span text below. I have included the example that you can download to see it in action.

Directives

This feature is probably what makes a huge different gap between Angular and any other javascript frameworks. Directives refers to a feature to extends the vocabulary of HTML, it also can be seen as a way to teach your browser new tricks. We know about semantics markup in HTML5, for example is header, which is to represent a header but it’s just static element. Although HTML might have many tags, it just not enough powerful to create a beautiful web apps. With directive feature, we can create new HTML vocabulary that the browser will understand what it means and what it should do. For example with Angular we can create tag like this <draggable>drag me</draggable>. The text inside draggable tag should now become draggable in our browser, what we should do therefore is to write our draggable directives definition inside our Angular apps. It's just a very simple example of Angular directives, it can do a lot of more useful stuff. And it's not limited to only an html element but also available to be implemented in attributes, classes or html comments. Directives in Angular are different from HTML built-in directives in way they can do more dynamic behaviour.

Listing 2: Simple Directive

// index.html
… 
<wow></wow>
… 

// script
<script>

app.directive('wow', function(){
  return {
    restrict: "E",
    template: "Hello I come from a directive"
  };
});
</script>

As you can see we put wow directive, <wow></wow>. What is that? HTML5 don't have such element, yes, but don't worry, the browser will understand what it mean and what it should behave. The thing we have to do is to define how that wow directive will behave, we do it by creating directive in our javascript. See the script part of listing 2, I don't explain technically in this article because we will cover it in the next article. This article is aimed that you know what Angular can do.

HTML Templates

Many javascript frameworks need a template engine as their template, but Angular template is just an html, extended. Let me show you an example.

Listing 3: Angular template

…
<ul ng-repeat=”phone in phones”>
	<li>{{phone.name}}</li>
</ul>
… 

Above code is an example of Angular template, it contains of common html element extended with expression (that curly brackets things). In that code ng-repeat is a built in Angular directives which tells the browser to loop over 'phones' object and assign each value to 'phone' (phone in phones). And the expression {{phone.name}} will display the name property of each phone. This simple templates can do more, if you add new phone to phones collection, the UI will automatically gets updated, bringing the new phone you just added to display, automatically.

Dependency injection

Dependency injection makes Angular app more easier to develop, we can organize our code into modules. By this, we can create reusable components which can be called later whenever required. This idea is good especially when our app gets larger and needs to be scalable, easily maintainable and testable. Dependency injection is a way to inject our piece of code to another piece of code, this requires you to divide your code to separate functionality like services, controller, or provider but not limited to those. Consider the following example.

Listing 4: Dependency Injection Example

<script>
// define controller
app.controller('AppCtrl', function($scope){
    $scope.greeting = "";
  });
</script>

Here in listing 4 I borrow the code from listing 1, I want to show you how Dependency Injection looks like. If you read the above code you will find $scope. When we are creating a controller that is 'AppCtrl' we require a $scope, so we inject it before we use in the controller. After it is injected, now we can use it like creating new model greeting '$scope.greeting'.

Okay, I think that's a small piece of what Angular can do. It's probably can give you an overview of Angular framework. Thank you.



A passionate and visionary web developer who falls in love with web technologies. Always excited to learn more, just like you.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login