Key Knowledge Angular Js

Key Knowledge required about Angular JS

• Created by Google
• Model-view-controller framework

Views

• Html based template
• Templates are extended with angular elements
• html elements with ng- attributes, these are called angular directives
• A directive modifies the functionality {{ Double Curly Braces indicate that data will be replaced with data binding{ Single Curly Braces replaces a reference with an object

Example Code

<ul>
  <li ng-click='buyItem(item)' ng-class="{purchased: item.status == 'purchased'}" ng-repeat="item in items">
    {{ item.name }}
  </li>
</ul>

Controllers

• Connected to each view
• Js code
• Bridge between views and data models
• Concept of scope: shared context of view in DOM and javascript code
• Definitions of data models that angular binds to interfaces
• Business logic

Example code

.controller('ListCtrl', function($scope){
  $scope.items = [];
  $buyItem = function(){

  }
});

Custom directives

• New html elements that create components
• Exactly what ionic does

Factors or Services

• Singleton: Class that can only have a single instantiation at a time, only 1 object will ever exist of that class
• Encapsulate shared functions
• Closely related to dependency injection - inject services into controllers when required

Example code

.factory('parkData', function (){
    var theParkData = [];
    return {
      initData: function (theData){ ... some code ... },
      getParks: function (){ ...some code... }
    }
  });