Showing posts with label AngularJs. Show all posts
Showing posts with label AngularJs. Show all posts

Saturday, January 30, 2021

[Solution] How to generate/make exe(executables) from Angular App

 [Solution] How to make exe(executable) from Angular App

generate_exe_from_angular_visionfortech
generate exe from Angular App by Visonfortech


In this article we will solve your all questions Like How to generate exe out of Angular App or in other words Is it possible to generate exe out of Angular App code or i will say make windows executable out of Angular App (code)


let's get started with this article in which we are going to discuss how we can generate exe or we can say windows executable using Angular App.

To achieve this, there are lot of npm packages are available but in this article we will go ahead and use node-windows npm package.

Below are the steps to generate exe from nodejs app source code.

1) Download nodejs and install nodejs and npm (Skip if you have npm already installed)

2) Into your project root directory execute below command.

npm install node-windows 
or
npm  i node -windows

3) create one file into your project's root directory named service.js and copy below code
var Service = require('node-windows').Service;

var svc = new Service({
  name:'visionfortech_angular_app',
  description: 'visionfortech Angular App',
  script: <runAngularApp.js>,
  execPath: <Node exe path>
});
svc.on('install',function(){
  log.info("Service starting ...")
  svc.start();
  log.info("Service started ...")
});

svc.on('uninstall',function(){
  log.info('Uninstall complete.');
  log.info('The service exists: ',svc.exists);
});
Above code will create deamon directory into your project's root directory and into that it will create visionfortechangularapp.exe and two log files.

In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.

Saturday, January 9, 2021

[Solution] How to make exe(executable) from NodeJS App

 [Solution] How to generate/make exe(executable) from NodeJS App

[Solution] How to make exe(executable) from NodeJS App
Make exe(executable) from NodeJS App
In this article we will solve your all questions Like How to generate exe out of NodeJS App or in other words Is it possible to generate exe out of NodeJS code or i will say make windows executable out of NodeJS App (code)


let's get started with this article in which we are going to discuss how we can generate exe or we can say windows executable using NodeJS App.

To achieve this, there are lot of npm packages are available but in this article we will go ahead and use node-windows npm package.

Below are the steps to generate exe from nodejs app source code.

1) Download nodejs and install nodejs and npm (Skip if you have npm already installed)

2) Into your project root directory execute below command.

npm install node-windows or npm i node -windows

3) create one file into your project's root directory named service.js and copy below code
var Service = require('node-windows').Service;

var svc = new Service({
  name:'visionfortech_node_app',
  description: 'visionfortech nodejs App',
  script: <entry point of your application [app.js or index.js]>,
  execPath: <Node exe path>
});
svc.on('install',function(){
  log.info("Service starting ...")
  svc.start();
  log.info("Service started ...")
});

svc.on('uninstall',function(){
  log.info('Uninstall complete.');
  log.info('The service exists: ',svc.exists);
});
Above code will create deamon directory into your project's root directory and into that it will create visionfortechnodeapp.exe and two log files.

In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.


Saturday, December 12, 2020

ECMAScript (ES6) Features with Example (Part -1)

 ECMAScript (ES6) Features with Example (Part -1)

ECMAScript (ES6) Features Part 1 By Visionfortech
ECMAScript (ES6) Features Part 1 By Visionfortech

In this article we will see some of the fantastic features of ES6 with examples so that it will be easy to understand each and every features.

In this article we will discuss about some major features about ECMAScript (ES6). Since there are lot many features of into ES6 We will cover few of them in part 1 and rest of them we will cover it in out next article. So let' start with some coolest features of ES6 now.

Below are the list of ES6 Features.


ES6 FEATURES

  1. let vs var
  2. Declaring Variable as Constant
  3. Template Literals
  4. Spread Operator
  5. Function default parameters
  6. Arrow functions
  7. Shorthand Properties
  8. This keyword
  9. Destructuring
  10. Class Inheritance
  11. Promise
    1. Define and Use of Promise
    2. Promise Chaining
    3. Error Handling into Promise Chain

In this article we are going to discuss about let vs var, Declaring Variable as Constant, Template Literals, Spread Operator, Function default parameters, Arrow functions features of ES6


1. Let vs Var

Var :

var visionfortech_x = 5;
if(visionfortech_x){
    var visionfortech_x = 10
}
console.log(visionfortech_x ) // The output will be 10

