Labels

Friday, October 31, 2014

MVC vs MVP vs MVVM

Read my earlier post - http://arun-ts.blogspot.jp/2010/12/mvvm-silverlight.html

 

 

 

 

General rules for when to use which?

 

MVP

  • Use in situations where binding via a datacontext is not possible.
  • Windows Forms is a perfect example of this.  
  • In order to separate the view from the model, a presenter is needed.  Since the view cannot directly bind to the presenter, information must be passed to it view an interface (IView).

 

MVVM

  • Use in situations where binding via a datacontext is possible.  Why?  The various IView interfaces for each view are removed which means less code to maintain.
  • Some examples where MVVM is possible include WPF and javascript projects using Knockout.

 

MVC

  • Use in situations where the connection between the view and the rest of the program is not always available (and you can't effectively employ MVVM or MVP).
  • This clearly describes the situation where a web API is separated from the data sent to the client browsers.  
  • Microsoft's ASP.NET MVC is a great tool for managing such situations and provides a very clear MVC framework

 

 

Model-View-Presenter

 

1.       In MVP, the Presenter contains the UI business logic for the View.

2.       All invocations from the View delegate directly to Presenter.

3.       The Presenter is also decoupled directly from the View and talks to it through an interface. This is to allow mocking of the View in a unit test. I.e. The Presenter is not responsible for determining which View is displayed in response to any action including when the application loads, instead specific view instance is passed to the Presenter on the load of the view.

4.       Here View has a reference to Presenter (But completely decoupled from each other's and communicate to each other's by an interface) but View has no reference to Model.

 

 

public partial class Views_add_category_view : System.Web.UI.UserControl, IAddCategoryView

{

  protected void Page_Load(object sender, EventArgs e)

  {

    presenter = new AddCategoryPresenter(this);

  }

}

 

One common attribute of MVP is that there has to be a lot of two-way dispatching. For example, when someone clicks the "Save" button, the event handler delegates to the Presenter's "OnSave" method. Once the save is completed, the Presenter will then call back the View through its interface so that the View can display that the save has completed.

 

Imp: MVP tends to be a very natural pattern for achieving separated presentation in Web Forms. The reason is that the View is always created first by the ASP.NET runtime.

 

Two primary variations of MVP

 

Passive View: The View is as dumb as possible and contains almost zero logic. The Presenter is a middle man that talks to the View and the Model. The View and Model are completely shielded from one another. +

The Model may raise events, but the Presenter subscribes to them for updating the View.

Similarly View exposes setter properties which the Presenter uses to set the data in the Model.

All state is managed in the Presenter and not the View.

 

  • Pro: maximum testability surface; clean separation of the View and Model
  • Con: more work (for example all the setter properties) as you are doing all the data binding yourself.

 

Supervising Controller: The Presenter handles user gestures. The View binds to the Model directly through data binding.

In this case it's the Presenter's job to pass off the Model to the View so that it can bind to it (Like in ASP.NET MVC). The Presenter will also contain logic for gestures like pressing a button, navigation, etc.

 

  • Pro: by leveraging databinding the amount of code is reduced.
  • Con: there's less testable surface (because of data binding), and there's less encapsulation in the View since it talks directly to the Model.

 

 

Model-View-Controller

 

1.       In MVC, the Controller contains the UI business logic for the View.

2.      All action in the View correlates with a call to a Controller along with an action.

3.       In the MVC, Controller is tightly coupled to the View. I.e. Controller is responsible for determining which View is displayed in response to any action including when the application loads. This differs from MVP where actions route through the View to the Presenter. Also in MVC, every action in the View correlates with a call to a Controller along with an action. In the web each action involves a call to a URL on the other side of which there is a Controller who responds. Once that Controller has completed its processing, it will return the correct View. The sequence continues in that manner throughout the life of the application:

 

    Action in the View

        -> Call to Controller

        -> Controller Logic

        -> Controller returns the View.

 

One other big difference In implementations of MVC with MVP, the View usually will not have any logic in the code behind.

This is contrary to MVP where it is absolutely necessary as if the View always has delegation code to the Presenter.

 

Another big difference - Unlike view and controller (In MVC), view and presenter (In MVP) are completely decoupled from each other's and communicate to each other's by an interface

 

Today, this pattern is used by many popular framework like as Ruby on Rails, Spring Framework, Apple iOS Development and ASP.NET MVC.

 

Presentation Model / Model-View-ViewModel.

 

One other pattern to look at is the Presentation Model pattern. In this pattern there is no Presenter. Instead the View binds directly to a Presentation Model. The Presentation Model is a Model crafted specifically for the View. This means this Model can expose properties that one would never put on a domain model as it would be a violation of separation-of-concerns. In this case, the Presentation Model binds to the domain model, and may subscribe to events coming from that Model. The View then subscribes to events coming from the Presentation Model and updates itself accordingly. The Presentation Model can expose commands which the view uses for invoking actions. The advantage of this approach is that you can essentially remove the code-behind altogether as the PM completely encapsulates all of the behaviour for the view. This pattern is a very strong candidate for use in WPF applications and is also called Model-View-ViewModel.

 

 

Reference:

 

http://stackoverflow.com/questions/19444431/what-is-difference-between-mvc-mvp-mvvm-design-pattern-in-terms-of-coding-c-sh

http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/

 

Hope this helps.

 

Thanks & Regards,

Arun Manglick,

 

Monday, September 15, 2014

Symbol Alt Codes

Symbols With the ALT key plus numbers

  • © Copyrighted [0169]
  • coeur [3]
  • ® Reserved mark [0174]
  • Service mark [8480]
  • Celsius [8451]
  • ℅ Care of [8453]
  • Fahrenheit [8457]
  • № Number symbol [8470]
  • ℗ Sound recording copyright [8471]
  • Prescription/pharmaceutical symbol [8478]
  • Ω Ohm [8486]
  • Inverted ohm [8487]
  • Sunshine [9728]
  • Cloud [9729]
  • Umbrella [9730]
  • Snowman [9731]
  • Comet [9732]
  • Star (solid) [9733]
  • Star (outline) [9734]
  • Lightning [9735]
  • Thunderstorm [9736]
  • Sun [9737]
  • Ascending node [9738]
  • Descending node [9739]
  • Conjunction [9740]
  • Opposition [9741]
  • Phone (solid) [9742]
  • Phone (outline) 9743]
  • Checkbox [9744]
  • Ballot box [9745]
  • Ballot box with X [9746]
  • Saltire (St. Andrew's Cross) [9747]
  • Left-pointing index finger (solid) [9754]
  • Right-pointing index finger (solid) [9755]
  • Left-pointing index finger (outline) [9756]
  • Upwards-pointing index finger (outline) [9757]
  • Right-pointing index finger (outline) [9758]
  • Downwards-pointing index finger (outline) [9759]
  • Skull & crossbones [9760]
  • Caution sign [9761]
  • Radioactive sign [9762]
  • Biohazard sign [9763]
  • Caduceus or "Kerykeion" [9764]
  • Ankh [9765]
  • Eastern Christian cross [9766]
  • Chi Rho cross [9767]
  • Patriarchal cross [9768]
  • Greek cross [9769]
  • Crescent moon & star [9770]
  • Farsi symbol [9771]
  • Adi Shakti [9772]
  • Hammer & sickle [9773]
  • Peace sign [9774]
  • Yin & yang [9775]
  • Trigram Heaven [9776]
  • Trigram Lake [9777]
  • Trigram Fire [9778]
  • Trigram Thunder [9779]
  • Trigram Wind [9780]
  • Trigram Water [9781]
  • Trigram Mountain [9782]
  • Trigram Earth [9783]
  • Dharma wheel [9784]
  • Frowning face [9785]
  • Smiley face [9786]
  • Black smiley face [9787]
  • Waxing crescent moon [9789]
  • Waning crescent moon [9790]
  • Mercury [9791]
  • Venus (female symbol) [9792]
  • Earth symbol [9793]
  • Mars (male symbol) [9794]
  • Jupiter [9795]
  • Saturn [9796]
  • Uranus [9797]
  • Neptune [9798]
  • Pluto [9799]
  • Aries [9800]

Symbols With the ALT key plus numbers

  • Taurus [9801]
  • Gemini [9802]
  • Cancer [9803]
  • Leo [9804]
  • Virgo [9805]
  • Libra [9806]
  • Scorpio [9807]
  • Sagittarius [9808]
  • Capricorn [9809]
  • Aquarius [9810]
  • Pisces [9811]
  • White king [9812]
  • White queen [9813]
  • White rook [9814]
  • White bishop [9815]
  • White knight [9816]
  • White pawn [9817]
  • Black king [9818]
  • Black queen [9819]
  • Black rook [9820]
  • Black bishop [9821]
  • Black knight [9822]
  • Black pawn [9823]
  • Black spade suit [9824]
  • Red heart suit [9825]
  • Red diamond suit [9826]
  • Black club suit (or shamrock) [9827]
  • Red spade suit [9828]
  • Black heart suit (or valentine) [9829]
  • Black diamond suit [9830]
  • Red club suit [9831]
  • Hot springs [9832]
  • Musical quarter note [9833]
  • Musical eighth note [9834]
  • Musical single bar note [9835]
  • Musical double bar note [9836]
  • Flat note [9837]
  • Natural note [9838]
  • Sharp note [9839]
  • Cut above [9985]
  • Cut here [9986]
  • Cut below [9987]
  • Scissors [9988]
  • Public pay phone [9990]
  • Film reel (tape spool) [9991]
  • Airport/airplane [9992]
  • Envelope/mail/email [9993]
  • Victory sign [9996]
  • Signature/sign here [9997]
  • Pencil diagonal down [9998]
  • Pencil [9999]
  • Pencil diagonal up [10000]
  • Checkmark [10003]
  • Heavy checkmark [10004]
  • Multiplication sign/X [100005]
  • Heavy multiplication sign/X [10006]
  • Ballot X [10007]
  • Heavy ballot X [10008]
  • Latin Roman cross [10013]
  • Latin cross 3D shadow [10014]
  • Latin cross outline [10015]
  • Maltese Cross [10016]
  • Star of David [10017]
  • Quotation mark single turned comma [10075]
  • Quotation mark single comma [10076]
  • Quotation mark double turned comma [10077]
  • Quotation mark double comma [10078]
  • ™ Trademark [0153]
  • ○= 777
  • ∞ Infinity [236]
  • [479]
  • Bar [478]
  • [457]
  • Play Forward [16]
  • Play Reverse [17]
  • Scroll Up [30]
  • Scroll Down [31]

 

 

Hope this helps.

 

Arun

 

Wednesday, September 3, 2014

AngularJS - Quick Reference At One Go

This is a brief write-up on the Angular JS introduction. Here we'll see details on below:

 

1.     AngularJS Expressions

2.     AngularJS Controllers

3.     AngularJS Objects

4.     AngularJS Arrays

5.     AngularJS Filters

6.     AngularJS XMLHttpRequest - $http

7.     AngularJS Tables

8.     AngularJS SQL

9.     AngularJS HTML DOM

10.  AngularJS Events

11.  AngularJS Modules

12.  AngularJS Forms

13.  AngularJS Input Validation

14.  AngularJS BootStrap

 

 

AngularJS Directives

 

AngularJS extends HTML with ng-directives.

 

Ø  The ng-app directive defines an AngularJS application.

Ø  The ng-model directive binds the HTML (value of HTML controls (input, select, textarea)) to application data.

The ng-model directive can also:

Ø  Provide type validation for application data (number, email, required).

Ø  Provide status for application data (invalid, dirty, touched, error).

Ø  Provide CSS classes for HTML elements.

Ø  Bind HTML elements to HTML forms.

 

Ø  The ng-bind directive binds application data to the HTML view.

Ø  The ng-init directive initialize AngularJS application variables.

Ø  The ng-repeat directive repeats an HTML element.

Ø  The ng-disabled directive binds application data directly to the HTML disabled attribute.

Ø  The ng-show directive hides or shows an HTML element.

Ø  The ng-click directive defines an AngularJS click event.

Ø  The ng-show directive defines the visibility of an application.

 

 

In Other Words:

AngularJS starts automatically when the web page has loaded.

 

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

 

 

<!DOCTYPE html>

<html>

<body>

<div ng-app=""  ng-init="name ='John'" >

<p>Input something in the input box:</p>

<p>Name: <input type="text" ng-model="name" value=" "></p>

<p ng-bind="name"></p>

</div>

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

</body>

</html>

 

 

AngularJS Expressions

 

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions binds data to HTML the same way as the ng-bind directive.

AngularJS will "output" data exactly where the expression is written.

 

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

 

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>My first expression: {{ 5 + 5 }} </p>
</div>

 

<div ng-app="" ng-init="quantity=1; cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>

 

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

 

AngularJS Controllers

 

AngularJS applications are controlled by controllers.

The ng-controller directive defines the controller.

The controller code will execute when the page loads.

 

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

The $scope of the controller is the application (the HTML element) it is referred from.

 

 

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function
personController($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

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

Controller Properties

 

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="person.firstName"><br>
Last Name: <input type="text" ng-model="person.lastName"><br>
<br>
Full Name: {{person.firstName + " " + person.lastName}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>

 

Application explained:

Ø  The ng-controller directive names the controller object - personcontroller

Ø  The function personController is a standard JavaScript object constructor.

Ø  The personcontroller object has one property: $scope.person.

Ø  The person object has two properties: firstName and lastName.

Ø  The ng-model directives binds the input fields to the controller properties (firstName and lastName).

 

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

Controller Methods:

 

<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="person.firstName"><br>
Last Name: <input type="text" ng-model="person.lastName"><br>
<br>
Full Name: {{person.fullName()}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
            var x;
            x = $scope.person;
            return x.firstName + " " + x.lastName;
        }
    };
}
</script>

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

Controller In External Files:

 

<div ng-app="" ng-controller="personController">


First Name: <input type="text" ng-model="person.firstName"><br>
Last Name: <input type="text" ng-model="person.lastName"><br>
<br>
Full Name: {{person.firstName + " " + person.lastName}}
</div>


<script src="personController.js"></script>

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

<div ng-app="" ng-controller="namesController">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

 

namesController.js

function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}

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

 

