AngularJS

1. Introduction

AngularJS is a JavaScript framework which uses jqLite, which is a lighter version of jQuery. For full-fledged advanced features, one can make use of JQuery alongside the AngularJS. The reason behind JavaScript frameworks are –

1. Implementing JavaScript, and especially the Object Oriented JavaScript (OOJS) needs a command over JavaScript and a developer to undergo a learning curve.
2. The prime objective behind any framework, let go alone the JavaScript framework, is NOT to reinvent the wheel. That means, if a complex implementation needs to be used again and again, then the same needs to be made available in a way, which should make a developer’s life easy. After all we developers are also end users. It believes on do more by less code.
3. A developer needs to focus on building functionalities, focus on implementing business, and not on “how to”s.
4. Frameworks enables developers to faster implements.

2. Directives

Directives are HTML (preferably HTML5) attributes, which tells HTML tricks to do different things, when added them in HTML elements.

Notice at the top we have ng-app. Any time you see ng- that is an Angular directive. It’s a built-on directive. You can also write custom ones. You can get third party ones as well.

The ng-app directive is very important because the script that’s now loaded [at the bottom] is going to kick off and this will initialize the Angular app.

What ng-model does is behind the scenes it’s going to add a property up in the memory called “name” into what’s called “the scope”.

3. Creating Custom Directives

Follow below-mentioned snapshots –

4. Ng-repeat - Iterate through data

• Using ng-init, we have created a collection and
• Using ng-repeat, which is the built in directive for repeating each item from collection, we are repeating the
• for each item in collection.

And to show names in uppercase. The pipe [|] is a separator between the data binding statement and something called a filter  –

And for showing the index of available names in collection –

Showing the ordered list with the array of objects (json) –

Here an array of object was created which has multiple properties i.e. id and personName.

5. Filter in ng-repeat

In following snapshot, I have added an input field, which will accept the criteria for search. It has ng-model binding to “name”. And for actual searching, we have added the “filter:name” in the ng-repeat saperated by a pipe[|]. This does the job.

So the output after searching for “An” –

6. Order by clause in ng-repeat

In order to show data in the order of the specific property, add “orderBy” clause saperated by the pipe[|] in ng-repeat as shown below –

For order by “ID” –

For order by “personName” -

And for showing the “personName” in uppercase, you can write the “uppercase” pipe[|] saperated keyword  as shon below –

7. Controller

In Angular is you have a View, which is what we’ve been doing in the previous sections. But we don’t want to put all of our logic into the View because it’s not very maintainable or testable. Instead we’re going to have a special little JavaScript object – a container - called a Controller. The Controller will drive things.

The Scope - The glue between the View and the Controller is something called the Scope, and in Angular you’re going to see a lot of objects or variables that start with $. $scope represents the scope object.

The scope is the ViewModel – A Model for a View -

The view doesn’t have to know about the controller, and the controller definitely doesn’t want to know about the view. In fact you should be able to define a controller that you can bind to different views. Maybe you have a mobile view, you have a desktop view or whatever it may be. A ViewModel literally is the model – the data – for the view. Well that’s really all the scope is. The scope is our ViewModel and it’s the glue between the view and the controller.

In this above example, the controller is single, but getting used by 2 views. The view decides “HOW TO SHOW” things and controller decides “WHAT IS TO BE SHOWN”.

1. Another way of declaring controller

8. Modules

Modeuls in AngularJS are contriners.

Here the “demoApp” is the name of the module we are creating. The module specified in the array tells AngularJS to find out the module named: “helperModule” and inject the same here (dependency injection) and make logic specified in that module available in “demoApp”

See the working app snapshots below –

RHS is the output / result.

9. Two way binding of object model using Controller

So, when values from text boxes are changed, the first name and last name are changed. This is 2 way binding. Observe that the ng-controller attribute has been assigned to the parent div wherein text boxes and display div needs to be shown. There is a different treatment (of using alias) if we want to show the display div outside the parent div.

10. Controller with 2 functions linked with 2 buttons on the view

Outputs –

11. Moving controller in external file, typically in large applications

In larger applications, the controller code (in this case it is written in the “personController.js” file) can be written in external file, the reference of which can be added as shown in snapshot below –

12. Shorter, matured and more elegant way of declaring a controller

13. It’s all about $scope

If we consider an AngularJS application to consist of:

• View, which is the HTML.
• Model, which is the data available for the current view.
• Controller, which is the JavaScript function that makes/changes/removes/controls the data.

Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

14. Services

• AngularJS supports the concepts of "Separation of Concerns" using services architecture.
• Services are javascript functions and are responsible to do a specific tasks only.
• Controllers can call them as on requirement basis.
• Services are normally injected using dependency injection mechanism of AngularJS.
• AngularJS provides many inbuilt services for example, $http, $route, $window, $location etc. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data.
• Service may have many functions which can be called from functions defined in controllers.

Below are the snapshot for concatingating the first and last name and creating a full name out of it. The service also has the function of clearing full name,