Thursday, 27 April 2017

Angularjs Details

What is Angular JS ?

AngularJS is a MVC framework and powerful library  that enhances HTML by attaching directives to html pages with new attributes or tags and expressions in order to define very powerful templates directly.
(Extending HTML) Declare dynamic views in web-applications( SPA)Extend HTML vocabulary for web application.
Angular JS 1.3  - Faster , Easy and Powerful

Why Angular JS?
Magical two way data binding
Structure front end code -MVC (solid and testable code)
Routing support ( State based  and View based) – SPA
Templating done with HTML 5
Enhanced User Experience with  form validation
Teach HTML new  syntax with  directives ( say HTML 6)
Embeddable, testable (Jasmine)  and injectable (DI)
Embeddable à Angular with Require JS / jquery
Powered by Google and active community

Advantage of Angularjs
Great for SPA (Single-Page Applications)
Two Way data binding
Dependency Injection
Module and scope level Development which keep your code clean.
Localization
Structured way of coding and exted it by angular tags
In build and user defined  directive make code clean and help to perform task easily.


IDE for Angular JS
1.Textmate
2.Sublime Text
3.Aptana studio 3.0
4.Eclipse
5.Visual Studio 2012/2013  (for .Net Developers)
6.Jetbrains Webstorm 
7.Net Beans


Wednesday, 26 April 2017

Single page application in angularjs


Step by step approach for creating a single page application using angularjs.
1.       Lets take the Index.html  as the master page and rest of the pages are child page.
You need to include all the resource file reference to that page only.
For single page application you need to include  angular-route.min.js along with angular.min.js.

In below code snippet we included the bootstrap also to make the application responsive.


Code snippet :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />

    <title>Single Page Application</title>

    <!--Outside CSS and JS you need to download from respective source -->
    <!--<link href="Style/bootstrap.min.css" rel="stylesheet" />-->
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <!--<script src="scripts/jquery.min.js"></script>-->
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <!--<script src="scripts/route.js"></script>-->
    <script src="Scripts/angular-route.min.js"></script>
  

    <!-- Application using JS and CSS -->
    <script src="Scripts/application.js"></script>
    <link href="Content/Site.css" rel="stylesheet" />
    <!--<script src="Scripts/index.js"></script>-->
    <!--<script src="Scripts/application.js"></script>-->
    <script src="Scripts/application/Home.js"></script>
    <script src="Scripts/application/About.js"></script>
    <script src="Scripts/application/Contact.js"></script>
    <script src="Scripts/application/Events.js"></script>
    <script src="Scripts/application/Places.js"></script>
    <script src="Scripts/application/RathoreDetail.js"></script>
    <script src="Scripts/application/Gallary.js"></script>


</head>
<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid" >
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header" style="height:60px;" >
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img  width="50" src="images/rathore-rajput-logo-wallpapers.jpg" style="border: solid 2px #ebed5d"  /><!--Khatriya Rathore--></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" data-toggle="collapse" id="bs-example-navbar-collapse-1" style="font-size:18px;padding-top:10px">
                    <ul class="nav navbar-nav">
                        <!--<li><a href="#">Action</a></li>-->
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Home">Home</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#About">About</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#RathoreDetail">Rathore Detail</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Gallary">Gallary</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Events">Events</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Places">Places</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Contact">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main" >

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
       

</body>
</html>

2.       Code for making the route for application which is written in application.js.
See the below code snippet;

       
        .when('/About', {
            templateUrl: 'About.html',
            controller: 'About'
        })

TemplateUrl is the URL for page which you want to show.
Controller is the name of controller which you want to bind for that page.

Code Snippet

var app = angular.module('myApp', ['ngRoute']);

// configure our routes
app.config(function ($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'Home.html',
            controller: 'Home'
        })

        // route for the FixedDeposit page
        .when('/About', {
            templateUrl: 'About.html',
            controller: 'About'
        })

        // route for the Loan page

         .when('/Home', {
             templateUrl: 'Home.html',
             controller: 'Home'
         })

        
        .when('/Events', {
            templateUrl: 'Events.html',
            controller: 'Events'
        })

         
        .when('/Places', {
            templateUrl: 'Places.html',
            controller: 'Places'
        })

        .when('/Contact', {
            templateUrl: 'Contact.html',
            controller: 'Contact'
        })
         
        .when('/Gallary', {
            templateUrl: 'Gallary.html',
            controller: 'Gallary'
        })
        .otherwise({
            redirectTo: '/',
            templateUrl: 'Home.html',
            controller: 'Home'
        });
});


3.       How there is code in one page that how we will display the page


Below code snippet for controller it is for contact page
// Controller for Loan
app.controller('Contact', function ($scope) {
    $scope.message = 'Check the details about Loan.';
});



Below code snippet for HTML page
<div ng-controller="Contact">
    <div class="form-group">
        <div class="row">
            <div class="col-md-10 col-md-offset-1 headerText">
                Contacts
            </div>
        </div>
        <div class="row">

            <div class="col-md-1"> </div>
            <div class="col-md-10">
                You can see the list of contacts.
            </div>
            <div class="col-md-1"> </div>
        </div>

    </div>

</div>



Others

You will like to read it