AngularJS Objects

 

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>Last name is {{ person.lastName }}</p>

<p>First name is <span ng-bind="person. firstName "></span></p>
</div>

 

AngularJS Arrays

 

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are {{ points[2]}}</p>
</div>

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

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

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

// Array of Objects

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

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

AngularJS Filters

 

AngularJS filters can be used to transform data:

A filter can be added to an expression with a pipe character (|) and a filter.

 

Filter

Description

currency

Format a number to a currency format.

filter

Select a subset of items from an array.

lowercase

Format a string to lower case.

uppercase

Format a string to upper case.

orderBy

Orders an array by an expression.

 

 

<div ng-app="" ng-controller="personController">
<p>The name is {{ person.lastName | uppercase }}</p>
</div>

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

<div ng-app="" ng-controller="costController">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>

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

<div ng-app="" ng-controller="namesController">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<div>

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

<div ng-app="" ng-controller="namesController">

<p><input type="text" ng-model="name"></p>
<ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>

 

Output:

  KAI, Denmark

  JANI, Norway

  HEGE, Sweden

 

AngularJS XMLHttpRequest - $http

 

AngularJS $http is a service for reading data from web servers.

$http.get(url) is the function to use for reading server data.

 

<!DOCTYPE html>

<html>

<body>

 

<div ng-app="" ng-controller="customersController">

 

