Getting Started With Angular JS

rsz_kindle_cover

 Getting Started With Angular JS

Rahul Sahay

All rights reserved.

ISBN: 1515037681

ISBN-13: 978-1515037682

 

Contents

 

Chapter 1: Getting started

Introduction, 11

MVC (Model-View-Controller), 11

Angular Architecture, 12

Angular JS advantages, 15

Comparison with JQuery, 16

Modules, 16

Pre-requisites, 18

Angular movie app review, 19

Angular skeleton project, 46

Download code, 46

Summary, 46

CHAPTER 2: Controllers & Markups

Introduction, 47

Controllers & Scope, 48

Writing first controller, 49

Displaying Repeating information, 57

Handling events, 61

Built-in directives, 70

Event directives, 70

Other directives, 71

Expressions, 82

Filters, 84

Custom filters, 91

Two way binding, 92

Validation, 97

Summary, 103

CHAPTER 3: SERVICES

Introduction, 104

Creating Custom service, 105

Creating user page, 108

Built-in services, 121

Using $http & $q service, 122

Angular js graph, 129

Using $resource service, 130

Using cache factory service, 136

Using compile service, 141

Using parse service, 145

Using locale service, 146

Exception handler service, 149

Filter service, 151

Creating auth service, 153

Summary, 164

CHAPTER 4: Routing

Introduction, 165

Adding first route, 165

Adding more routes, 170

Parameterized routes, 173

Default route, 181

Using location service, 182

Summary, 184

CHAPTER 5: CREATING CUSTOM DIRECTIVES

Introduction, 185

Creating first directive, 185

Encapsulating elements, 189

Isolating directive scope, 194

Handling events, 201

Using controllers, 202

Using require, 205

Directive priority, 207

Nested directives, 208

Summary, 210

CHAPTER 6: TESTING ANGULAR

Introduction, 211

Installing karma, 211

Webstorm settings, 216

Testing controllers, 222

Testing service, 227

Writing ajax test, 228

Writing filter tests, 230

Writing end-to-end tests, 232

Debugging tips, 237

Yeoman, 239

Summary, 255

CHAPTER 7: GETTING STARTED WITH ANGULAR2 & TYPESCRIPT

Introduction, 256

Features, 256

Creating New Project, 258

Creating Components, 259

Embedding Components, 260

Using Babel, 261

Using TypeScript, 263

Using TypeScriptWith Angular, 265

Configuring TypeScript in WebStorm, 268

Configuring File-Watcher, 269

Creating Angular App, 274

Visual Studio Code Glimpse, 279

Summary, 289

About the author, 290

Preface

Hello and welcome to Getting Started with Angular JS. JavaScript has come a long way since its inception. It used to be client-side validation language than full featured web framework. JQuery has done many changes on the top of JavaScript in order to stabilize the cross browser issues especially. However, JQuery has been written with a different intention. It has been crafted for DOM manipulation. However, JQuery was unable to provide key concepts like modularity, testability, reusability and other basic stuffs which developers need on day-to-day basis. Each JQuery project looks very different from each other, as there has not been any mandate to stick to the conventions.

Angular JS fills this gap very nicely by providing a wrapper around JQuery on the top of DOM especially in the areas of writing boilerplate code and making application more maintainable, reusable and testable. Angular JS been written by keeping testing in mind. Hence, it ensures that each and every piece of Angular JS is testable. Angular JS fits in all the scenarios where in basic stuffs like Data-Driven programming, Declarative programming, and Modular programming is required. Angular JS is evolving very rapidly. Their development team and community are adding tons of useful features to this library to make the same more robust and useful.

Who This Book Is For

This book is for anyone who wants to get started with Angular JS development. However, I do expect from readers that they should have basic knowledge of JavaScript before getting started with Angular JS. This book will be starting from angular introduction to advanced topics like directives, services, testing and many more things. Hence, sit back, take a deep breathe, relax and then start systematically. Skipping any chapter in between is not advisable for beginners.

FROM THE MANAGER’S DESK

Today, no web developer worth his salt can afford to ignore learning concepts and tools required to develop SPA applications. There is a need today more than ever before to develop applications faster, modular, so large distributed teams with diverse skill sets can work in parallel to create an application that can provide the best of user experience and yet be performant, maintainable, extendable and testable. AngularJS is the framework to go to achieve all the above goals.

