Make It Easy: 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

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