<ul>

  <li ng-repeat="x in customers">

    {{ x.Name + ', ' + x.Country }}

  </li>

</ul>

 

</div>

 

<script>

function customersController($scope,$http) {

  $http.get("http://www.w3schools.com//website/Customers_JSON.php")

  .success(function(response) {$scope.customers= response;});

}

</script>

 

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

 

</body>

</html>

 

AngularJS Tables

 

Just use below, inplace of <ul> in above example

 

<table>
  <tr ng-repeat="x in customers ">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

 

<table>
  <tr ng-repeat="x in customers | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase}}</td>
  </tr>
</table>

 

AngularJS SQL

 

The code from the previous details AngularJS XMLHttpRequest - $http,  can also be used to read from databases.

http://www.w3schools.com/angular/angular_sql.asp

 

AngularJS HTML DOM

 

The ng-disabled directive binds application data directly to the HTML disabled attribute.

 

<div ng-app="">
<p>
<input type="checkbox" ng-model="mySwitch">Button
<button ng-disabled="mySwitch">Click Me!</button>
</p>

 

<p>

Value Of Checkbox Is: {{ mySwitch }}

</p>

 

</div>
</div>

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

The ng-show directive hides or shows an HTML element.

 

<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>

 

You can use an expression that evaluates to true or false (like ng-show="hour < 12"), to hide and show HTML elements

 

