IONIC || GIT Introduction And Commands

Share:

IONIC || Populating Data Into View From Controller

DOWNLOAD EXAMPLE

DOWNLOAD
Share:

Ionic Javascript Components All Programs

Download From Google Drive "110MB"


DOWNLOAD

Share:

Material || IONIC All Units

Share:

UI Router || MVC || Todo Task App


UI Router (Restful Application Development)

1. $state $stateParms & $stateProvider.state()

  • A state corresponds to a "place" in the application in terms of the overall UI and navigation.
  • A state (via the controller / template / view properties) describes what the UI looks like and does at that place.
  • States often have things in common, and the primary way of factoring out these commonalities in this model is via the state hierarchy, i.e. parent/child states aka nested states.
·         The simplest form of state
·         A state in its simplest form can be added like this (typically within module.config):
·         <!-- in index.html -->
·         <body ng-controller="MainCtrl">
·           <section ui-view></section>
·         </body>
·         // in app-states.js (or whatever you want to name it)
·         $stateProvider.state('contacts', {
·           template: '<h1>My Contacts</h1>'
·         })
AngularJS has a pretty steep learning curve (you’re being steaped, so to speak), and things like ui-router, while they make some things easier, aren’t necessarily easy to absorb quickly, especially under the gun to get something ready in a quick fashion.

stateParams Service

As you saw previously the $stateParams service is an object that will have one key per url parameter. The $stateParams is a perfect way to provide your controllers or other services with the individual parts of the navigated url.

For example, you have the state.

.state('contacts', {
        url: "/contacts",
        params: {
            param1: null
        },
        templateUrl: 'contacts.html'
    })


Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts −
·        Model − It is the lowest level of the pattern responsible for maintaining data.
·        View − It is responsible for displaying all or a portion of the data to the user.
·        Controller − It is a software Code that controls the interactions between the Model and View.

MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.

The Model
The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.
The View
A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
The Controller
The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.
AngularJS is a MVC based framework. In the coming chapters, we will see how AngularJS uses MVC methodology.




Simple TODO list

After loading angular.min.js we create an Angular JS module called todoApp and a controller called todoController. Inside the controller we set up an empty array called tasks that will hold the todo list. We make it an attribute of the current $scope in order to make it accessible form the HTML.
We also declare a function called add (also an attribute of the $scope) that takes the value of title(we'll later see this is the name of the input box), and appends it to the list of tasks using push. That's all the JavaScript code we need for a simple TODO list.
In the HTML part we have a div element that defined the area of the AngularJS Application ng-app and the Angular JS controller ng-controller.
Inside the controller in the HTML we have two parts. The first part is an input element connected to the $scope.title attribute using ng-model and a button that uses ng-click to launch the $scope.addmethod when the button is clicked.
The second part uses the ng-repeat directive to iterate over the elements of the $scope.tasks array and display them one-by-one as list items.
examples/angular/todo1.html
1.  <script src="angular.min.js"></script>
2.  <script>
3.  angular.module('todoApp', [])
4.      .controller('todoController', function($scope){
5.          $scope.tasks = [];
6.          $scope.add = function() {
7.              $scope.tasks.push($scope.title);
8.          }
9.      })
10.  </script>
11.  <div ng-app="todoApp" ng-controller="todoController">
12.      <input ng-model="title"><button ng-click="add()">Add</button>
13.      <ul>
14.          <li ng-repeat="t in tasks">{{ t }}</li>
15.      </ul>
16.  </div>

Submit input box on pressing ENTER

It is a bit cumbersome that for every additional item we need to click on the button. It would be much better if we could just press ENTER. In order to do that we had to wrap the input element in a form and in the form add an ng-submit directive calling the $scope.add function. At the same time, in order to eliminate duplicate calling of the $scope.add function.
  <form ng-submit="add()">
  <input ng-model="title"><button>Add</button>
  </form>

Duplicate values in ng-repeat

If yo have tried the above example, you might have noticed that adding the same element twice will crash the application. The reason is that by default the ng-repeat directive assumes unique values in an array. I am not sure if having the same value in a TODO list is actually desirable, but for now I'd like to be able to allow the user to enter the same value twice. To do so we can tell ng-repeat to use the $index of the array for tracking values like this:
<li ng-repeat="t in tasks track by $index">{{ t }}</li>

Deleting an element from the TODO list

While for most of us the reality is that we have an ever growing TODO list, but sometime we get lucky and manage to finish an item. (Or maybe it just gets cancelled.) We would like to have a way to remove an element. For that we are going to add a button next to each item, and clicking on that button will remove the specific element from the array of tasks.
Adding the button is simple:
<button ng-click="delete()">x</button>
The appropriate delete function made me scratch my head a bit, but finally I got it:
$scope.delete = function() {
    $scope.tasks.splice(this.$index, 1);
}
When running the delete function this contains an attribute called $index that seems to indicated the index in the current list. We can use that to locate the element in the tasks array. Using the plain JavaScript splice function we remove one element from the array that immediately updates the list displayed on the HTML page.
examples/angular/todo2.html
1.  <script src="angular.min.js"></script>
2.  <script>
3.  angular.module('todoApp', [])
4.      .controller('todoController', function($scope) {
5.          $scope.tasks = [];
6.          $scope.add = function() {
7.              $scope.tasks.push($scope.title);
8.          }
9.          $scope.delete = function() {
10.              $scope.tasks.splice(this.$index, 1);
11.          }
12.      })
13.  </script>
14.  <div ng-app="todoApp" ng-controller="todoController">
15.      <form ng-submit="add()">
16.      <input ng-model="title"><button>Add</button>
17.      </form>
18.      <ul>
19.          <li ng-repeat="t in tasks track by $index">{{ t }} <button ng-click="delete()">x</button></li>
20.      </ul>
21.  </div>


todo1.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('todoApp', [])
.controller('todoController', function($scope){
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
})
</script>
<div ng-app="todoApp" ng-controller="todoController">
<input ng-model="title"><button ng-click="add()">Add</button>
<ul>
<li ng-repeat="t in tasks">{{ t }}</li>
</ul>
</div>

todo2.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('todoApp', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
$scope.delete = function() {
$scope.tasks.splice(this.$index, 1);
}
})
</script>
<div ng-app="todoApp" ng-controller="todoController">
<form ng-submit="add()">
<input ng-model="title"><button>Add</button>
</form>
<ul>
<li ng-repeat="t in tasks track by $index">{{ t }} <button ng-click="delete()">x</button></li>
</ul>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12199211-23', 'auto');
ga('send', 'pageview');
</script>
Share:

