11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/
Tuesday, April 26, 2016

What is $stateprovider/UI-Routing in angularJs?

The UI-Router is a directing system for AngularJS worked by the AngularUI group. It gives an alternate methodology than ngRoute in that it changes your application sees in light of condition of the application and not only the route URL.
For video lesson visit :- https://www.youtube.com/watch?v=sjDmmcARWCE&feature=em-subs_digest

 Differences between STATES and URL ROUTE:-
With this approach, your perspectives and routes aren't secured to the site URL. Along these lines, you can change the parts of your site utilizing your steering regardless of the possibility that the URL does not change. 

At the point when utilizing ngRoute, you'd need to utilize ngInclude or different techniques and this could get befuddling. Since the majority of your states, steering, and perspectives are taken care of in your one .config(), this would help when utilizing a top-down perspective of your application.

Step 1:- We will need a few files to add in our application:-
  1. index.html  // will hold the main template for our app 
  2. app.js  // our angular code
  3. partial-home.html  // home page code
 Step 2:- Create index.html in your application:-
<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
<!-- CSS (load bootstrap) -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <style>
 .navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
 <!-- apply our angular app to our site -->
<body ng-app="routerApp">
 <!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav"> <li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li> </ul> </nav>
 <!-- main content --> <div class="container">
 <!-- this area to inject code here.  -->
<div ui-view>
</div>
 </div>
</body>
 </html>

While making a link with UI-Router, you will utilize ui-sref. The href will be generated from this and you need this to indicate a specific condition of your application. These are made in your app.js. 
We likewise utilize <div ui-view></div> rather than ngRoute's <div ng-view></div>. 

 Step 3:- Create app.js in your application:-
//app.js
 var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider)
 { $urlRouterProvider.otherwise('/home');
 $stateProvider.state('home', { url: '/home', templateUrl: 'partial-home.html' }).state('about', { 
// we'll get to this in a bit
 }); });
Presently we have made the routerApp that we effectively connected to our body in the index.html document.
Here we have a .state() for home and for about. In home, we are utilizing the format document partial-home.html . 

 Step 4:- Create partial-home.html in your application:-
<!-- partial-home.html -->
 <div class="jumbotron text-center"> 
<h1>The Homey Page</h1> 
<p>This page demonstrates <span class="text-danger">nested</span> views.</p> </div>

Description:-You can use UI-routing for when use state based routing.UI-route is third party  library which more effective than ngroute. $stateprovider service help you to check state of application ,you can redirect on any other url without changing of url with ui-route withe the help of state and $stateprovider.
you don't need change anything in your application only config file.
for more details Please visit link:-http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/
Bikesh Srivastava AngularJs

What is $resource in angularjs?

$Resource:-
Most Single Page Applications include CRUD operations. On the off chance that you are building CRUD operations. utilizing AngularJS, then you can influence the force of the $resource administration. Based on the highest point of the $http service, Angular's $resource is an industrial facility that gives you a chance to communicate with RESTful backends effortlessly. Thus, how about we investigate $resource and use it to actualize CRUD operations. in Angular.

 Step 1:- You need to download a separate file called angular-resource.js and include it in your HTML page. The script can be downloaded from this cdn or use it.  http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js.

Step 2:-Inject ngResource in your module.
angular.module('mainApp',['ngResource']); //mainApp is our module
Step 3:- $resource expects a great RESTful backend. This implies you ought to have REST endpoints in the following format:-
REST Endpoints
Step 4:-How to $resource Work?
angular.module('myApp.services').factory('Entry', function($resource) { return $resource('/api/entries/:id'); // Note the full endpoint path});
The result of the function call is a resource class object which has the five methods by given below:-
  1. get()
  2. query()
  3. save()
  4. remove()
  5. delete()
Step 5:-Now, let’s see how we can use the get(), query(),save(),remove() and delete() methods in a angular controller:
angular.module('myApp.controllers',[]);
angular.module('myApp.controllers').controller('ResourceController',function($scope, Entry) 
{ 
var entry = Entry.get({ id: $scope.id }, function() { console.log(entry);
 }); 
// get() returns a single entry 
var entries = Entry.query(function() { console.log(entries);
 }); 
//query() returns all the entries. 
$scope.entry = new Entry(); 
//You can instantiate resource class. 
$scope.entry.data = 'some data';
 Entry.save($scope.entry, function() { 
//data saved. do something here. }); 
//saves an entry. Assuming $scope.entry is the Entry object 
});
For save:-
$scope.entry = new Entry(); //this object now has a $save() method $scope.entry.$save(function() { 
//data saved. $scope.entry is sent as the post body.
});
Description :- The get() capacity in the above piece issues a GET solicitation to/programming interface/passages/:id. The parameter :id in the URL is supplanted with $scope.id. You ought to likewise take note of that the capacity get() gives back a vacant article which is populated naturally when the genuine information originates from server. The second contention to get() is a callback which is executed when the information touches base from server. This is a valuable trap since you can set the void item returned by get() to the $scope and allude to it in the perspective. At the point when the real information arrives and the article is populated, the information restricting kicks in and your perspective is likewise overhauled.

 The capacity question() issues a GET solicitation to/programming interface/passages (notice there is no :id) and returns a vacant cluster. This exhibit is populated when the information touches base from server. Again you can set this cluster as a $scope model and allude to it in the perspective utilizing ng-rehash. You can likewise pass a callback to question() which is called once the information originates from server.
Bikesh Srivastava AngularJs

Life Is Complicated, But Now programmer Can Keep It Simple.