AngularJS ui-router tutorial

In this turorial 1. I will provide an introdutcion to ui-router 2. Where to get ui-router module from and including it, in an angular application What is ui-r outer The UI-Router is a third party routing framework for AngularJS. It provides everything that the ngRoute module provides plus many additional features. These additional features are very useful for larger applications. We will discuss some of these additional features with examples in our upcoming videos. ui-router implements routing based on the state of the application where as ngRoute implements routing based on the route URL. This means with ngRoute, views and routes are tied to the application URL where as with ui-router views and routes are not tied to the application URL, which means parts of the site can be changed even if the URL does not change. If this does not make sense at the moment, don't worry it will be clear in our upcoming videos in this series. Working with ui-router is similar to working with with ngRoute.  CDN link for ui-router : At the following link you can find both minified and non-minified versions ui-router module file https://cdnjs.com/libraries/angular-ui-router There are 3 simple steps to include ui-router in your angular application 1. Reference the ui-router CDN link 2. Add ui.router as module dependency 3. Add ui-view directive in the layout page In our next tutorial, we will discuss configuring states for the sample application that we have been working with.

Read More

AngularJS route resolve

In this tutorial we will discuss resolve property. Let us understand the use of this property with an example. This is continuation of our previous tutorial.  When we navigate to http://localhost/students, we see the list of student names. These names are coming from a database table. Since the database, the application and the client, all are running on my local machine the data loads really fast. If they are on different machines and if there is network latency, the data may take a few seconds to load. Let us introduce artificial network latency, by including the following line in GetAllStudents() web method in StudentService.asmx System.Threading.Thread.Sleep(2000); After this change. Refresh the application. Navigate to /home and then to /students. Notice the route changes to /students immediately but the students data takes at least 2 seconds to load. So let us understand what's happening here.  When we click on the Students link on the left, the route transition happens immediately, an instance of the students controller is created and the students view loads. By the time the view is loaded, the promise returned by the http service call to students service is not resolved. At the point when the promise is resolved, the data loads asynchronously and shows up in the view. Till then we will not see the students data on the students view. If your requirement is not to transition to the new route until all promises are resolved you can take advantage of the resolve property of the route. Here are the steps to use the resol ve property Step 1 : Modify /students route. Notice we are using resolve property with /students route. This ensures that the promise returned by the http call is resolved before transitioning to the new route /students. studentsList property specified in the resolve property will have the student data and can be injected into the students controller. .when("/students", {     templateUrl: "Templates/students.html",     controller: "studentsController",     controllerAs: "studentsCtrl",     resolve: {         studentslist: function ($http) {             return $http.get("StudentService.asmx/GetAllStudents")                     .then(function (response) {                         return response.data;                     })         }     } }) Step 2 : Modify the studentsController as shown below. Notice we are injecting studentslist property into students controller. This is the same property we used in resolve property in Step 1. studentslist property is then assigned as the value for students property on the view model (vm) object which the view expects. Since we already have the students data, there is no need to make another http call to the student service. Hence we deleted that http call from the students controller. .controller("studentsController", function (studentslist, $route, $location) {     var vm = this;     vm.studentSearch = function() {         if (vm.name)             $location.url("/studentsSearch/" + vm.name)         else             $location.url("/studentsSearch")     }     vm.reloadData = function () {         $route.reload();     }     vm.students = studentslist; }) With these 2 changes in place. Refresh the app. Navigate to /home and then to /students. Notice this time, the app does not transition to /students (new route) until the promise is resolved and the data is available. Upon the data becoming available the app transitions to the new route and the data is shown immediately. So in summary,  1. The resolve property contains one or more promises that must resolve successfully before transitioning to the new route. 2. The property names used in the resolve property can then be injected into the controller. This means the controller does not have to fetch the data.

Read More

The Ten (10) Best Angular.js Productivity Tools, Plugins and Libraries