Let :
var visionfortech_x = 5; if(visionfortech_x){ let visionfortech_x = 10 } console.log(visionfortech_x ) // The output will be 5

for detail understanding please visit let vs var by visionfortech or Global VS local Variable into JS


2. Declaring variable as Constant

Const:

1) const car = "Honda";
    car = "BMW";
    console.log(car) // It will give you an Error

2) const cars = ['Honda', 'BMW'];
    cars.push('Ferrari');
    console.log(cars); // Output will be ['Honda','BMW','Ferrari']

3) const car = {
        brand: 'BMW',
doors: 2, engine: 3.0     }     car.brand = "Ferrari";     console.log(car); // Output will be {brand: 'Ferrari',doors: 2,engine: 3.0}

3. Template Literals

1) let name = "Pratik";
    let message = `Hello Mr. ${name}`;
    console.log(message ) // Hello Mr. Pratik

2) let number1 = 10;
    let number2 = 20;
    let results = `Total is $${number1 + number2}`;
    console.log(results); // Total is 30

4. Spread Operator

var topics= ["Javascript", "Angular", "VueJS"];
var author_topics = ["visionfortech", "JS", "MongoDB"];
var author_likes= ["Mongodb Certifications",...topics, ...author_topics];
console.log(...author_likes)

Above will print below thing on browser console.
Mongodb Certifications,Javascript,Angular,VueJS,visionfortech,js,MongoDB

5. Function Default Parameter

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2); }
console.log(website())

Above will print below thing on browser console.
Visionfortech Blog

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2); }
console.log(website("Visionfortech Javascript"))

Above will print below thing on browser console.
Visionfortech Javascript Blog

6. Arrow Function

var cal = (number1, numbe2) => number1 + numbe2;
console.log(cal(13, 12));

Above will print below thing on browser console.
15

For More ES6 features stay tuned to visionfortech

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.

Saturday, October 24, 2020

Cache API in JavaScript

Cache API in Javascript


cache-api-in-javascript-by-visionfortech-pratik-soni
Cache API using JavaScript By Visionfortech

In this article i am going to show that how we can add,update,delete,retrive (CRUD operations) api urls and it's responses into cache so that our application will execute in more faster manner.

First step is we have to check weather our browser is supporting cache API or not. So now everyone will have a question like how we can check that ? So below is the answer for that.

Detect whether browser supports Cache API or not 

