{"id":12212,"date":"2016-05-02T12:11:48","date_gmt":"2016-05-02T09:11:48","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=12212"},"modified":"2016-04-28T09:57:44","modified_gmt":"2016-04-28T06:57:44","slug":"blind-date-angularjs","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/blind-date-angularjs\/","title":{"rendered":"Blind Date with AngularJS"},"content":{"rendered":"

Are you starting to work on a new application that is using AngularJS? You have heard of it before and would like to know more about it? And have no idea where to start?<\/p>\n

You are in luck! Continue reading this blog and start learning this hot thing called Angular!<\/p>\n

AngularJS<\/a> is a JavaScript MVC framework that has some compelling features for not only developers, but designers as well! It is great for building complex client-side applications.<\/p>\n

In this blog, I will talk about the most essential features and how they can help make your next web app awesome.<\/p>\n

MVC<\/h2>\n

The Model-View-Controller<\/code> pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to M-V-VM<\/code> (Model-View-ViewModel).<\/p>\n

The model is simply the data in the application (JavaScript objects). There is no need to inherit from framework classes, etc. The fact that we are dealing with vanilla JavaScript is a really nice feature, which cuts down on the application boilerplate.<\/p>\n

The view is the HTML that exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings. The $scope<\/code> has a reference to the data, the controller defines behavior, and the view handles the layout.<\/p>\n

A viewmodel<\/code> is that $scope<\/code> object that lives in the application, which is pretty much the center of any Angular code. It provides specific data and methods to maintain specific views. It is just a simple JS object with a small API which was designed any changes to its state.<\/p>\n

Let\u2019s take this thing apart!<\/h2>\n

Now I would like to break the whole thing down and share my thought process on how I look at Angular. I look at this whole process as a person (me) putting books on the bookshelf. My hands are ultimately the JS code, the brains behind the whole operation. And the books are the objects.<\/p>\n

The bookshelf is going to represent the HTML code that we write according to our needs. It can be 10-20 feet tall, 5-10 feet wide, contain 5, 10 or even 20 shelves, and be green, blue, or whatever color you want it to be. This is where Angular\u2019s ng-directives, data binding and expressions come to play.<\/p>\n

Expressions<\/h4>\n
<div>Sum of 1+1 is: {{1+1}} <\/div><\/pre>\n
One of the first things a developer writes in Angular, other than the ng-app directive<\/code>, is an expression. This is easily identified as the code written inside of a binding {{ }} or directive.<\/p>\n
Back to our bookshelf. Expressions will help you title the books on the shelf. So if you have an object called \u2018book\u2019 with properties like \u2018author\u2019 and \u2018title\u2019, you can populate a div just like this:<\/p>\n
<div id='shelfNumber3'>{{book.author}}, {{book.title}}<\/div><\/pre>\n
Ng-directives<\/h4>\n
Directives are the most important components of any AngularJS application. It is something that introduces new syntax. Directives are markers on a DOM element which attach a special behavior to it.<\/p>\n
For example, static HTML does not know how to create and display a date picker widget. To teach HTML this new syntax, we need a directive. The directive will somehow create an element that behaves like a date picker. We will see how this is achieved subsequently.<\/p>\n
If you have written an Angular application before, then you have used directives, whether you realized it or not. You might have used simple directives like ng-model<\/code>, ng-repeat<\/code>, ng-show<\/code>, etc.<\/p>\n
All these directives attach special behavior to DOM elements. For example, ng-repeat<\/code> repeats a specific element and ng-show<\/code> conditionally shows an element. If you want to make an element draggable\/droppable, then you might create a directive for that too.<\/p>\n
The basic idea behind directive is very simple. It makes your HTML truly interactive by attaching event listeners to the elements and\/or transforming the DOM.<\/p>\n
Data Binding<\/h4>\n
Data binding is the most useful and powerful feature among any of the existing or upcoming software development technologies. It is actually a process that bridges a connection between the view and business logic of the application.<\/p>\n
AngularJS provides some predefined data binding directives which are as follows:<\/p>\n