<div ng-app="">

<div ng-app="" ng-init="quantity=5">


<p ng-show=" quantity ==5 ">I am visible.</p>
<p ng-show=" quantity >5 ">I am not visible.</p>
</div>

 

AngularJS Events

 

The ng-click directive defines an AngularJS click event.

 

<div ng-app="" ng-controller="myController">


<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>

</div>

 

 

The ng-show directive defines the visibility of an application.

·         The value ng-show="true" (boolean value) makes the element visible.

·         The value ng-show="false" makes the element invisible.

 

 

<div ng-app="" ng-controller="eventController">
<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: <input type="text" ng-model="person.firstName"><br>
Last Name: <input type="text" ng-model="person.lastName"><br>
<br>
Full Name: {{person.firstName + " " + person.lastName}}
</p>

<script src=" CommonController.js"></script>


</div>

 

AngularJS Modules

 

http://www.w3schools.com/angular/angular_modules.asp

 

 

AngularJS Forms

 

An AngularJS form is a collection of input controls.

 

HTML Controls:

 

HTML input elements are called HTML controls:

·         input elements

·         select elements

·         button elements

·         textarea elements

 

HTML Forms:

 

HTML forms group HTML controls together.

 

<div ng-app="" ng-controller="formController">


  <form novalidate>
    First Name:<br>  <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>  <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = </p>
  <p>master = </p>

 