This book is an excellent resource for anyone beginning to learn Angular. Rahul has been extremely diligent in coming up with examples that are real world like and yet do not take away the reader’s attention from angular concepts he is trying to explain. The concepts are first clearly explained followed by code for building a moderately complex application. Each area of Angular is thoroughly dealt with including the tools in Angular eco system such as WebStorm, Visual Studio Code, Karma, and Yeoman. Overall, it is an enjoyable and informative read.

SITA, T
Senior Manager
Dell

 

FOREWORD

AngularJS has come a long way since its inception in 2009. Its initial success was spectacular when it helped to reduce 17,000 lines of code to 1,500 lines of code at Google in the Google Feedback project. Hevery, a developer in the Google Feedback project, could rewrite the code that was written over 6 months in flat 3 weeks using the AngularJS framework. Moreover, the product that was built in 3 weeks was also of a better quality in terms of ease of testing. This initial success of this platform made many Googlers support continuous development of this open source framework.

This book has done an excellent job in introducing this able platform to software developers. Rahul Sahay, the author has built an example web application, which has helped to reinforce the concepts of the project through practical implementation. The book will serve as a good tutorial and a good reference for all the developers who want to leverage the enormous capability of the AngularJS framework. With Single Page Applications and other associated frameworks such as Node.js getting popular and popular, this book is being released at an apt time. Enjoy the technical feast!

Piram Manickam
Senior Architect
Dell

How this book is structured

 Chapter 1, Getting Started

Starts by explaining what is Angular, why it is needed? How it fits in web application. You will also learn the overview of Angular JS. Then, you will understand how to build Single Page App.

Chapter 2, Controllers & Markups

In this chapter, you will learn scope and controller, which is the nerve of any ng app. Then, writing your first controller. Here, you will be using different ng pieces to display the info on the page via controller.You will also see directives, filters, and expressions in action. Then, in the end, you will be able to do client side validation for the page.

Chapter 3, Services

Services are very important ingredient in angular application. You will begin this section, by learning what are services, how do you create them and then how to register the same with angular app. After that, you will be using some built-in angular services and writing custom services for specific scenarios. Here, I have also introduced Angular JS Graph to visualize the app in console.

Chapter 4, Routing

Routing is the place, where you actually convert your angular app into Single Page App. You will learn how to configure the routes. Then, you will also learn how to configure Parameterized routes. Last but not the least you will be using location service with routes.

Chapter 5, Creating Custom Directives

In this section, you will learn how to get started with custom directives design. Why do you need them in any angular app? How it enhances the reusability and maintainability of the code? You will also learn how to encapsulate elements. Then, you will learn how to isolate the scope from the parent scope and many things that are more relevant which is required on day-to-day basis for any angular app.

Chapter 6, Testing Angular

This is the last chapter of this book where in you will learn how to get started with Angular Testing. First, you will learn how to setup the dev environment to launch the Karma Test runner. Then, you begin this section by writing simple controller tests. Afterwards, you will be learning how to write different kinds of tests and in the end, there will be a bonus section, where in you will learn how to inspect and troubleshoot your angular app.

Chapter 7, Getting Started With Angular 2 & TypeScript

This is the last chapter of the book where you will get the feel of upcoming Angular 2.0 version. Here, you will get started with new angular features. Then, we will see how to get started with angular 2.0 with simple demos using Typescript, ES6 and ES5 as well. After understanding TypeScript basics, we will build one small Movie-Review version with TypeScript & Angular.

Acknowledgements

Again, this book would not have been possible without the loving support of my wife Nivi, who had to take over much of the household responsibility apart from her teaching activities. Appreciation also goes out to my Mom and Dad for believing in me and always keeps on encouraging me to complete the book in a best possible way. Moreover, I would also like to thank Sita and Piram for sharing their views on the book. In addition, I would also like to thank Arun and Mayank for doing the technical review and suggested few changes around it.

