Tuesday 25 February 2014

How to start with angular.js

Angular js is one of the best client side frame work and it is very easy to learn.AngularJS has zero dependencies (not even jQuery or Underscore).
I am going to explain here how to set up a basic single page application using angular js .

We can start with 7 files

  • index.html
  • login.html
  • subpage.html
  • header.html
  • footer.html
  • logincontroller.js
  • app.js

1 . Create html 5 page



<!DOCTYPE html>
<html id="ng-app" ng-app="sampleproject" 
  ng-controller="appcontroller">
 <head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="angular.js"></script>
 </head>
 
 <body>
 <-- Loading the header -->
  <div id="header" ng-include="'yourpath/header.html'"></div>
  <-- Other templates loads here -->
  <div id="content" ui-view=""></div>
  <-- Loading the Footer -->
  <div id="footer" ng-include="'yourpath/footer.html'"></div>
 
 </body>
 </html>

Header


<section>
 <h1>Header</h1>
</section>

Footer


<section>
 <h1>Footer</h1>
</section>

login.html


<section>
 <h2 ng-click="showotherPage();">Click here</h2>
</section>

subpage.html


<section>
 <h1>Welcome to the App</h1>
</section>

If you are planning to use Jquery along with angular include jquery before angular to prevent loading of jqlite.

2 . Create a Controller


Controller is a JavaScript constructor function that is used to augment the Angular scope. It usually communicate with views and factory file and also with directives ,filter etc .


angular.module('sampleproject').controller( 'LoginController',
function ($rootScope, $scope ,$location )
{
 console.log('login controller') ;
 
 $scope.showotherPage = function(){
  
  $location.path('/subpage');
 };
});

3 . Create app.js for specifying the path and respective controles


We are handling Path and particular controllers are in this file ,Mainly for handling multiple view concept .

You can use .when for simple multiple view concept.


var sampleproject = angular.module('sampleproject', 
   ['ngRoute']);
angular.module('sampleproject').config('$routeProvider',
function($routeProvider)
{

$routeProvider
.when('/login', {
  templateUrl: 'login.html',
  controller: 'loginController'
}),
.when('/subpage', {
  templateUrl: 'subpage.html',
  controller: 'subpageController'
}),
// For any unmatched url, redirect to /somepage
.otherwise({
   redirectTo: '/somepage'
 });

Now click on "clik here" link you can see subpage is rendering .You can include more files more controles like this.

If you are trying for a complex multiple view based application then you can try this.


"use strict";

var sampleproject = angular.module('sampleproject',
  ['ui.compat']);

angular.module('sampleproject').config(
function($stateProvider, $urlRouterProvider, $sceProvider)
{
 
// For any unmatched url, redirect to /somepage
$urlRouterProvider.otherwise("/main");

 $stateProvider
  .state('login', {
   url: ' ',
   controller: 'LoginController',
   templateUrl: 'login.html'
  }) ,
  .state('subpage', {
   url: '/subpage',
   controller: 'subpageController',
   templateUrl: 'app/subpage.html'
  });
});

For example : you have to achieve multiple view inside another view , then you can try the above method ( .state ) method

 
.state('mainview', {
 url: '/main',
 access: 1,
 views: {
  '@': {
   templateUrl: 'mainview.html',
   controller: 'MainviewController'
  },
  'subview1@mainview': {
   templateUrl: 'subview1.html',
   controller: 'subview1Controller'
  },
  'subview2@mainview': {
   templateUrl: 'subview2.html',
   controller: 'subview2Controller'
  },
 }
})


 
 <script src="js/angular-ui-router.min.js"></script>
 

For better understanding

 
 "use strict";

var sampleproject = angular.module('sampleproject',
  ['ui.compat']);

angular.module('sampleproject').config(
function($stateProvider, $urlRouterProvider, $sceProvider)
{
 
// For any unmatched url, redirect to /somepage
$urlRouterProvider.otherwise("/main");

 $stateProvider
  .state('login', {
   url: ' ',
   controller: 'LoginController',
   templateUrl: 'login.html'
  }) ,
  .state('subpage', {
   url: '/subpage',
   controller: 'subpageController',
   templateUrl: 'app/subpage.html'
  }),
//Splitting one view to further
 .state('mainview', {
 url: '/main',
 access: 1,
 views: {
  '@': {
   templateUrl: 'mainview.html',
   controller: 'MainviewController'
  },
  'subview1@mainview': {
   templateUrl: 'subview1.html',
   controller: 'subview1Controller'
  },
  'subview2@mainview': {
   templateUrl: 'subview2.html',
   controller: 'subview2Controller'
  },
 }
}),
.state('anotherpage', {
   url: '/anotherpage',
   controller: 'anotherpageController',
   templateUrl: 'anotherpage.html'
  })
});


You can try either of the above solutions

Related Posts

1.Communication between factory file and controller in Angular js

2. Communicate with controllers in angular js

3. Rating Stars using angular js Directive concept


12 comments :

  1. Its simple and understandable .thanks

    ReplyDelete
  2. Very helpful bro.. Thnx a lot... Good luck..

    ReplyDelete
  3. Very Helpful Bro.... Thanx a lot....

    ReplyDelete
  4. Need to improve

    ReplyDelete
  5. It’s a nice blog posted by you. I was seeking for this type of blog that have a fresh and interesting content. ROR Development Company

    ReplyDelete
  6. It's a nice post...many thanks ;)

    ReplyDelete
  7. It's a nice post...many thanks ;)

    ReplyDelete
  8. - - try the code.. got errors.
    Error: [ng:areq] Argument 'appcontroller' is not a function, got undefined
    ..... the angular lib not updated...

    ReplyDelete