<script src=" CommonController.js"></script>


</div>

 

 

AngularJS Input Validation

 

AngularJS forms and controls can provide validation services, and notify users of invalid input.

 

<!DOCTYPE html>
<html>

<body>
<h2>Validation Example</h2>

<form  ng-app=""  ng-controller=" validateController " name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script src=" CommonController.js"></script>

</body>
</html>

 

AngularJS BootStrap

 

Note:

·         Bootstrap is a free collection of tools for creating websites and web applications.

·         It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

 

Twitter Bootstrap is the preferred style sheet for AngularJS Bootstrap.

Below is a complete HTML example, with all AngularJS directives and Bootstrap classes explained.

 

To include Twitter Bootstrap in your AngularJS application, add the following line to your <head> element:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

 

Note: Check Attached - AngularBootStrap.JPG (For Form Design)

 

<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-controller="userController">
<div class="container">

<h2>Bootstrap Demo</h2>
-------------------------------------------------------------
<table class="table table-striped">
  <thead>
  <tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  </thead>
<tbody>
  <tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;
Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr>
</tbody>
</table>
-------------------------------------------------------------
<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Create New User
</button>
<hr>
-------------------------------------------------------------
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">
  <div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
  </div>
  <div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
  </div>
  <div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
  </div>
  <div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
  </div>
</form>
-------------------------------------------------------------
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>&nbsp;&nbsp;Save Changes
</button>
</div>
-------------------------------------------------------------
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src = "myUsers.js"></script>

<script src=" CommonController.js"></script>


</body>
</html>>

 

Bootstrap Classes Explained:

 

Element

Bootstrap Class

Defines

<div>

container

A content container

<table>

table

A table

<table>

table-striped

A striped table

<button>

btn

A button

<button>

btn-success

A success button

<span>

glyphicon

A glyph icon

<span>

glyphicon-pencil

A pencil icon

<span>

glyphicon-user

A user icon

<span>

glyphicon-save

A save icon

<form>

form-horizontal

A horizontal form

<div>

form-group

A form group

<label>

control-label

A control label

<label>

col-sm-2

A 2 columns span

<div>

col-sm-10

A 10 columns span

 

 

Below is the CommonController.js file, used in all above examples:

 

CommonController.js:

 

<script>

function personController($scope) {

    $scope.person = {

        firstName: "John",

        lastName: "Doe",

        fullName: function() {

            var x;

            x = $scope.person;

            return x.firstName + " " + x.lastName;

        }

    };

}

 

function namesController($scope) {

    $scope.names = [

        {name:'Jani',country:'Norway'},

        {name:'Hege',country:'Sweden'},

        {name:'Kai',country:'Denmark'}

    ];

}

 

function costController($scope) {

    $scope.quantity = 1;

    $scope.cost = 5;

}

 

function customersController($scope,$http) {

  $http.get("http://www.w3schools.com//website/Customers_JSON.php")

  .success(function(response) {

                $scope.customers= response;

              });

}


function eventController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}

 

function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};

 

function validateController($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
}

 

function userController($scope) {


$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';


$scope.
users = [
{id:1, fName:'Hege',  lName:"Pege" },
{id:2, fName:'Kim',   lName:"Pim" },
{id:3, fName:'Sal',   lName:"Smith" },
{id:4, fName:'Jack',  lName:"Jones" },
{id:5, fName:'John',  lName:"Doe" },
{id:6, fName:'Peter', lName:"Pan" }
];


$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;

$scope.
editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName;
  }
};

$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});

//Note: $scope.watch    - Watches model variables


$scope.
test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;


  if ($scope.edit && (!$scope.fName.length ||
  !$scope.lName.length ||
  !$scope.passw1.length || !$scope.passw2.length)) {
       $scope.incomplete = true;
  }
};
}

 

</script>

 

Hope this helps.

 

Regards,

Arun Manglick