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

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

Tuesday, July 5, 2016

AngulerJs Filters and How to Create Custom Filters into AngularJs

2.1 Inbuilt  Filters and Custom Filter into AngularJS







This below post is all about In built Filters of angular and how to create Custom Filter into AngularJS

In Built Filters:

Syntax : {{data | filter : options }}

Filters are put into the HTML Files and some of very common used filters are listed Below.

Currency Filter :

<body ng-controller="ShopConroller as shop">
<div ng-repeat="product in shop.products">
<h1>{{product.name}}</h1>
<h1>{{product.price | currency }}</h1>
<p>{{product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

Date Filter :
      if you have Date like 1388123412323 and we need to see that date into proper format                       then  do the following
 
                   Example :
                   {{'1388123412323' | date:'dd/MM/yyyy'}} it will show 27/12/2013

Uppercase filter :
if you want to see string into uppercase then at that time we can use this filter
{{'abCd' | uppercase}}

Lowercase filter
if you want to see string into Lowercase then at that time we can use this filter
{{'abCd' | lowercase}}

LimitTo filter
if you want data to some specific limit at that time you can use this filter
{{"address" | limitTo:3}} it will show add
orderBy filter etc...


ng-src:

  When we are dealing with the image into client side at that time we want source of that image.Into HTMl <img> tag contain src(source) attribute to define the path of that image.this is also valid into AngularJS but what happen we you watching into developer tools then at that time you will get 404 image not found error.so to resolve that error we need to use ng-src directory to specify path of that image.

Custom Filter :
    
        Sometimes in built Filters won't fit to your requirement so at that time you need to create your own filter which filter out your data and give data to you which you want.

        Here I describe a filter which is not available and i want that into my application So for that i need to create it customly  and put  my own functionality into it.

So i want to create a filter which converts the number to their ordinal values for Ex : if i pass 56 then it would return "fifty sixth"

So here is the Custom Filter for that.

app.filter('ordinal', function()
       {
 return function(number)
         {
if(isNaN(number) || number < 1)
                {
     return number;
}
                else
               {
    var lastDigit = number % 10;
    if(lastDigit === 1)
                    {
         return number + 'st'
    }
                    else if(lastDigit === 2)
                    {
return number + 'nd'
    }
                    else if (lastDigit === 3)
                   {
return number + 'rd'
   }
                   else if (lastDigit > 3)
                   {
return number + 'th'
    }
}
   }
});

Exercise :

1) Use an Angular filter to display the price as a currency.
2) Use and Angular Filter to display the "Pratik" into Uppercase.
3) Use and Angular Filter to display the "Pratik" into Lowercase.
4) Use and Angular Filter to display the "Pratik" into Reverse Order.
5) Use and Angular Filter to display the "Pratik" into Reverse + lowercase.

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.blogspot.com

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

Monday, June 27, 2016

In-Built Directives of Angular

1.3 In-Built Directives

This post is all about the inbuilt Directives of AngularJS

1) ng-controller
 
    Suppose you have a code like this
HTML :
 
    <body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<div>
</body>
app.js

var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
}

2) ng-show

So now I want to add a button into html if javascript array has canBuy=true so how can i do          that ? Let's do that.
 
   HTML :

<body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js
 
var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
}

If the value of canBuy is true then and only then BUY button is display into html.if the value     of the canBuy is false or that property canBuy not exists into that arrat shop_product then BUY           button will not display into HTML.

3) ng-hide

So now i want check that if that product is sold out from store then i dont want to display into           HTML So how can i do that ? Let's do that

HTML :

<body ng-controller="ShopConroller as shop">
<div ng-hide="shop.product.canSold">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js
 
var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
canSold="true"
}

4) ng-repeat

Assume that you have so many products and you want to check that how many products are           sold out or available.at that time you need to use ng-repeat Directory

 HTML :

<body ng-controller="ShopConroller as shop">
<div ng-repeat="product in shop.products">
<h1>{{product.name}}</h1>
<h1>{{product.price}}</h1>
<p>{{product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js

var app=angular.module('GrocessaryShop',[])
app.controller('ShopConroller',function(){
this.products=shop_products;
});
 
var shop_products=[
{
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
},
{
name: "Shampoo",
price: "10",
description: "Shampoo",
canBuy: true,
}
];

Exercise :

1) Use a directive to ensure that we can only see the "BUY" button if the canBuy property is true.

2) Our first shop_product is so popular that we've run out of stock already! Luckily We have canBuy property to our shop_product. When a shop_product is canBuy, hide the .product element.

3) In the app.js file we changed things up a little with a new shop_products array. Assign shop_products to a products property inside StoreController.

4) You know how to display all the products, don't you? Use the correct directive to display all the products in all divs.

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.blogspot.com.

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  

Tuesday, June 21, 2016

Controller Into AngularJS

1.2 Controllers

By using controller you can fetch data and display that data into model of AngularJS.

Controllers helps you out to get data on the Web Page.

Controllers is the thing where we can define our applications's behaviour by defining functions           and values.

To define Controller first you need to create the module for your AngularJS Web Application.

Example:
             
          Suppose you have the variable declared into app.js but outside to the controller and you                       want to access that variable to that controller

                var app=angular.module('GrocessaryShop',[])
app.controller('ShopConroller',function()
                {
                     this.product=shop_product;
});

var shop_product={
name="FaceWash",
price="100",
description="FaceWash",
}

Into Html <body> Tag
<body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<div>
</body>

Exercise :

1) Add a controller named ShopConroller to our GrocessaryShop application.
2) Attach the ShopConroller to the <body> tag. Be sure to alias it as shop.
3) In app.js, we've added a shop_product object to represent one of the products in our                             GrocessaryShop. Assign it to the product property of ShopConroller so we can use them in                 the page.
4) Display the name of the product inside the <h1> tag.
5) Display the Price of the product inside the <h1> tag.

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.blogspot.com

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

Wednesday, June 15, 2016

Directives,Modules into AngularJS(Level-1)

1.1 Basics of AngularJS-Directives,Modules


for building this application what you need to know is
  Must Know:
HTML & CSS
JavaScript


Directives
A Directive is a marker into the HTML Tag that tells Angular to run of reference some                        JavaScript Code.

To define Directive into AngularJS Web Application you can do this by using ng-controller.

Example. :
                    If u have a Function into the JavaScript names as GrocessaryShopController then into                         HTML you have to write
 
                   <body ng-controller="GrocessaryShopController">

This is used for binding controller into model=.

Modules
This is one where we can out code into pieces so we can reuse that easily.
Modules is also used to make out code encapsulated.
Modules makes our code more testable and readable.

To define Modules into AngularJS Web Application you can do this by using angular.module.
 
         Example :
                 var application = angular.module('grocessaryshop',[]);
where grocessaryshop is the name of our Application and [] by using this we can define                                  our module dependencies.

 To develop Below Application you need to library which is

1. Twitter Bootstrap
You can Download this by using http://getbootstrap.com

2. AngularJS Library
You can Download this by using http://angularjs.org


Create the basic HTML and App.js file which has nothing

HTML File has AngularJS File and Basic HTML Template which has html,head and Body Tag.

HTML File
     <html>
             <head>
                      <script data-require="angular.js@*" data-semver="1.3.0-beta.5"
                           src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
             </head>
              <body>
                               //Some Content
              </body>
     </html>

app.js
            var app;

Exercise: -

1.Create a Module named GrocessaryShop so we can get started on this marketing journey.
2.Attach the GrocessaryShop module to our HTML page with a Directive.
3.In index.html, create a simple Expression to display "Hello, Pratik!" message.



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.blogspot.com

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