AngularJS Validations


Form Validation
AngularJS offers client-side form validation.
AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.
AngularJS also holds information about whether they have been touched, or modified, or not.
You can use standard HTML5 attributes to validate input, or you can make your own validation functions.
Required
Use the HTML5 attribute required to specify that the input field must be filled out:
Example
The input field is required:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

E-mail
Use the HTML5 type email to specify that the value must be an e-mail:
Example
The input field has to be an e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

Form State and Input State
AngularJS is constantly updating the state of both the form and the input fields.
Input fields have the following states:
  • $untouched The field has not been touched yet
  • $touched The field has been touched
  • $pristine The field has not been modified yet
  • $dirty The field has been modified
  • $invalid The field content is not valid
  • $valid The field content is valid
They are all properties of the input field, and are either true or false.
Forms have the following states:
  • $pristine No fields have been modified yet
  • $dirty One or more have been modified
  • $invalid The form content is not valid
  • $valid The form content is valid
  • $submitted The form is submitted
They are all properties of the form, and are either true or false.
You can use these states to show meaningful messages to the user. Example, if a field is required, and the user leaves it blank, you should give the user a warning:



Example
Show an error message if the field has been touched AND is empty:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

CSS Classes
AngularJS adds CSS classes to forms and input fields depending on their states.
The following classes are added to, or removed from, input fields:
  • ng-untouched The field has not been touched yet
  • ng-touched The field has been touched
  • ng-pristine The field has not been  modified yet
  • ng-dirty The field has been modified
  • ng-valid The field content is valid
  • ng-invalid The field content is not valid
  • ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
  • ng-invalid-key Example: ng-invalid-required
The following classes are added to, or removed from, forms:
  • ng-pristine No fields has not been modified yet
  • ng-dirty One or more fields has been modified
  • ng-valid The form content is valid
  • ng-invalid The form content is not valid
  • ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
  • ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
Add styles for these classes to give your application a better and more intuitive user interface.
Example
Apply styles, using standard CSS:
<style>
input.ng-invalid {
    background-color
: pink;
}
input.ng-valid 
{
    background-color
: lightgreen;
}

</style>
Forms can also be styled:
Example
Apply styles for unmodified (pristine) forms, and for modified forms:
<style>
form.ng-pristine {
    background-color
: lightblue;
}
form.ng-dirty 
{
    background-color
: pink;
}

</style>


Share: