PHP/angular.php at master · Overbrd/PHP · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
        <meta name="description" content="Real estate assistant web site" >
        <meta name="author" content="Matthew C. Lind" >
		<meta name="robots" content="index, follow">
        <title>Matthew C. Lind - Portfolio 2024 - Demo Angular App's</title>
		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" >
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,600;1,600&amp;display=swap" rel="stylesheet" >
        <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500;1,600;1,700&amp;display=swap" rel="stylesheet" >
        <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&amp;display=swap" rel="stylesheet" >
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="../css/styles.css" rel="stylesheet" >
		<link href="../css/addstyles.css" rel="stylesheet" >
    </head>
    <body id="page-top" style="background:#e1e1e1;">
	<!-- Back to top button -->
<button type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
<i class="bi bi-caret-up-fill"></i>
</button>
<!-- header -->
<div class="container">
<div class="row">
<div content="nav">
<?php include 'topnavnew.php';?>
</div>
</div>
</div>
        <header class="masthead">
            <div class="container px-5">
                <div class="row gx-5 align-items-center">
                    <div class="col-lg-12">
                        <!-- Mashead text and app badges-->
                        <div class="mb-5 mb-lg-0 text-center text-lg-start">
							<h2 class="display-1 lh-1 mb-3" style="text-align:center;">Angular Experience</h2>
							<p>Used built-in Angular 1.6 directives to show and hide elements and display lists of data.</p>
							<p>Created Angular components to display details and show an array.</p>
							<p>Used one-way data binding for read-only data.</p>
							<p>Added editable fields to update a model with two-way data binding.</p>
							<p>Binded component methods to user events, i.e. keystrokes and clicks.</p>
							<p>Enabled users to select data from a master list and edit that data in the details view.</p>
							<p>Formatted data with pipes.</p>
							<p>Created a shared service to assemble data.</p>
							<p>Used routing to navigate among different views and their components.</p>
							<p>Created Angular 1.6 mobile-responsive web site using Node, Angular 1.2, Angular 1.6, HTML5, CSS3, Bootstrap, jQuery, and various JavaScript libraries.</p>
							<p>Created a shopping List using Angular 1.6 with error management.</p>
							<p>Created a to-do list built in Angular 1.6 with required fields.</p>
							<p>Created a demo of Angular 1.3 Rest API Calls in AngularJS using $http Service and placeholder data.</p>

							<h2 class="display-1 lh-1 mb-3" style="text-align:center;">Angular Demos</h2>
							<p>These are different Angular demos that display various information.</p>
							<p>Some of them include an Angular project starter kit, an Angular routing demo, a http client demo, a template, and some accordion drop down menus.</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>
<div class="row">
&nbsp;
</div>
<div class="container">
<div class="row">
<h3 style="margin-top:22px;">Angular Demos</h3>
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body d-flex flex-column" style="min-height:266px;">
        <h5 class="card-title">Angular 17 Demo Interface App</h5>
        <p class="card-text">This Angular 17 demo interface app. has a web interface with tabbed navigation. This project can be used to add Bootstrap 5 and Material to an Angular 17 frontend. More details are on the page below, including links to the code and demo online.</p>
							<a href="https://reasst.com/portfolio/angular-17-starter-demo.php" class="mt-auto btn btn-lg btn-block btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
							  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
							</svg>&nbsp;Demo Interface App</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body d-flex flex-column" style="min-height:266px;">
        <h5 class="card-title">Angular 17 Demo Routing App</h5>
        <p class="card-text">This is a demo of Angular 17 with Bootstrap 5. It displays a Home and an About page and sample content under each, and the page is formatted using bootstrap code primarily. The link is to the code on Github and has to be downloaded and run locally using Node.</p>
        <a href="https://github.com/Overbrd/Angular-17-Routing" class="mt-auto btn btn-lg btn-block btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
							  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
							</svg>&nbsp;Demo Routing App</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
<div class="card">
      <div class="card-body d-flex flex-column" style="min-height:266px;">
        <h5 class="card-title">Angular 17 Demo HttpClient App</h5>
        <p class="card-text">This is a demo of Angular 17 and it uses JSON Data from an API request to display data on a web page.</p><!--https://reasst.com/angular17/angular-17-http-app/browser/-->
        <a href="#" class="mt-auto btn btn-lg btn-block btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
							  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
							</svg>&nbsp;Demo HttpClient App (offline currently)</a>
      </div>
    </div>
  </div>
</div>

<div class="row" style="display:inline-block;position:relative;left:45%;top:18px;">
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Freasst.com%2Fportfolio%2Fangular.php" target="_blank"><img src="img/valid-html.png" alt="Valid HTML"></a><a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Freasst.com%2Fportfolio%2Fangular.php" target="_blank"><img src="img/vcss-blue.gif" alt="Valid CSS"></a>
</div>
</div>
<div class="row">
&nbsp;
</div>
<?php include 'footer-portfolio-new.php';?>

        <!-- Bootstrap core JS-->
        <script src="../js/bootstrap.bundle.min.js"></script>
        <!-- back to top-->
        <script src="../js/backtotop.js"></script>
		<!--
/////////////////////////////////////////////////////////////////
/
/ Matthew Lind Portfolio
/ reasst.com/portfolio/
/ Site Designed By: Matthew C. Lind
/ Designer: Matthew C. Lind
/ Copyright © 2024 Reasst.com
/ God Bless America
/
/////////////////////////////////////////////////////////////////
-->


    </body>

</html>