The Ten (10) Best Angular.js Productivity Tools, Plugins and Libraries  The software development environment is riddled with several deadlines which the members of the development team have to meet. As a developer, it is crucial that you optimize your productivity in order to meet these deadlines while delivering quality software products at the same time.  Below are some of the tools, plugins and libraries that Livecoding.tv Angular.js Streamers find useful in improving their overall productivity on a daily basis. What Is Angular.js? "Angular.js is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write," according to the Angular.js community.  Below is a list of ten tools that Livecoding.tv Angular.js streamers use every day when building products. Typescript Typescript is a JavaScript library that provides a way for you to write JavaScript the way that you really want to. It is a typed superset of JavaScript which compiles to plain JavaScript on any browser, host or operating system. Moreover, it is scalable in the sense that it provides classes, modules and interfaces that help you to build robust components. Plus it is open source making it absolutely free to use. Webstorm Webstorm is an IDE that is not only lightweight, but also powerful. It is perfectly equipped for complex server-side and client-side development with Node.js. Key features of this IDE include intelligent coding assistance, support for the latest technologies, a version control system, seamless tool integration and an efficient way to carry out debugging, tracing and testing. BrowserSync BrowserSync is an indispensable test assistant that provides you with an efficient way to carry out synchronized browser testing. This is especially important as the testing time increases exponentially with every web page, device and browser. Some of the great features on BrowserSync include network throttle, interaction sync, file sync, UI and CLI control, sync customization among several other amazing features. Jasmine Jasmine is a development framework for testing JavaScript code and it follows a behavior-driven approach to software development. It is a standalone framework that does not require others to work properly nor does it require a DOM. Moreover, it has a clean an obvious syntax that makes it easier to write tests for your applications. Karma Karma is a test runner that helps developers to have an easier and more efficient mechanism to test their codes. It therefore brings a productive testing environment to developers with minimal configurations to get started. Moreover, developers get instant feedback from their tests, thereby being able to write better code. Some of the features of karma include tests on real devices, remote control, testing framework agnostic, open source, provides easy debugging and has continuous integration. Protractor Protractor is an end-to-end test framework for Angular.js applications being developed. It does this by running tests against your application running in a real browser while interacting with your application as a user would. Protractor has several features including automatic waiting and testing like the actual user of the application. Angular Batarang This is a webInspector Extension for Chrome. It is used when developing Angular.js applications. Ng-Inspector As the name suggests, ng-inspector is extension for Safari, Chrome and Firefox browsers that adds an inspector pane to your browser. This pane allows you as a developer to effectively and efficiently develop debug and understand how your Angular.js applications work. Ng-inspector has several features including DOM highlighting, identification and display of scopes, controllers, directives and models on your browser window. In addition, ng-inspector updates everything in real time as you interact with your application. Restangular This is an Angular.js services simplifies the common POST, GET, DELETE, UPDATE requests with minimal amount of client code. It is especially useful for a webApp that uses data from a RESTful API. Angular-gettext Have you, as a developer struggled with developing applications that provide translations seamlessly? Well angular-gettext provides you with a robust platform that will take care of doing translation support for you. The key features of angular-gettext include trivial to integrate, tiny footprint, works seamlessly with Angular.js and globalizes effortlessly. Furthermore, angular-gettext is built on a rich ecosystem of gettext tools, ensuring that you can get your work done efficiently and conveniently. In conclusion, it is important that you utilize available resources to improve your productivity and increase the quality of your work output significantly. These are just a few of the several tools and libraries available for developers. Do you like the list above? What are your favorite tools and libraries? Feel free to share with us at Livecoding.tv in the comments section.

Read More

Difference between $scope and $rootScope

In this tutorial we will discuss the difference between $scope and $rootScope. The main difference is that, $rootScope is available globally (for all controllers), whereas $scope is only available to the controller that has created it and it's children. 

Let us understand this with an example.

