Exercise 1 (JavaScript)

  1. Create a service person using the module pattern.
  2. The person service keeps its details including firstName and lastName private.
  3. The person service exposes the getFirstName method.
  4. Define a controller HelloCntl using a constructor function passing it the person service.
  5. The HelloCntl controller exposes the sayHello method which returns a greeting (as as a string) getting the name from the person service.

Exercise 1 (JavaScript) - Solution


var person = (function () {
      var details = {
        firstName : 'John',
      };
      return {
        getFirstName : function () {
          return details.firstName;
        }
      };})(),
    HelloCntl = function (person) {
      this.sayHello = function () {
        return 'Hello ' + person.getFirstName() + '!';
      };
    }, helloCntl1;

helloCntl1 = new HelloCntl(person);
console.log(helloCntl1.sayHello());

Exercise 2

Create form for editing user profile


userProfile{
    firstName:''    //min-length=3, required
    lastName:''     //min-length=3, required
    password:''     //required
    email:'',       //required valid email
    isCustomer:''   //yes or no
}

Form should have the following features:

  1. Provides Submit and Reset Button
  2. Submit button should be enabled only if form is valid
  3. Form is valid if user enters 2 equal password and all inputs are valid
  4. Form should provide inline validation messages

Exercise 3

Create directive for simple tab bar


$scope.tabs = [
    {
        title: 'Tab1',
        content: 'Content of Tab1'
    },
    {
        title: 'Tab2',
        content: 'Content of Tab2'
    }
];

Directive should render the following widget

Exercise 3 - Solution




   




.directive('tabBar', function(){
  return {
    restrict:'E',
    templateUrl:'tabbar.html',
    scope:{
      tabs:'='
    },
    link: function(scope, element, attr){
      scope.currentTab=0;
      scope.select=function(index){
        scope.currentTab=index;
      };
    }
  };
});