if ('caches' in window) {     // Means your browser is supporting cache API }else{ // Please upgrade your browser because cache APIs are not supported }


If your browser has suppor of cache API then let's go ahead and create cache

Create a Cache 

caches.open('visionfortech-cache').then(function(cacheInJS) { // It will return a promise and a object of cache which was either existed or created // before caches.open JS call });

Since we have created a cache now let's go ahead and try to add one or all URLs to cache.

Adding API URLs and it's response into Cache 

let URLs_to add = [ "/api/visionfortech_cache_api_Test1","api/visionfortech_cache_api2"]
let single_url = "api/visionfortech_cache_api1";

// Adding a single URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) { cacheInJS.add(single_url ); // URL will be fetched and cached });

// Adding multiple URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) { cacheInJS.addAll(URLs_to add) .then(function() { // Multiple URLs will be fetched and cached }); });



Since we have created a cache and added some URLs now let's go ahead and try to update the response of particular URL's response.

Update response of URL into Cache

fetch('api/visionfortech_cache_api1').then(function(response) { return caches.open('visionfortech-cache').then(function(cacheInJS) { return cacheInJS.put('api/visionfortech_cache_api1', response);
    // It will update the response for api/visionfortech_cache_api1 URL.
}); });

Till now we have seen how to create a cache and how to add API URLs and it's responses and how to update API response into Cache in case of change. So now let's go ahead and look at how we can retrieve the URLs which are cached and it's respective reponse object.


Retrive URLs and it's response from Cache

// Retrieve API URLs from cache like how many APIs we have stored in cache

caches.open('visionfortech-cache').then(function(cacheInJS) { cacheInJS.keys().then(function(cached_requests) { console.log(cached_requests); // It will return array of cache API URLs }); });

// Retrieve particular API response from Cache

caches.open('visionfortech-cache').then(function(cacheInJS) { cacheInJS.match('api/visionfortech_cache_api1').then(function(response) { console.log(response); }); });

So Now let's see how we can delete/clear our cache.

Delete a Cache 

caches.delete('visionfortech-cache').then(function(cacheInJS) {
// It will delete/clear the visionfortech-cache });


Hope you enjoyed the article and it got added something new to your knowledge.
To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.


Saturday, October 10, 2020

Speech to Text using Javascript

Speech to text using JavaScript



In this article i am going to show that how we can convert speech to text using JavaScript with it's browser API.

As you seen in above image, the output/outcome of this example/program is user will be able to get spoken words into text/string and his/her confidence level(in %) while speaking those words.

with the user of inbuilt web api of browser we can achieve above program,we can recognize speech using JavaScript. It is very easy to recognize speech in a browser using JavaScript and then getting the text from the speech to use as user input. We havecovered How to convert Text to Speech using Javascript.

Want to download source code ? : Speech-to-text-using-Javascript


We have used the SpeechRecognition object. We haven't used too many properties. We have a simple HTML webpage in the example, where we have a button control to initiate the speech recognition action.


Output of this Application : 




Note: It will work only in Google Chrome browser
While running the code into the browser will ask for permission to use your Microphone, so please click on Allow and then speak anything to see the program in action.
Hope you enjoyed the article and it got added something new to your knowledge.
To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.

Enjoy......!!!
Happy Learning.....!!!

Sunday, March 29, 2020

Steps to update Angular from Angular 8 to Angular 9

Update application from Angular 8 -> Angular 9


Though we have angular9 released so in this article i would like to discuss how we can update our Angular App from Angular8 to Angular 9. In other words i would like to say Migrate existing angular application to angular9 from angular8

To know what are the new features into Angular 9 Angular 9 Features.

So to upgrade it to angular 9 follow below steps.


  • Make sure you will have node version 10.13 or later version. I would advice use latest version that is Node 12.
  • Make sure you will have your angular-cli at 8 ( You can check angular version by ng --version command).
  • After that update your angular-cli to latest version using ng update @angular/cli
  • After upgradation of angular-cli please update your angular/core package using ng update @angular/core command
  • Now you can check that you will have angular9 installed using ng--version.
Hope you enjoyed the article and it got added something new to your knowledge.
To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.

Enjoy......!!!
Happy Learning.....!!!

Saturday, March 21, 2020

Top New Features introduced into Angular 9 / What's majorly new in Angular 9

what's new into Angular 9 or Features into Angular 9




If you would like to know the features or new things which got introduced into Angular 9 then you are at the right place. Here into this article we are going to discuss what are the new things got introduced into Angular 9 or what are the features got introduced into Angular 9

Angular Features

  1. Default Ivy Compiler
  2. Smaller Bundles and Performance
  3. Typescript 3.7 Support
  4. Service Worker Updates
  5. Enables the AOT compiler on by default
  6. i18n Improvements
  7. Need for Faster Mobile Apps
  8. Changes with Angular Forms
  9. Dependency Injection Changes in Core
  10. Lazy load Angular components
  11. Angular Component Updates
  12. API Extractor Updates


Default Ivy Compiler

The more awaited very big new feature Ivy compiler is available  default for Angular 9, which will make sure to make your angular apps built with Ivy are faster and more efficient. So user won't require to add any compiler options in tsconfig.json file to enable Ivy like Angular 8.


Smaller Bundles and Performance

Into Angular 9 IVY complier make sure that you Angular Application production bundle will have lower size in result we can faster build generation and the performance for the same application will get increased


Service Worker Updates

In current version of Angular 9, for service workers the deprecated versioned files option in the service worker asset group config has been removed. This means that your new ngsw-config.json file that looked like below file:
"assetGroups": [
{ "name": "visionfortech", "resources": { "versionedFiles": [ "/**/*.txt" ] } } ]

will now look something like below

"assetGroups": [
{ "name": "visionfortech", "resources": { "files": [ "/**/*.txt" ] } } ]


i18n Improvements

Angular a JavaScript framework is supporting internationalization, and with the Angular CLI you can generate standard codes that will help create translator files so that your angular application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier by adding compile-time inlining.

Changes with Angular Forms

Into Angular 9 there are some more changes related to Angular Form. First change is <ngForm></ngForm> is no longer supported for Angular Form instead you need to use <ng-form></ng-form>.Second, the FormsModule.withConfig is no longer supported instead you have to use FormsModule directly.


Angular Component Updates


There is an upgrade for the @angular/cdk on Hammer.js, which allows to include gesture support and was needed if you chose to use the CDK. It's possible now. You can import it with this below command optionally:

import "HammerModule" from [@angular/platform-browser]


Dependency Injection Changes in Core

The new version of Angular has minor improved for dependency injections. This is not a big change but some support.functionality has been added for the providedIn value section of dependency injections.

@Injectable({ providedIn: 'platform' })  class VisionfortechService {...}
  1. Platform : Specifying providedIn: 'platform' makes the service available on a special singleton platform injector that is used by all applications on the page.
  2. Any : Provides a unique instance in each module (including lazy modules) that injects the token.


Enables the AOT(Ahead-of-time) compiler on by default

In the current IVY architecture, we see a so many changes in the compiler's performance. This means that the AOT(Ahead-of-time) builds will be noticeably faster. The change in the compiler and runtime, will no longer require entryComponents. and ng serve. These components in latest version of Angular 9 will compile automatically depending on their usage.



Need for Faster Mobile Apps

Now a days mobile usage is rapidly growing around the quarter of the website traffic is made up of phones and other mobile devices. Some percentage of these mobile devices is going to access web pages from slow internet connections. Its important to decrease downloadable resources and increase mobile user experience,to get that Ivy helps in speed application startup by reducing the size of JavaScript classes.

Hope you enjoyed the article and it got added something new to your knowledge.
To Learn more about Javascript Javascript Treasure.
To add something new every-time into your mind stay tuned to visionfortech.

Enjoy......!!!
Happy Learning.....!!!

Thursday, January 24, 2019

Angularjs forms and models

forms and models


now into review i want to insert a review form to get review from users so lets start to insert form into review tab

Into the form of review tab we are going get how much starts user want to give for our product and what are the reviews and what author gives the review.i want all above information.

Into HTML
<form name="reviewForm>
<blockquote>
<b>Stars : {{review.stars}}</b>
{{review.body}}
<author>by : {{review.author}}</author>
</blockquote>
<select ng-model="review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="review.body"></textarea>
<label>by : </label>
<input ng-model="review.author" type="email" />
</form>

so in above code we can't define review variable anywhere so better coding prctise we need to define that so for that we need to intialize that and commonly intialization can be done into the controller so lets create the Controller.

App.js
app.controller("reviewController",function(){
this.review={}
});

So,now we need to bind this review Controller into our form so for that we need to do the Following.

Into HTML

<form name="reviewForm ng-controller="reviewController as reviewCtrl">
<blockquote>
<b>Stars : {{review.stars}}</b>
{{reviewCtrl.review.body}}
<author>by : {{reviewCtrl.review.author}}</author>
</blockquote>
<select ng-model="reviewCtrl.review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<label>by : </label>
<input ng-model="reviewCtrl.review.author" type="email" />
</form>

So after filling needed information we need to submit the form and into Angular we have a ng-submit directive

ng-submit allows us to call a function when the form is submitted and after that we need to define that function into our ReviewController.

So into HTML :

<form name="reviewForm ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl .addReview(product)">
<blockquote>
<b>Stars : {{review.stars}}</b>
{{reviewCtrl.review.body}}
<author>by : {{reviewCtrl.review.author}}</author>
</blockquote>
<select ng-model="reviewCtrl.review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<label>by : </label>
<input ng-model="reviewCtrl.review.author" type="email" />
</form>

So now we have to define this addReview function into ReviewController.

So Into app.js

app.controller("ReviewController",function(){

this.review={};

this.addReview=function(product)
{
product.review.push(this.review);
};
});

But when we went to browser and input our review and after submitting the form container which has all the input controller are not getring blank or we can say resetted so for that we just need to add one line into the addReview function of reviewController.

So Into app.js

app.controller("ReviewController",function(){

this.review={};

this.addReview=function(product)
{
product.review.push(this.review);
this.review={};
};
});

So what it can do is when this form is getting submitted and when this function got called so after pushing review into array we can assign a new javascript object to the review object which is blank.So after getting submitted the element's values will get reset.

form
1)You need to create multiple li's for each review that exists.
2)Set the blockquote stars ( strong tag) to the review stars.
3)Add the review body between the strong & cite tags.
4)Set the cite to the review author.
5)Use ng-model for review.stars select form field.
6)Use ng-model for review.body for the forms textarea.
7)Use ng-model for review.author – the email field.
8)In the strong tag, before Stars, put in the right expression to display review.stars. Keep the space prior to Stars
9)On the blank line with no tags put in the right expression to display review.body
10)In the cite tag, immediately after the -, put in the right expression to display review.author. 

