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/”

Angular Bootstrap Former with Laravel

An Angular module will handle form validation from server side and display errors in combination with Bootstrap.

Angularjs form validation is perfect, but you also need to validate the form data in server. This module will help you submit the form, display the errors message, and execute the callback when the form submit successfully.

https://github.com/Evolpas/angular-bootstrap-former

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/