Monday 21 November 2022

Angular 3 Structural Directives(+/- components in HTML View)

EX 5 : 

*ngFor Directive

Create a new Angular Application in Visual Studio IDE Terminal

ng new EX5

Open folder EX5 and open src\app\app.component.html    file and add the following contents and save.

<div *ngFor = "let i of [1,3,5,7,9,11,12,14,15]">
  <li>No is : {{i}}<br></li>
</div>

run 

ng serve in Terminal. 

Once you get compiled successfully message, 

  1. Open http://localhost:4200 in any browser to check the following o/p:  
  • No is : 1
  • No is : 3
  • No is : 5
  • No is : 7
  • No is : 9
  • No is : 11
  • No is : 12
  • No is : 14
  • No is : 15   
  • -----------------------------------------------------------------------------------------------------------------------------

    EX 6 

    *ngIf Directive

    Open file src\app\app.component.ts file and add the displayButton object as shown below:

    export class AppComponent {
        displayButton: boolean = true;
    }


    Open  src\app\app.component.html    file and add the following contents and save.

    <div>
      <div *ngIf="displayButton">
         Message will disappear  when you click this button
            <button class="btn btn-sucess" (click)="showHide();">Click Me to Hide</button>
      </div>

    run 

    ng serve in Terminal. 

    Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p initially:  

    Message will disappear when you click the button. with Click me to Hide Button. Once you click the button the browser screen will be blank.

    ---------------------------------------------------------------------------------------------------------------------------

    EX 7

    ngStyle Directive

    Open  src\app\app.component.html    file and add the following contents and save.

    <!-- //ngSTyle : changes the look and Behaviour of Web Page -->
    <div *ngFor = "let i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]">
        <div *ngIf = "(i%2 != 0)" [ngStyle]="{'background-color':'green'}">
            <li><button>{{i}}</button></li>
        </div>
        <div *ngIf = "(i%2 === 0)" [ngStyle]="{'background-color':'red'}">
            <li><button>{{i}}</button></li>
        </div>
    </div>

    run by ng serve in Terminal. 

    Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p:  

    You will get screen like this


    EX8

    Pipes

    Open file src\app\app.component.ts file and add the displayButton object as shown below:

    export class AppComponent {
        textPipe = 'lower case to be converted to uppercase';
    }

    Open  src\app\app.component.html    file and add the following contents and save.

    <div>
      Original Text:&nbsp;{{textPipe}}<br>
      To lowercase :<span style="color:'green'">&nbsp;{{textPipe |  lowercase}}</span>---> all Lowerase<br>
      To uppercase :<span style="color:'blue'">&nbsp;{{textPipe |  uppercase}}</span>---> all uppercase<br>
      Slicing:<span style="color:'red'">{{textPipe | slice:0:5}}</span>--->First 5 charecters of the original text<br>
    </div>

    run ng serve in Terminal. 

    Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p initially:  

    In browser:

            Original Text: First Pipe
            To lowercase : first pipe---> all Lowerase
            To uppercase : FIRST PIPE---> all uppercase
            Slicing:First--->First 5 charecters of the original text

    Happy Learning Angular! ☺☺☺














    Angular #2 Data Binding {{}} , [ ], ( ), [()]

    Ex 1.

    One Way Binding {{}}

    In Visual Studio, Terminal 

    create a project using 

     ng new ex1

    Ans N for Would you like to Add Angular Routing ?

    Choose CSS for Which Style sheet format you like to use?

    Will install packages(npm).

    Open folder ex1

    Expand src directory to see app, assets, environments.. directories.

    In app directory, open app.component.html files. Delete all the contents.

    add the following and save.

    <h1>{{title}}</h1>

    Invoke by 

    ng serve to run the server in Terminal Window. 

    Open any browser and go to http://localhost:/4200

    will display the title ex1 in browser

     Ex 2.

    Add user defined object inputData

    Add  the above USO in app.component.ts file AppCompenet class by 

    inputData = 'User Defined Data in Class';

    In app directory, open app.component.html files. 

    add the following and save.

    <p style="color: rgb(128, 0, 28);"><b>{{inputData}}</b></p>

    Check in browser.


    Ex  3.

    Add a new Component 'Container'In terminal 

    In Terminal Window, command prompt

    ng generate component container

    to create a new componont. Will create four new files and one update one file.

    PS F:\AngularCourse\ex1> ng generate component container
    CREATE src/app/container/container.component.html (24 bytes)
    CREATE src/app/container/container.component.spec.ts (620 bytes)
    CREATE src/app/container/container.component.ts (287 bytes)
    CREATE src/app/container/container.component.css (0 bytes)
    UPDATE src/app/app.module.ts (408 bytes)

    Now check the container.component.html file.

    Add the following contents inside app.compoent.html

    <app-container></app-container>

    Delete the contents. Add the following

    <h1>Header Comes here</h1>
    <h3>Nav Bar comes here</h3>
    <h5>Content  comes here</h5>

    Now invoke webpack by 

    ng serve

    command inside the terminal prompt to check the browser contents. 

    Ex 4.

    Evet data binding 

    add the following contents  in container.component.html file.

    <div>
        <Label> First Name : </Label>
        <input type="text">
        <button (click) = "onClick()">Clik Me</button>
    </div>

     in src\app\container\container.component.ts file, add the following 

    Inside ContainerComponent class after ngOnInit(): void{}  and save

    onClick(){
        alert('Some body kicked the Button');
      }

    Now invoke webpack by ng serve and check http://localhost:4200 in browser. Click the button to see alert box.


    Ex4: 

    Two way Binding [(ngModule)]y

    create a new project using 

    ng new ex4


    Add the following contents  in container.component.html file.

    <div>
        <Label> First Name : </Label>
        <input type="text" [(ngModel)] = "inputData"> <br><br>
        Entered Choice is  : {{inputData}}
    </div>

    Open app.component.ts File , add inside the class AppComponent  and save file.

    inputData = 'Two way Binding Example';

    Add the following in app.module.ts file import section and save.

    import { FormsModule } from '@angular/forms';

    Register  FormsModule   as shown below:


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

    run ng serve in terminal. Check in the opened browser http://localhost:4200.

    Whatever you typed will be displayed immediately next to  Entered Choice is  :



    Thursday 17 November 2022

    Angular #1 Installation

    Why named it as Angular. b'cos it is written between < > !

     Angular is typescript for building client applications framework.

    Angular is easier, clean loosely coupled architecture and more testable and reusable.

    Architecture: (FE+BE)

    Front End  (UI): Client (Browser) use HTML CSS( Templates) , Type Script (Extended Java Script), angular

    Back End  (Data Processing):  Data + API (Application Programming Interface) + Business Logic

    Simply, Angular makes life easier!

    Angular Version is known as AngularJS. Later versions are known As Angular V x. (latest is Angular 14.0)

    Difference between AngularJS and Angular

    Architecture :      MVC Model vs  Components and Directives

    Language     :      Java Script vs Type Script

    Mobile          :    Not Mobile friendly vs Mobile Friendly

    Expression Syntax : {{}} vs () []

    Dependency Injection : Not used vs Hierarchical DI is used

    Routing     :     @routProvider  vs @Route configuration

    Code         :      Unmanageable vs Structured


    1. First Angular Project:

    Download latest stable version node.js from nodejs.org depending on your platform (Windows-32/64/Mac/Linux) (in my case downloaded windows 64 bit node-v18.12.1-x64.msi on 17.11.2022). Install as Administrator. Check  in command prompt by this command

                node --version

    Download Angular CLI (Command Line Interface) tool by this command 

                npm install -g @angular/cli

    Check in command prompt by this command 

                ng version

    Create angular project in command prompt:

                ng new hello-universe  where hello-universe is angular project name.
                Will ask some questions like: 
                 Ans 'N' for Would you like to add Angular routing? y/n -
                 Select 'CSS' for ? Which stylesheet format would you like to use? 
                will take some time to create necessary files for the angular project

     Download beautiful cross platform code editor: Visual Studio  from https://code.visualstudio.com/download to get VSCodeUserSetup.exe and install as Administrator. 

    Go to hello-universe directory. type the following command to check the visual code editor

                code .

     You can observe the Visual studio IDE opened with HELLO-UNIVERSE project. Now our first Angular Project is ready. We can run by this in command prompt 

                ng serve

    will build  and display message Compiled successfully at the end.

    Now open the browser and type in the address bar

               localhost:4200

    Your first application will show screen like this 


    Great My friend, You have done it!






            

        


     











    Tuesday 12 July 2022

    #0 Intro to Data Analysis

     Two Words

    Data & Analysis

    Data : oil, Electricity,  everywhere, every time, even now.

    Analysis : Answer how and Why ?

    Analysis :

    Data analysis is the process of collecting, modeling, and analyzing data to extract insights that support decision-making. There are several methods and techniques to perform analysis depending on the industry and the aim of the investigation


    Why Is Data Analysis Important?

    Informed decision-making: 

    Reduce costs| Increase Profits

    Target Customers Better


    DA is a Process

    Identify-Collect-Clean-Analyze-Interpret or Infer- Act

    (ICCAIA)


    Types of DA

    1.Descriptive: What ?-Data to Valuable Insights

    2.Exploratory: How  ?-To generate Hypothesis to solve specific 3.Problems

    4.Diagnostic : Why ? - To tackle and to cure 

    5.Predictive  : What if ? - Future Projection

    6.Prescriptive : IF-?.Then-This : 


    Top DA Methods

    1. Cluster Analysis: Similar elements - Grouping Data 

    2. Cohort Analysis : Historical data to examine and compare -Google Analytics:

    3. Regression Analysis - y=mx+c

    4. Factor Analysis : Dimension Reduction

    5. Neural Networks : Mimic Human Brain to find solutions

    6. Data Mining: Identify patterns, Dependencies, realations, Trends

    7. Text Analysis : Actional Insights with Relevant Data

    8. TimeSeries Analysis : Data Collected over a specified period of time.

    9. Decison Trees: To support smart and strategic Decisions

    10. Conjoint Analysis : How individuals value different attributes of a product or Service



    Top 17 Data Analysis Techniques:


    Collaborate your needs

    Establish your questions

    Data democratization

    Think of data governance 

    Clean your data

    Set your KPIs

    Omit useless data

    Build a data management roadmap

    Integrate technology

    Answer your questions

    Visualize your data

    Interpretation of data

    Consider autonomous technology

    Build a narrative

    Share the load

    Data Analysis tools

    Refine your process constantly 


    Quality Criteria For Data Analysis 

    Internal Validity

    External Validity

    Reliability

    Objectivity



    Application of DA:


    Academics: Universities and academic institutions can perform data analysis to measure student performance and gather insights on how certain behaviors can further improve education.


    Human Resources: Organizations can use data analysis to offer a great experience to their employees and ensure an excellent work environment. They can also utilize the data to find out the best resources whose skill set matches the organizational goals



    Communication is very Important


    Qualitative


    Stephen Few - 8 Types of Quantitative Messages out of DA:

    1. Time Series : Line Chart

    2. Ranking : Bar Chart

    3. Part-to-Whole : Pie Chart

    4. Deviation: Bar Comparison : Actual Vs Variation

    5. Frequency Distribuition : Histogram

    6. Correlation: Scatter Plot 

    7. Nominal Comparison : bar Chart

    8. Geographical : Cartogram


    Quantitative

    mean, median, mode, Standard deviation, chi-square, eigen vector



    Free software for data analysis


    Notable free software for data analysis include:


    DevInfo – A database system endorsed by the United Nations Development Group for monitoring and analyzing human development.[149]

    ELKI – Data mining framework in Java with data mining oriented visualization functions.

    KNIME – The Konstanz Information Miner, a user friendly and comprehensive data analytics framework.

    Orange – A visual programming tool featuring interactive data visualization and methods for statistical data analysis, data mining, and machine learning.

    Pandas – Python library for data analysis.

    PAW – FORTRAN/C data analysis framework developed at CERN.

    R – A programming language and software environment for statistical computing and graphics.[150]

    ROOT – C++ data analysis framework developed at CERN.

    SciPy – Python library for data analysis.

    Julia - A programming language well-suited for numerical analysis and computational science.


    Thursday 30 June 2022

    DATA SCIENCE ETHICS

     DSE definition:

    “Data ethics is a new branch of ethics that studies and evaluates moral problems related to data (including generation, recording, curation, processing, dissemination, sharing and use), algorithms (including artificial intelligence, artificial agents, machine learning and robots) and corresponding practices (including responsible innovation, programming, hacking and professional codes), in order to formulate and support morally good solutions (e.g. right conducts or right values).”



    MongoDB - Introduction

     MongaDB Features

    • Full cloud-based application data platform.
    • Flexible document schemas.
    • JSON..BSON (BJSON)..
    • Widely supported and code-native data access.
    • Change-friendly design.
    • Powerful querying and analytics.
    • Easy horizontal scale-out with sharding.
    • Simple installation.
    • Cost-effective.

    Learning to use MongoDB

    Step 1:

    Download and install "PyMongo":


                    pip install mongadb

    Step 2:

                        import pymonga

    step 3: list database names

                    # import library
    import pymongo
    # creating a client
    myc = pymongo.MongoClient("mongodb://localhost:27017/")
    # Just printing existing databases
    print(myc.list_database_names()) # ['admin', 'config', 'db1', 'local']

    Step 4: Create Collections

    # import library
    import pymongo
    # creating a client
    c = pymongo.MongoClient("mongodb://localhost:27017/")
    # Just printing existing databases
    print(c.list_database_names()) # ['admin', 'config', 'db1', 'local']

    # choose any demo db as db1
    # create collection customers in db1
    db = c['db1']
    col = db["customers"]
    print(db.list_collection_names())

    # add Dict data
    dict = { "name": "John", "address": "Highway 37" }
    x = col.insert_one(dict)
    print(x.inserted_id)

    #add Dict1 data
    dict2 = { "name": "Peter", "address": "Lowstreet 27" }
    y = col.insert_one(dict2)
    print(y.inserted_id)

    """
    ['admin', 'config', 'db1', 'local']
    ['customers']
    62bd57445c7e7af908e87efa
    62bd57445c7e7af908e87efb

    """

    To display with Object_ID


    clist = db.list_collection_names()
    if "customers" in clist:
    print("The collection exists.")

    for x in col.find():
    print(x)

    """
    ['admin', 'config', 'local']
    []
    62bd58d899982b27053eb9cc
    62bd58d899982b27053eb9cd
    The collection exists.
    {'_id': ObjectId('62bd58d899982b27053eb9cc'), 'name': 'John', 'address': 'Highway 37'}
    {'_id': ObjectId('62bd58d899982b27053eb9cd'), 'name': 'Peter', 'address': 'Lowstreet 27'}
    """

    Before and After deleting 

    # import library
    import pymongo
    # creating a client
    c = pymongo.MongoClient("mongodb://localhost:27017/")
    db = c['db1']
    col = db["customers"]
    col.drop()
    q1 = { 'address': 'Highway 37'}
    q2 = { 'address': 'Highway 38'}
    q3 = { 'address': 'Highway 39'}

    print(10*'-', 'Insering 3 qs')
    col.insert_one(q1)
    col.insert_one(q2)
    col.insert_one(q3)

    print(10*'-', 'Before Delete')
    for x in col.find():
    print(x)

    q4 = { 'address': 'Highway 39'}
    col.delete_many(q4)
    print(10*'-', 'After Delete')
    for x in col.find():
    print(x)
    """
    ---------- Insering 3 qs
    ---------- Before Delete
    {'_id': ObjectId('62bd5db330e379663c8851ce'), 'address': 'Highway 37'}
    {'_id': ObjectId('62bd5db430e379663c8851cf'), 'address': 'Highway 38'}
    {'_id': ObjectId('62bd5db430e379663c8851d0'), 'address': 'Highway 39'}
    ---------- After Delete
    {'_id': ObjectId('62bd5db330e379663c8851ce'), 'address': 'Highway 37'}
    {'_id': ObjectId('62bd5db430e379663c8851cf'), 'address': 'Highway 38'}
    """

    After deleting another Record

    print('After Prinitng')

    q5 = { 'address': 'Highway 37'}
    col.delete_many(q5)
    for x in col.find():
    print(x)
    """
    After Prinitng
    {'_id': ObjectId('62bd5f3cf32b68f5a744b5ab'), 'address': 'Highway 38'}\
    """
    Before and After dropping collections
    import pymongo
    # creating a client
    c = pymongo.MongoClient("mongodb://localhost:27017/")
    db = c['db1']
    col = db["customers"]

    many = [
    { "_id": 1, "name": "AMET", "address": "ECR, Chennai"},
    { "_id": 2, "name": "ABS", "address": "Anna Nagar, Chennai"},
    ]
    x = col.insert_many(many)

    print('Before dropping')
    for x in col.find():
    print(x)
    col.drop()
    print('After dropping')
    for x in col.find():
    print(x)
    """
    Before dropping
    {'_id': 1, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 2, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    After dropping

    """

    Sorting Collections

    import pymongo

    # creating a client
    c = pymongo.MongoClient("mongodb://localhost:27017/")
    db = c['db1']
    col = db["customers"]
    col.drop()
    many = [
    { "_id": 11, "name": "AMET", "address": "ECR, Chennai"},
    { "_id": 21, "name": "ABS", "address": "Anna Nagar, Chennai"},
    ]
    x = col.insert_many(many)
    print('Before Sorting')
    for x in col.find():
    print(x)
    doc = col.find().sort("name")

    print('After Sorting')
    for x in doc:
    print(x)

    """
    Before Sorting
    {'_id': 11, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 21, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    After Sorting
    {'_id': 21, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    {'_id': 11, 'name': 'AMET', 'address': 'ECR, Chennai'}
    """
    Before and After Updating
    import pymongo

    # creating a client
    c = pymongo.MongoClient("mongodb://localhost:27017/")
    db = c['db1']
    col = db["customers"]
    col.drop()
    many = [
    { "_id": 11, "name": "AMET", "address": "ECR, Chennai"},
    { "_id": 21, "name": "ABS", "address": "Anna Nagar, Chennai"},
    ]
    x = col.insert_many(many)
    q6 = { "address": 'ECR, Chennai' }
    newvalues = { "$set": { "address": "#123, East Coast Road, Chennai" } }
    print('Before Updation')
    for x in col.find():
    print(x)
    col.update_one(q6, newvalues)
    print("After Updation")
    #print "customers" after the update:
    for x in col.find():
    print(x)
    """
    Before Updation
    {'_id': 11, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 21, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    After Updation
    {'_id': 11, 'name': 'AMET', 'address': '#123, East Coast Road, Chennai'}
    {'_id': 21, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    """
    B4 and After Many Updating using regular expression


    import pymongo

    client = pymongo.MongoClient("mongodb://localhost:27017/")
    db = client["mydatabase"]
    col = db["customers"]
    col.drop()

    many = [
    { "_id": 10, "name": "AMET", "address": "ECR, Chennai"},
    { "_id": 12, "name": "ABS", "address": "Anna Nagar, Chennai"},
    { "_id": 13, "name": "ABS!@", "address": "ECR, Chennai"},
    { "_id": 14, "name": "Stanford", "address": "Anna Nagar, Chennai"},
    ]
    x = col.insert_many(many)


    print('Before Updation')
    for x in col.find():
    print(x)

    query = { "address": { "$regex": "^A" } }
    newvalues = { "$set": { "name": "AMET Updated" } }
    x = col.update_many(query, newvalues)
    print(x.modified_count, "documents updated.")

    print('After many Updation')
    for x in col.find():
    print(x)
    """
    Before Updation
    {'_id': 10, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 12, 'name': 'ABS', 'address': 'Anna Nagar, Chennai'}
    {'_id': 13, 'name': 'ABS!@', 'address': 'ECR, Chennai'}
    {'_id': 14, 'name': 'Stanford', 'address': 'Anna Nagar, Chennai'}
    2 documents updated.
    After many Updation
    {'_id': 10, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 12, 'name': 'AMET Updated', 'address': 'Anna Nagar, Chennai'}
    {'_id': 13, 'name': 'ABS!@', 'address': 'ECR, Chennai'}
    {'_id': 14, 'name': 'AMET Updated', 'address': 'Anna Nagar, Chennai'}
    """
    After using limit to display 
    # limit parameter to limit two records
    output = col.find().limit(2)
    print('After setting Limit(2)')
    for x in output:
    print(x)
    """
    After setting Limit(2)
    {'_id': 10, 'name': 'AMET', 'address': 'ECR, Chennai'}
    {'_id': 12, 'name': 'AMET Updated', 'address': 'Anna Nagar, Chennai'}
    """

    Bon Appetite and Happy MongoDB Coding....Learning!!!



    Making Prompts for Profile Web Site

      Prompt: Can you create prompt to craft better draft in a given topic. Response: Sure! Could you please specify the topic for which you...