Environment setup- AngularJS

To build angular applications we need only one script file that is angular.js to get this script file visit http://www.angularjs.org.


Click on DOWNLOAD ANGULARJS button and a popup window will open as following 


From here you can download the AngularJS script file or you can use direct AngularJS CDN.

If you are .NET developer and you are developing a web application using visual studio and AngularJS in your project then you can use NuGet Manager to install AngularJS. You can also run the following commands on command window and angularJs will be install in you project.

pm> Install-Package angularjs
pm> Install-Package angularjs.route

In this tutorial I will use inline coding as following


<!doctype html>
<html>
  
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
  
   <body ng-app = "angularApp">
     
      <div ng-controller = "myController" >
         <h1>Welcome {{helloTo.title}} </h1>
      </div>
     
      <script>
         angular.module("  angularApp ", [])
        
         .controller("myController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "Welcome to angularjs tutorial powered by codefari.com!";
         });
      </script>
     
   </body>
</html>

Just copy and paste above code on html page and you will see the message Welcome to angularjs tutorial powered by codefari.com!

Benefits of AngularJS

Before going to start one question comes in our mind why AngularJS while many javascript framework is available in market so why should I chose AngularJS over those javascript frameworks that we already have.

  1. Dependency Injection is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
  2. Two way data bindings keeps the model and the view in sync at all times, that means a change to the model updates view automatically and similarly changed the view updates the model.
  3. Testing is area where angularJS really shine; AngularJS is designed with testing in mind right from the start. AngularJS is makes very easy to test any of its components both unit testing and end-to-end testing.
  4. Model View Controller with AngularJS is very easy to develop applications in a clean MVC way all you have  to do is split your application code into to MVC components that is the Model View Controller that is those managing MVC component and connection them together done by the angular automatically.
  5. Directives, Filters etc.. There are many befits like controlling the behavior of DOM elements using directive and the flexibility the angular filters provide.

AngularJS Introduction


AngularJS is the javascript framework that help to build web application introduced by Google, AngularJS is open source project which means it can be freely used, changed and shared by anyone. AngularJS is an excellent framework for building both single page applications and line of business applications. Many company is using angular today and there are many public facing website that a build with AngularJS.

This tutorial is build for software professionals who want to learn basic of AngularJS. This tutorial is containing programming concepts and easy steps with examples.

Your prior preparation

Before going to start this tutorial you have to basic knowledge of Javascript. In this tutorial I will give example to develop a website so html, css, ajax knowing will be helpful.
Subscribe to: Posts (Atom)