Angular info, build

AngularJS Forms: https://www.w3schools.com/angular/angular_forms.asp

Fetching Data From a PHP Server Running MySQL: https://www.w3schools.com/angular/angular_sql.asp

Deploy Angular 5 App

Simple answer. Use the Angular CLI

You could take the files in the /dist folder and upload them to a server. Just note, if you’re uploading them to a sub folder, you will need to run the following build command:

$ ng build –prod –base-href=”myURL”

ng build –prod –base-href=”http://localhost/projects/Angular_test/dist/”

The AngularJS learning curve

On this episode, Sean Fioritto and I discuss the AngularJS learning curve, and why he thinks it’s so nasty.
Welcome to “The Front End Developer Cast,” the podcast that helps developers be awesome at building ambitious web applications, whether you’re a JavaScript ninja, or you’re just getting started. I’m your host, Craig McKeachie.
My interview today is with Sean Fioritto, and we discuss the AngularJS learning curve, why he thinks it’s so nasty, and how he goes about making it easier to learn.
We also discuss Angular in the enterprise, and why he thinks AngularJS is great when you’re dealing with large enterprise code bases.

source: http://www.funnyant.com/learning-angularjs-the-angularjs-learning-curve/

Calculator demo with AngularJS and JQuery

,

Calculator

1
2
3
4
5
6
7
8
9
0
+
*
/
=
C


The source code:

<style>
.calcu{
  width:200px;
  margin:50px auto;
  padding:20px;
  border:1px solid #323232;
  border-radius:6px;
 }
 .h2{
  text-align:center;
  margin-top:0px;
 }
 .row{
  width:95%;
  margin:auto;
  clear:both;
 }
 .button{
  display:inline-block;
  width:20px;
  padding:10px;
  background-color:#ccc;
  margin:2px;
  text-align:center;
 }
 .button:hover{
  background-color:#323232;
  color:#fff;
  cursor:pointer;
 }
 .result{
  background-color:#C3E4ED;
  padding-right:5px;
  border:1px solid #fff;
  width:100%;
  height:30px;
  text-align:right;
  font-weight:bold;
 }
 .val{
  margin-bottom:10px;
 }

</style>

<div class="calcu" ng-app="" ng-controller="calcaController" >
 <h2>Calculator</h2>
 <div class="row val">
  <input class="result" type="text" ng-model="calc.res" />
 </div>
 <div class="button-set">
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'1';">1</div>
  <div class="button" ng-click="calc.res= calc.res+'2';">2</div>
  <div class="button" ng-click="calc.res= calc.res+'3';">3</div>
  <div class="button" ng-click="calc.res= calc.res+'4';">4</div>
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'5';">5</div>
  <div class="button" ng-click="calc.res= calc.res+'6';">6</div>
  <div class="button" ng-click="calc.res= calc.res+'7';">7</div>
  <div class="button" ng-click="calc.res= calc.res+'8';">8</div>
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'9';">9</div>
  <div class="button" ng-click="calc.res= calc.res+'0';">0</div>
  <div class="button" ng-click="calc.res= calc.res+'+';">+</div>
  <div class="button" ng-click="calc.res= calc.res+'-';">-</div>
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'*';">*</div>
  <div class="button" ng-click="calc.res= calc.res+'/';">/</div>
  <div class="button" ng-click="calc.res=calc.calculate();">=</div>
  <div class="button" ng-click="calc.res= calc.clear();">C</div>
 </div>
 </div>
</div>
<script>
function calcaController($scope) {
 $(".result").focus();
    $scope.calc = {
        res: '',
  calculate:function(){
   var x = $scope.calc;
   return eval(x.res);
  },
  clear:function(){
   $(".result").focus();
   return '';
  }
    };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

source: http://www.geeks.gallery/angularjs-introduction/