Tuesday, August 30, 2016

Tabs Into AngularJS

Tabs into Angular

    Into this we are going to learn about tabs into Angular

       So now we have a product and i want to display its Description and its Comments and its reviews so we can do that by using tab
   
    Fortunately twitter bootstrap provides some classes for that but what we need to know is how they behave.
   
    So I have three things description,comments and its Reviews and i want to display that into tab so what we can do for that....Lets do that
   
    so what i want to do is when i click description its description will show and when i click comments at that time admin can see the comments of users and when i click review then user can read reviews of another customer.
   
    for that into HTML
   
    <section>
        <ul class="nav nav-pills">
            <li><a href ng-click="tab = 1">Description</a></li>
            <li><a href ng-click="tab = 2">Comment</a></li>
            <li><a href ng-click="tab = 3">Reveiws</a></li>
        </ul>
        {{tab}}
    </section>
   
    so in above code we assign the values to the tab and when we click on Description it will display 1 and according to the following.
   
    so now what i want every time i click then value or content will get ovewritten so when ng-click changes the values of the tab the {{tab}} expression automatically gets updated.
   
    For that Into HTML include
   
    <div class="panel" ng-show="tab === 1">
        <h3>Description</h3>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="tab === 2">
        <h3>Comment</h3>
        <p>{{product.Comment}}</p>
    </div>
    <div class="panel" ng-show="tab === 3">
        <h3>Reveiws</h3>
        <p>{{product.Reveiws}}</p>
    </div>
   
    so in above when we refresh the page no other panel is selected because we didnt set Intial values for tab.
   
    so for that into HTML Include
    <section ng-init="tab = 1">
        <ul class="nav nav-pills">
            <li><a href ng-click="tab = 1">Description</a></li>
            <li><a href ng-click="tab = 2">Comment</a></li>
            <li><a href ng-click="tab = 3">Reviews</a></li>
        </ul>
        {{tab}}
    </section>
   
    so above code will show description by default when page refereshes.
   
    So isn't it great that it will highlighted the tab which is selected we can do that easily by using twitter bootstrap
   
    So now instead of wrinting content on html file should we write that into some component.Any guesses which Componenet ? yes,you are right i am talking about Controller.so now we can create another controller which is tabController.
   
    Into HTML
        <section ng-controller="tabController as property">
        <ul class="nav nav-pills">
            <li class="{active:property.isSeleted(1)}">
                <a href ng-click="property.selectTab(1)">Description</a>
            </li>
            <li class="{active:property.isSeleted(2)}">
                <a href ng-click="property.selectTab(2)">"Comment</a>
            </li>
            <li class="{active:property.isSeleted(3)}">
                <a href ng-click="property.selectTab(3)">Reveiws</a>
            </li>
        </ul>
        <div ng-show="property.isSeleted(1)">
            <h3>Description</h3>
            <p>product.description</p>
        </div>
    </section>
   
    Into app.js
        app.controller("tabController",function(){
            this.tab=1;
           
            this.selectTab=function(settab){
                this.tab=settab;
            };
            this.isSeleted = function(checkTab){
                return this.tab === checkTab;
            };
        })

Exercise :

    1)  Create a controller named TabController.
    2) Intialize tab property into tabController.
    3) In order to set the current tab, we'll need a setTab method to use in our HTML. It should set the tab property of TabController to a value passed in.
    4) We've got a setTab method. Now we need an isSet method that accepts a value and returns whether that value matches this.tab.
    5) Attach the TabController to the <section> element with the .tab class. Don't forget to also add an alias.
    6) Trigger the selectTab method when a link inside a tab is clicked. Add this to each of the tab links. Pass in the number of the tab, in this case 1, 2 or 3.

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to  Visionfortech


Related Posts :


1)  Where we can use AngularJS and Difference Between angularjs and Jquery
2)  (Level 1.1) Directives,Modules into AngularJS
3)  (Level 1.2) Controller Into AngularJS
4)  (Level 1.3) In built Directives of AngularJS
5)  (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6)  (Level 2.2) Tabs into Angular
Protected by Copyscape