In the end, you know how it is, you pick a book and flip to Acknowledgement’s page and find that author has once again dedicated the book someone close to him, not to you. Not this time. I would like to thank all the readers whole-heartedly for choosing the book. Finally, I would like to thank readers of my blog (http://myview.rahulnivi.net). Many of you have contributed by asking questions, providing feedback, and inspiring and encouraging me in everything, I do.

 

Chapter 1: Getting Started

 WHAT DO you find in this CHAPTER?

  • Introduction
  • MVC (Model-View-Controller)
  • Angular Architecture
  • Angular JS Advantages
  • Comparison with JQuery
  • Modules
  • Pre-requisites
  • Angular Movie App Overview
  • Angular Skeleton Project
  • Download Code
  • Summary
  • Introduction:-

Hello and welcome to Angular JS world. In this section, we will get started with Angular JS. As per google, Angular JS is a superheroic JavaScript framework. They say this because Angular JS does so much heavy lifting for us, which we need in any web app on day-to-day basis. It provides a consistent scalable architecture that makes it easy to develop large web application out of the box. The best part of Angular JS is, everything done in the Angular JS library itself. Hence, it does not mandate to learn any other programming language. However, Angular JS is derived from certain basic programming standards that is MVC or MVVM, which we will be discussing next.

MVC (model-view-controller):-

The Core concept behind Angular JS is MVC Architectural Pattern. MVC stands for Model-View-Controller. MVVM (Model-View-ViewModel) also similar to MVC, just a design pattern to separate the units of responsibility in different containers. This kind of design pattern gives developers a sense of architectural thinking that how they want to separate the different layers of their web application. MVC design pattern splits the app into three distinct pieces. They are-

  • Model: – Model is nothing but data repository for the application usually fetched from the server and served on the web page via controller. Hence, any web application that is not static, which is getting data is coming via model only.
  • View: –   View is nothing but the presentation layer of web application. You can also think view as generated HTML. Views are basically dynamic in nature as it entirely depends on the data being fetched from the server and how it is finally presented.
  • Controller: – Controller is the central processing unit of any app that is based on MVC design pattern. Once user requests the page, that is getting intercepted by controller and then controller decides where to pick the data from and finally pick which template.

As a result, each unit is responsible for one and only thing. Model means data, View means UI and controller is the business logic. Moreover, each unit is independent of each other, which makes angular more robust, unique and easy to maintain.

Angular Architecture:-

In this section, we will learn more about Angular JS architecture. However, before discussing angular architecture, let us discuss conventional web application architecture in brief. As you can see in the below diagram, whenever you make a request it is going to server and fetching the entire asset time and again which is very resource intensive, hence puts pressure on the bandwidth, on the server and end result is site response time is slow.

166th

However, in case of angular, it loads all the assets and required components in the first load only. Then, whenever next request comes for any different link on the page, it only replaces JSON there. This way, angular makes any app very lightweight and fit for any device.

167th

One more point to note here that modern day apps needs that universal architecture support which means you write once and use everywhere like shown below.

168th

Angular js advantages:-

In this section, we are going to discuss the Angular JS benefits. However, from the previous section, you might have got the glimpse of benefits of angular.

  • Angular JS is SPA (Single-Page-Application) framework with client side templating and heavy usage of JavaScript throughout the app. As I said initially, Angular JS does all the heavy lifting required to make a web app up and running, so that we can focus on core functionality.
  • Since, there are many things already built in Angular JS framework, hence it needs only proper API implementation to get the functionality running rather than using JQuery.
  • As, I said, Angular is built on the top of MVC design pattern. Hence, it helps keep your code modular, maintainable, reusable and testable.
  • Angular JS declarative nature gives a snapshot to developer by just looking at the code that what would have been intention behind writing this code.
  • Angular JS supports many third party libraries, which people need as to style the app, notify the users and many other use cases that people need on day-to-day basis.

Comparison with Jquery:-

In this section, we will do a brief comparison between JQuery and Angular JS. I have mentioned detailed side-by-side comparison between the two in below table.

Features JQuery Angular JS
Abstract The DOM Y Y
Animation Support Y Y
AJAX/JSONP Y Y
Cross Module Communication Y Y
Deferred Promises Y Y
Form Validation N Y
Integration Test Runner N Y
Unit Test Runner Y Y
Localization N Y
MVC Pattern N Y
Template N Y
Two-way Binding N Y
One-way Binding N Y
Dependency Injection N Y
RoutingRestful N Y

However, JQLite is already built-in in angular. Hence, you do not need to explicitly use JQuery for any DOM manipulation. You can use JQuery stuffs by calling like angular.element().

Modules:-

Modules in Angular JS are one of the key reasons for keeping application modular. Below is the simple diagram of modules briefly.

182nd

As you can see in the above screen shot, modules let you create all underlying pieces. All these pieces we will understand piece by piece in coming chapter. One more point to understand an angular application can have as many modules as required and all of these are dependent on each other like shown below.

183rd

Hence, if your app module is dependent on some other module, then that dependent module can be injected before executing the actual app module. We will see all these things in detail in coming chapters.

Pre-Requisites:-

As far as pre-requisites are concerned, there are actually no pre-requisites except basic knowledge of JavaScript. However, few things that I would like to tell here; I am mean which I have used while writing the app.

Editor: – My choice for writing JavaScript app is WebStorm. You can get the same from here (https://www.jetbrains.com/webstorm/). This is the best JavaScript editor, I have used so far. However, there is no such mandate to use the same. You can use any of the editors listed below-

  • Visual Studio
  • Eclipse
  • Visual Studio Code
  • Brackets
  • Sublime and many more

Angular movie app review:-

I always like talking about the application, which you will be building here, with app snapshots, first. Below is the home page of the application.

169th 170th

Now, when you click on any of these movies, it will take you to the corresponding pages as shown below-

171th 172nd

173rd

174th

Similarly, you can post new movie like shown below.

175th

You will also learn how to write client side validation like shown below.

176th

Moreover, when everything goes well, then Post Movie button will enabled as shown below.

177th

As you can see that, once image URL pasted there, it produced the relevant image. This is called data binding, which you will learn in coming chapters. Then, when you click Edit profile, it will produce the below screen.

178th

Here, you will learn the power dynamic data binding on the fly using Angular JS. Like, when I type my email id in email address box, it will fetch my image as shown below.

179th

Similarly, when you click on the last link, then this will produce the below page.

181th

Hence, let us suppose if we enter values as shown below in the screen shot, respective cache size value also getting changed.

184th

Then, you can retrieve the same by providing key as shown below.

185th

Similarly, you can delete the same based on key or flush entire set. We will discuss all these terminologies in coming chapter. We will go through complete list of directives we generally use on day-to-day basis. However, one directive that I used recently in one demo wanted to show here. This directive is used for embedding you tube videos in your angular application, angular way. Below is the glimpse for the same.

1st

I have also explained normal authentication service by enabling user to do registration on the site and then login accordingly as shown below.

187th 188th

186th 189th 190th

Apart from this, I have also explained how to get started with yeoman scaffolding template generators for angular and other required dependency. You will learn the same in coming chapters. However, below is the short glimpse for the same.

1st

14th

26th

After doing improvisation on the generated code, app will look like as shown below.

40th 41th login_adv register_adv

I have also discussed about Angular2 Features in the last chapter. Then how start with TypeScript and write the angular app using that. Below is the glimpse of the same.

200th 201th

206th

Below is the corresponding JavaScript generated code.

207th

This also produced me the required output at the bottom of the screen in JSON format.

208th

Then, how to get started with TypeScript with simple TypeScript workflow discussion.

217th

I hope you have enjoyed the app glimpse. Hence, without wasting time let us get started.

Angular skeleton project:-

In order get started with Angular JS, you can download the skeleton project from here (https://github.com/rahulsahay19/Movie-Review-Angular-Skeleton) , if you want to code along with me on the same study. However, it is not necessary to follow this convention. You can surely apply the angular techniques in any angular project that you want.

Download Code:-

You can also download the full finished version from here (https://github.com/rahulsahay19/GettingStartedWithAngularJS).

Summary:-

In this chapter, we have started with Angular JS overview. We started with basic understanding of angular then we also had a glimpse of MVC structure on which Angular is laid upon. Then, we discussed angular architecture in detail by comparing the same with conventional web-app architecture. We have also done concise comparison with JQuery, in order to understand how Angular JS fits in modern day web architecture. Then, we summarized this chapter by giving brief overview of the application, which you will be building along.

Buy Here: – http://bit.ly/ng-kindle

PaperBack:- http://bit.ly/ng-paperback

Thanks for Joining Me!

Thanks,
Rahul Sahay
Happy Coding

2,684 total views, 1 views today

Angular 2 Features in a nutshell

Hi Friends,

In today’s discussion, we will see the glimpse of Angular 2 in a nutshell. Angular 2 is getting released coming December 2015. This release is going to bring some major path breaking changes like major performance improvements and feature enhancements. In more than 400 commits, Google has fixed more than 100 bugs and added around 30 additional features. These stats are just the initial stats and final list will have many more features. However, I thought it would be great, if I can provide a brief snapshot around the same. AngularJS 2 is for mobile apps. It is for desktop as well, but major focus is on mobile. With this, let us go ahead and look at the complete list of features.

Features:-

  • Mobile First: – Angular Team, at ng-conf made it clear they will go for mobile first approach. I think this is bold and brilliant step around that. These days, demand is very adaptive. Hence, if you can fit perfectly in mobile environment then I think desktop apps will be cakewalk.
  • Loosely Coupled Modules: – Angular Team has been detaching from its several core versions now. At the same time, community started offering very interesting modules like ui-router. Both, angular team and community have successfully built an ecosystem, which keeps on increasing. You can find more details around the same @ http://ngmodules.org/.
  • Modern Browsers: – The set includes Chrome, Firefox, IE10/11, Opera, Safari and all latest mobile browsers support.
  • ECMA Script 6:- All code in AngularJS is written entirely in ES6. Since, ES6 don’t run in browsers today, hence google is testing the same using traceur-compiler to generate ES5 script which runs everywhere. Do not worry if you do not want to upgrade to ES6, you can still write entire angular 2 in ES5.
  • Change Detection: – Faster change detection is one key elements of Angular 2 design. The speed of AngularJS app is hugely dependent on data binding happening internally in the application. observe() is a low level API that let you add listener to be notified whenever a JavaScript object changes state. If you want to explore more about Change Detection, you can refer the link here.
  • Dependency Injection: – Dependency Injection is still a key differentiator between AngularJS and other client side frameworks in eliminating much of application’s wiring code and making testability-by-default. Based on ES6, it provides less complex syntax, declarative annotations and lazy loading.
  • Templating & Directives: – The ability to specify template directly in HTML and extend its syntax are like cakewalk in AngularJS. In Angular 2, this process has become more simplified. It also boosts performance.
  • Touch Animations: – Angular team is working on touch animations to make the performance on mobile devices much better than ever before. The main goal here is creating a module that implements usage patterns using native browsers features.
  • Router: – The initial angular router was designed just to handle simpler use cases. As AngularJS grew, Angular team added tons of new features to it to extend it further.
  • Persistence: – There was always a room between fetching the data from the server and fetching the data from local storage like from browser. Mobile apps need to work on the same lines. Angular team is working on the same to provide higher level of abstraction. Apart from these there are many other features which are getting added by angular team.

Thanks for Joining me for this brief discussion.

Rahul Sahay,
Happy Coding

3,864 total views, 1 views today

Visual Studio Themes

Hi Friends,

In Today’s discussion, we will see how to customize the look and feel of your visual studio editor for good readability and visual experience. First you need to install Visual Studio 2013 Color Theme Editor from Tools –> Extension and Updates.

As you can see, below in the screen shot, i have already installed the same.

10th

Once, the same get installed, it will ask you to restart Visual Studio. After restarting, it will provide you following options as shown below in the screen shot.

11th

As you can see that, currently my theme is set to Solarized Dark. You can change theme from here as well. Or you can go to Tools–>Options as shown below in the screen shot and set from there.

12th 13th

This way you can give a change to your Visual Studio Look and Feel.Thanks for joining me :)

Thanks,
Rahul Sahay
Happy Coding

1,332 total views, no views today

Working with NG-YouTube-Embed

Hi Friends,

Just thought to share one new module around YouTube from Angular. This functionality is basically for embedding any Video to your site using angular.

Below is the bower command to install the component on your side.

bower install ng-youtube-embed. Once, you installed the components successfully. Then, you need to reference the same on index page as shown below.

Then, you need to add the same in dependencies as shown below.

Then, need to put the same in controller as shown below.

Last, but the not the least, template change

Then, with the above change in place, it will produce the desired result as shown below in the screen shot.

1st

Thanks for Joining Me!

Thanks,
Rahul Sahay
Happy Coding

1,690 total views, 1 views today

Building FrontEnd App with Yeoman – 3rd Part

Hi Friends,

In this section, we’ll delve further and enhance the app where we stopped last time. Now, let us go ahead and improvise the UI a bit, so that it feels good and look good. In order to get started, I will make use of some bootstrap templates which you can refer here @ Bootstrap. Now, from here i will pick Cyborg theme as shown below in the screen shot.

31th

From here, I will just go ahead and download the css file and save in my bower components as shown below in the screen shot. I could have placed it in my app styles folder as well, but there my fonts and other dependent items are not there, hence it’s good to have consistency and place it at one place. Here, i have downloaded two themes cyborg and superhero.

33rd

Then, i have commented the initial reference of bootstrap and referenced new one as shown below.

With the above change in place, it produced the below theme.

34th

Now, it feels better. I have also improvised a bit in the movies template with the below snippet.

One more change i have done for menu highlighting with the minor change as shown below.

With the above change in place, it will look like as shown below.

35th

36th

Now, let us go ahead and create Movies controller to put some data in. For doing that, I have used my yo generator to do the same.

38th

37th

39th

Therefore, this is the benefit of using yo generator. Out of the box, it gave me test file as well. Now, let us go ahead let us put some data in there to display on the page. Off-course currently, it will be static data. Later we will see how to couple the same with data fetched from the server. By the way, below snippet is the default one created by generator.

Looks ok to me. But, I don’t need these stuffs, hence I will modify the same and make some necessary changes as shown below.

Now, i need to do corresponding view changes

With the above change in place, it will produce the below result. Although the page doesn’t look super impressive, but that’s ok. UI is least bothered for now.

40th

41th

I have also added two more views for Login page and Register as shown below in the screen shot.

login_adv

register_adv

Functionality of this, we will see in coming section. Till then stay tuned and Happy coding.

Thanks,
Rahul Sahay
Happy Coding

2,144 total views, 1 views today

Building FrontEnd with Yeoman – 2nd Part

Hi Friends,

In today’s section, we will begin customizing the project our way. 1st let us open the project in WebStorm and let’s inspect the folder structure. Below is the folder structure of yeomen project looks like.

15th

Now, if you expand node modules, then you will see, node has installed many dependencies which include testing dependencies as well.

16th

However, if you are not familiar with testing frameworks like jasmine. I would suggest, visit http://jasmine.github.io/ website, how to get started with this. Now, if you delve further in the folder structure, you will find that it gave us some per-written test to get started.

17th

Now, if you open the test, then it will look like

In order to run this test, here in webstorm, i need to make few configuration changes like shown below.

18th

19th

20th

Then, do the Karma environment settings as shown below.

21th

Then, click on apply and then ok. With this, Config section for karma will get enabled in webstorm.

22nd

By, clicking on this play button, it will launch the karma server and execute the test as shown below.

23rd

This shows that all my per-written tests are executing fine, which means all the components are setup correctly and everything is looking healthy, hence we can proceed with app development. Hence, now let us turn our attention towards, app folder and open index.html page. Below is the snippet of default HTML page.

Here, you can see many things like boiler plate code for HTML 5 template, plus menus, then we have google analytics also built in here. Apart from this from angular perspective, you can find that main controller is injected here with ng-view in place. One point to note here, here i have modified app name and one of the menu section and once i saved the same, it just automatically refreshes in the browser, i don’t have to refresh the same manually.

And the reason for this is watch window which is taking live update and update at the same time in UI as shown below in the screen shot. This uses Grunt script which detects the change and updates the UI at the same time.

24th

25th

Now, the next thing which i will do is register a movies view with angular generator from the webstorm terminal window. If you are not using webstorm, doesn’t matter, you can open another command prompt and do from there.

26th

Upon, successful creation, it will display the below message.

27th

And, if you refer the views folder, then you will see that new view has been generated.

28th

And, when you open this file, it will look something like below

It’s entirely up-to you, whether you want to use generator to create the template for you or you want to do the same manually.Next thing, i need to define the route for the same. Below is the modified snippet for the same.

Since, i do not have any logic for this template and just a simple plain HTML, hence i have not provided controller name and aliasing name.

With the above change in place, I have also changed menu section in index page as shown below.

Now, when i go ahead click Movies link, it will produce the below shown result, prettiest page in the world; jokes apart.

30th

We will improvise more on the functionality and UI in coming section. Till then stay tuned and happy coding.

Thanks,
Rahul Sahay
Happy Coding

1,386 total views, no views today

Building Frontend app with Yeoman – 1st Part

Hi Friends,

In this section, we’ll see how to use Yeoman (http://yeoman.io/) to create a next generation app. Here, in this entire session, we will be using tons of angular stuffs, node, bower, grunt, bootstrap and many more things. Therefore, this is not for those who don’t know the basics of other per-requisites. For that, please refer my other articles.

Below is yeoman website which is getting very popular these days.

1st

This is scaffolding tool for creating boiler plate stuffs. After installing Yeoman, you can install generators. These generators will help create project templates for you. There are many generators which have generators embedded in it. We will see the same. But, let us go ahead and install the yeoman first. Since, I have already installed node. Hence, i am skipping this step. Therefore, first step step is installing node, then yeoman.

2nd

As, you can see that i am installing the same from command line and installing yeoman as a global so that we can use the same from command line.

3rd

Once, it got installed, next install bower.

4tth

Once, bower installed, next i need to install grunt with below shown command.

5th

Then, next thing we will do, we will install angular generator as shown below.

6th

Since, we have installed all the required components, hence now we can go ahead and launch yeoman as shown below.

7th

Upon, successful launch it will show the below confirmation message and will start a questionnaire session, for other required components.

8th

9th

I said ok means i am ok with default selection and hit enter. Then, it started installing all the required stuffs as shown below.

10th

Upon successful installation, it will show below message

11th

At this stage, everything is installed. Hence, i can launch the template with grunt command as shown below.

12th

After doing all the initial check successfully

13th

It will launch the landing page of the screen.

14th

Thanks for joining me.

Thanks,
Rahul Sahay
Happy coding

1,636 total views, no views today

Angular TidBits

Hi Friends,

In today’s discussion, we’ll some good debugging and angular app visualization practices. Let us get started with debugging stuff. Here, i will be using chrome extension for the same. This is known as ng-inspector.

2nd

you can search for the same and install in chrome. Once installed, then it will create one icon as shown below in the screen shot.

3rd

So, what you can do, when you need check your angular app, whether every piece and all data is returning correctly or not. You can use this tool to check the same, Once you loaded your angular app in chrome, then you can click on this A icon, and this will open a new side window with entire app info.

4th

you can also drill down further as shown below in the screen shot.

5th

This is referring my 1st grid data as shown below.

6th

Therefore, if you refer the API url api/movies , the above ng-inspector is referring to below highlighted record.

7th

Again, when i go to the reviews page and inspect the data, then it will produce the below result as shown below.

8th

you can also verify these values at the api level as shown below in the screen shot.

9th

I am also using JSON Viewer extension for browser for presenting the data in a readable format. Below is the screen shot for the same.

10th

Now, to visualize the app, that what angular stuffs are used in the app and how they are related i am using another extension Angular Dependency Graph.

11th

Therefore, when you load the app and press F12, you will notice one new tab, Angular JS Graph in the toolbar. Once, you click the same, then it will present below shown visualization.

12th

This way, you can save lots of time while understanding and debugging the app. Below, i have mentioned few app related urls.

APP URL:- moviereview
Download Code:- GIT-URL
Buy here:- Amazon

I hope you like the post. Thanks for Joining me.

Thanks,
Rahul Sahay
Happy Coding

1,434 total views, no views today

Windows 10 Setup and Its features

Hi Friends,

Today, in this section, we will talk about Windows 10 Upgrade. On my 2ndry machine, I have been already running windows 10 evaluation copy. But, after official release, i upgraded my OS version. There are bunch of ways to achieve the same. But, i chose to jump the line and install the same explicitly. I have done the same by using Media Creation Tool. you can download the same here (Download Link). There is also a very good note about the upgrade on Verge link. This upgrade takes around 30-40 minutes, depends on your internet bandwidth.

Once the installation completed. You will experience perfect silky experience. Here, is my desktop page & start page

8th

1st

Let us consider, you want to navigate to some specific task, then you can do the same as shown below:-

2nd

3rd

You can also search the web quickly with new Microsoft Edge browser.

4th

5th

6th

Like this there are many other things which you can refer @ emulator

I hope you will enjoy the windows 10 journey. Thanks for joining me.

Thanks,
Rahul Sahay
Happy Coding

1,213 total views, no views today