Showing posts with label Angular JS. Show all posts
Showing posts with label Angular JS. Show all posts

Angular 8 -installation requirements and Setup Development Environment





Setup : Development environment

Following Environment should be installed on the system before start working on Angular 8
v  Node.Js : Node.js is an open-source, cross-platform javascript run time environment.
         Go to – https://nodejs.org

v  Npm: npm is a node.js package manager for JavaScript , it is automatically installed when we install Node.js.

v  Typescript : Go to Node.js command prompt  and install Typescript using command Command:- npm install  -g Typescript

v   Angular CLI (command line interface ) – It is a tool which allows us to create a project using the command line argument
                Command :- npm install –g @angular/cli

Useful command for angular 8

v  Node Version :- Node -v
v  NPM version :- npm -v
v  Angular Version :- ng –v
       Note:-  if ng –v doesn't work then use ng v

v  Install Typescript :- npm install -g Typescript
v  Install Angular CLI:- npm install –g angular/CLI
        Note:- instead of CLI we can use version number as well

v  Create Angular application:- ng new projectname
v  Compile angular application: ng serve
v  Compile and run the angular application: ng serve o




For more please follow my YouTube channel.

Angular 8 Introduction With Versioning Details


What is Angular
  1. Angular is a very popular framework maintained  and developed by Google.
  2. Angular is an open-source front-end development platform used for building mobile and desktop web applications.
  3. Angular is a platform and framework for building client applications in HTML and Typescript. Angular is Itself is written in Typescript.
  4. Angular-8 was released in May 28,2019.
  5. Front end/Client-side JavaScript Framework.

What you should know before starting working on Angular 8
You much have basic knowledge on the following technologies.
1. HTML, DOM(Document object model), CSS
2. JavaScript
3. Typescript
4. basic knowledge on oops
5. No previous Angular knowledge required.
Angular Versions
   Google has released 7 versions of angular.
  1. Angular Js – 2010
  2. Angular 2 – 2016
  3. Angular 4 – 2017
  4. Angular 5 -  November  2017
  5. Angular 6 – March 2018,
  6. Angular 7 – Oct  2018
  7. Angular 8 – May 2019

Angular Release Versioning
   Angular Release versioning have 3 parts
  1. Major
  2. Minor
  3. Patch
For example, if the version is 2.5.6, it means 2 is the major and 5 is the minor version and 6 is the patch.
Generally for a major release is 3months and for minor, the release is 1 month and for a patch, we give every week.


 For more please follow my YouTube channel.

Event Handler in AngularJS

Angular JS provide the event handler in HTML, which we can use to do operation, there are following event which is provide by the Angular JS

 AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:
  Ø  ng-blur
  Ø  ng-change
  Ø  ng-click
  Ø  ng-copy
  Ø  ng-cut
  Ø  ng-dblclick
  Ø  ng-focus
  Ø  ng-keydown
  Ø  ng-keypress
  Ø  ng-keyup
  Ø  ng-mousedown
  Ø  ng-mouseenter
  Ø  ng-mouseleave
  Ø  ng-mousemove
  Ø  ng-mouseover
  Ø  ng-mouseup
  Ø  ng-paste
The event directives allows us to run AngularJS functions at certain user events.
An AngularJS event will not overwrite an HTML event, both events will be executed.
Mouse Events
Mouse events occur when the cursor moves over an element, in this order:
Ø  ng-mouseenter
Ø  ng-mouseover
Ø  ng-mousemove
Ø  ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
Ø  ng-mousedown
Ø  ng-mouseup
Ø  ng-click
You can add mouse events on any HTML element.
Some Angular JS event we will here with an example
Ng-Click Directive
The ng-click directive defines AngularJS code that will be executed when the element is being clicked.
1.   Go to the visual studio and add a project and right click on the solution and add a script file and give it name as “Controller.js” and write the following code to this file

/// <  sreference path="angular.min.js" />

var Myapp = angular
            .module("MyModule", [])
            .controller("myController", function ($scope) {

                var technologies = [
                    { name: "C#", likes: 0, dislikes: 0 },
                    { name: "ASP.NET", likes: 0, dislikes: 0 },
                    { name: "SQL", likes: 0, dislikes: 0 },
                    { name: "AngularJS", likes: 0, dislikes: 0 }
                ];

                $scope.technologies = technologies;

                $scope.incrementLikes = function (technology) {
                    technology.likes++;
                };

                $scope.incrementDislikes = function (technology) {
                    technology.dislikes++;
                };
            });


2.   Now add a HTML file to your solution and give it name as “Index.html” and write the following code to this file
<!doctype html>
<html ng-app="MyModule">

<head>
  
    <script src="Scripts/angular.min.js"></script>   
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
      <table  border="1" >
            <thead>
                <tr>
                 <th>Name</th>
                    <th>Likes</th>
                    <th>Dislikes</th>
                    <th>Like/Dislike</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td> {{ technology.name }} </td>
                    <td style="text-align:center"> {{ technology.likes }} </td>
                    <td style="text-align:center"> {{ technology.dislikes }} </td>
                    <td>
                        <input type="button" ng-click="incrementLikes(technology)" value="Like" />
                        <input type="button" ng-click="incrementDislikes(technology)" value="Dislike" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Index.html : Notice in the html below, we are associating incrementLikes() and incrementDislikes() functions with the respective button. When any of these buttons are clicked, the corresponsing technology object is automatically passed to the function, and the likes or dislikes property is incremented depending on which button is clicked.

When you will run application output will be like following
                            

ng-mousemove directive

Increase the count variable when the mouse moves over the button. Controller class will be the same , there will be a little change in the Index.html,
Replace the ng-click with the ng-mousemove and see the output, when you will take mouse on the button increment and decrement will happen for respective button.

Index.html code

<!doctype html>
<html ng-app="MyModule">

<head>
  
    <script src="Scripts/angular.min.js"></script>   
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
      <table  border="1" >
            <thead>
                <tr>
                 <th>Name</th>
                    <th>Likes</th>
                    <th>Dislikes</th>
                    <th>Like/Dislike</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td> {{ technology.name }} </td>
                    <td style="text-align:center"> {{ technology.likes }} </td>
                    <td style="text-align:center"> {{ technology.dislikes }} </td>
                    <td>
                        <input type="button" ng-mousemove ="incrementLikes(technology)" value="Like" />
                        <input type="button" ng-mousemove="incrementDislikes(technology)" value="Dislike" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>


Ng-show directive

If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch:

Controller.JS Code
/// <  reference path="angular.min.js" />

var Myapp = angular
            .module("MyModule", [])
            .controller("myController", function ($scope) {

                $scope.showMe = false;

                $scope.myFunc = function () {
                    $scope.showMe = !$scope.showMe;
                }
            });

Index.HTML codes
<!doctype html>
<html ng-app="MyModule">

<head>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
        <button ng-click="myFunc()">Click</button>

        <div ng-show="showMe">
            <h1>Technologies:</h1>
            <div>C#</div>
            <div>Asp.net</div>
            <div>Angular JS</div>
        </div>
    </div>
     <p>Click the button to show/hide the menu.</p> </body>
</html>


Now run your application and click on button and see the output

                
The showMe variable starts out as the Boolean value false.
The myFunc function sets the showMe variable to the opposite of what it is, by using the ! (not) operator.
Ng-Hide
Just opposite of ng-show this ng-hide work, in above example (ng-show example) replace the ng-show with the ng-hide and see the output