Controller Code : We have 2 controllers (redColourController & greenColourController). redColourController has set redColour property on $scope and rootScopeColour on $rootScope. This means redColour property cannot be used outside the redColourController, where as rootScopeColour that is set on $rootScope can be used anywhere. greenColourController has set greenColour property on $scope. This means greenColour property cannot be used outside the greenColourController

var app = angular

            .module("Demo", [])

            .controller("redColourController", function ($scope, $rootScope) {

                $rootScope.rootScopeColour = "I am Root Scope Colour";

                $scope.redColour = "I am Red Colour";

            })

            .controller("greenColourController", function ($scope) {

                $scope.greenColour = "I am Green Colour";

            })

View HTML : 

<div ng-controller="redColourController">

    Root Scope Colour : {{rootScopeColour}} <br />

    Red Colour Controller : {{redColour}} <br />

    Green Colour Controller :

    <span style="color:red" ng-show="greenColour == undefined">

        greenColour is undefined

    </span>

</div>

<br />

<div ng-controller="greenColourController">

    Root Scope Colour : {{rootScopeColour}} <br />

    Green Colour Controller : {{greenColour}} <br />

    Red Colour Controller :

    <span style="color:red" ng-show="redColour == undefined">

        redColour is undefined

    </span>

</div>

Output : From the output it is clear that the rootScopeColour property that is set on $rootScope is available for both the controllers (redColourController & greenColourController). Where as redColour property set on $scope is available only for redColourController and not for greenColourController. Similarly, greenColour property set $scope is available only for greenColourController and not redColourController. Hope this example has made the difference between $rootScope and $scope clear.

Read More

AngularJS route reload

Chandan Kumar shared this article with you.  AngularJS route reload In this tutorial we will discuss angular route service reload() method. This method is us eful when you want to reload just the current route instead of the entire app. Let us understand this with an example. We will continue with the same example that we have been working with in the previous videos. When we navigate to http://localhost/students we see the list of students. Notice that when you click on the same students link, nothing happens. This means if we insert a new record in the database table and issue a request to the same route, you may not see the new records. One of the ways to see the new data is by clicking on the browser refresh button. The downside of this is that the entire app is reloaded. This means all the resources required to run your app will be reloaded. You can see all the resource requests made on the network tab in the browser developer tools. The other way is t o reload just the current route. Here are the steps. Step 1 : Modify the studentsController function in script.js .controller("studentsController", function ($http, $route) {     var vm = this;     vm.reloadData = function () {         $route.reload();     }     $http.get("StudentService.asmx/GetAllStudents")                 .then(function (response) {                     vm.students = response.data;                 }) }) Please note :  1. $route service in injected in the controller function 2. reloadData() function is attached to the view model (vm) which will be available for the view to call. This method simply calls reload() method of the route service. Step 2 : Modify the partial template (students.html). Please note that we have included a button which calls reloadData() method when clicked. <h1>List of Students</h1> <ul>     <li ng-repeat="student in studentsCtrl.students">         <a href="students/{{student.id}}">             {{student.name}}         </a>     </li> </ul> <button ng-click="studentsCtrl.reloadData()">Reload</button> At this point 1. Run the app 2. Navigate to http://localhost/students. You should see list of students. 3. Insert a new record in the database table 4. Open browser developer tools 5. Click the Reload button There are 2 things to notice here 1. The newly added record will be shown on the view 2. Only the resources required to reload the current route are requested from the server Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.

Read More

AngularJS caseInsensitiveMatch and Inline Templates

