AngularJs

MVA Angular JS Demo

by Abid Shaik

HTML

<body ng-app="myApp">
  <!-- Root of the Applicaion-->
  <div ng-controller="EventCntrl">
    <h1>
            {{Title}}
        </h1>
    <ul>
      <li><a href="{{Menu[0].href}}">{{Menu[0].name}}</a></li>
      <li><a href="{{Menu[1].href}}">{{Menu[1].name}}</a></li>
    </ul>
    <input type="text" ng-model="serCity" placeholder="Search City" />
    <ul>
      <!-- using ng-repeat-->
      <li ng-repeat="city in Cities | SearchCity: serCity | orderBy: 'city' |  limitTo : 7  "><a href="{{city}}">{{city}}</a></li>
    </ul>
    <input type="button" value="Set Title" ng-click="SetTitle(TextBxText)" />
    <input type="button" value="Reset Title" ng-click="ResetTitle()" />
  </div>

  <div>
    <input type="text" ng-model="TextBxText" />
    <p>
      {{TextBxText}}
    </p>

    <h1>
            Angular Js Static as is {{TextBxText}}
        </h1>
  </div>
</body>

JavaScript

//console.log(angular); 
/*Make sure In JSFiddle JavaScript LoadType is set to No Wrap In Head*/
var myAppModule = angular.module("myApp", []);

myAppModule.factory("MainTitle", [function() {
  return {
    title: "This is Title From Global Or Factory "
  };
}]);
//Adding a New Custom Filter
myAppModule.filter("SearchCity", function() {
  return function(items2Search, searchVal) {

    var filtered = [];
    if (!searchVal) {
      return items2Search;
    }

    angular.forEach(items2Search, function(item) {
      if (angular.lowercase(item).indexOf(angular.lowercase(searchVal)) != -1) {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

//Directive lower camel case 
myAppModule.directive("customDirective", function() {
  return {
    //List of Properties check in Doc. 
    restrict: 'E', // E- Element, A- Attribute, C- Class, M - Comment
    templateUrl: '', //Html src of inline HTML 
    controller: function($scope) {
      //Do something here
    },
    link: function($scope, element, attrs) {}
  }
});

/*Upper Camel Case*/
myAppModule.controller("EventCntrl", ['$scope', 'MainTitle', function($scope, MainTitle) {
  $scope.Title = MainTitle.title;
  $scope.Menu = [{
    name: "Events",
    href: "index.html"
  }, {
    name: "Contacts",
    href: "contacts.html"
  }, {
    name: "ThirdLink",
    href: "3rdlink.html"
  }, {
    name: "4thLink",
    href: "4thlink.html"
  }];

  $scope.Cities = ["Raleigh", "Cary", "Chappel Hill", "Durham", "Charlotte", "Apex", "New York", "Los Angeles", "Las Vegas"];

  $scope.SetTitle = function(title) {
    $scope.Title = title;
  };
  $scope.ResetTitle = function() {
    $scope.Title = "Title is Reset to 'Coming from Controller' "
  }
}]);

//console.log(myAppModule);