Chandan Kumar shared this article with you.  In this tutorial we will discuss 2 simple but useful features in Angular caseInse nsitiveMatch  Inline Templates Let us understand these 2 features with examples. caseInsensitiveMatch : The routes that are configured using config function are case sensitive by default. Consider the route below. Notice the route (/home) is lower case. $routeProvider     .when("/home", {         templateUrl: "Templates/home.html",         controller: "homeController",         controllerAs: "homeCtrl",     }) If we type the following URL in the browser, we will see home.html as expected. http://localhost:51983/home If you type the following URL, the you will see a blank layout page. This is because, by default routes are case-sensitive http://localhost:51983/HOME To make the route case-insensitive set caseInsensitiveMatch property to true as shown below. $routeProvider     .when("/home", {         templateUrl: "Templates/home.html",         controller: "homeController",         controllerAs: "homeCtrl",         caseInsensitiveMatch: true     }) To make all routes case-insensitive set caseInsensitiveMatch property on $routeProvider as shown below. $routeProvider.caseInsensitiveMatch = true; Inline Templates : The view content for the route (/home), is coming from a separate html file (home.html) $routeProvider     .when("/home", {         templateUrl: "Templates/home.html",         controller: "homeController",         controllerAs: "homeCtrl",     }) Should the view content always come from a separate html file. Not necessarily. You can also use an inline template. To use an inline template use template property as shown below. $routeProvider     .when("/home", {         template: "<h1>Inline Template in action</h1>",         controller: "homeController",         controllerAs: "homeCtrl"     }) At this point, when you navigate to http://localhost:51983/home, you should see Inline Template in action. Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.

Read More

AngularJS cancel route change

Chandan Kumar shared this article with you.  In this tutorial we will discuss, how to cancel route change in Angular with an example. This is extremely useful if you want to warn a user when they are navigating away from a page with unsaved changes. For our example, let us assume that the user is currently on this students page. When he click on any other links (Home or Courses on the left), we want to present the user with a confirmation box (Are you sure you want to navigate away from this page). If the user clicks OK, the user will be redirected to the new route. If cancel is clicked, route navigation should be cancelled and the user should stay on the students page. Handle $routeChangeStart event in studentsController function .controller("studentsController", function ($http, $route, $scope) {     var vm = this;     $scope.$on("$routeChangeStart", function (event, next, current) {         if (!confirm("Are you sure you want to navigate away from this page")) {             event.preventDefault();         }     });     vm.reloadData = function () {         $route.reload();     }     $http.get("StudentService.asmx/GetAllStudents")                 .then(function (response) {                     vm.students = response.data;                 }) }) Notice  1. We are injecting $scope object into the controller function 2. With in $routeChangeStart event handler function, we are using confirm() function to display the confirmation dialog box 3. When the confirmation dialog box is displayed, If the user clicks Cancel, event.preventDefault() is called and it cancels the route change, so the user stays on the same page 4. On the other hand if the user clicks OK, event.preventDefault() is not called and the route is allowed to change. If you want to include the route that the user is trying to navigate to in the confirmation message you can do so by using next parameter of the $routeChangeStart event handler function as shown below. .controller("studentsController", function ($http, $r oute, $scope) {     var vm = this;     $scope.$on("$routeChangeStart", function (event, next, current) {         if (!confirm("Are you sure you want to navigate away from this page to "                                                     + next.$$route.originalPath))         {             event.preventDefault();         }     });     vm.reloadData = function () {         $route.reload();     }     $http.get("StudentService.asmx/GetAllStudents")                 .then(function (response) {                     vm.students = response.data;                 }) }) With this change in place and while you are on students page and if you click on Home link on the left menu, you will get the following message. At this point, you might be thinking, how do I know next parameter has $$route.originalPath property. Well you can log the next parameter and see all that properties it has. We will discuss how to do this in our next video. You can also cancel route change by handling $locationChangeStart event .controller("studentsController", function ($http, $route, $scope) {     var vm = this;     $scope.$on("$locationChangeStart", function (event, next, current) {         if (!confirm("Are you sure you want to navigate away from this page to " + next)) {             event.preventDefault();         }     });     vm.reloadData = function () {         $route.reload();     }     $http.get("StudentService.asmx/GetAllStudents")                 .then(function (response) {                     vm.students = response.data;                 }) }) The next and current parameters of $locationChangeStart event handler has the complete next and current URLs. So when you click on home while on students page, you will see the following message.

Read More