Angular JS

                                             By Google

Warning

What is Angular?

A Javascript framework for single page apps

Concepts

  • Data and Data Binding
  • Directives
  • Linking Data with Controls
  • Filtering
  • Controllers


Data and Data Binding

Data-binding in Angular web apps is the automatic synchronization of data between the model and view components.  Angular implements data-binding so can you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change,  and vice versa.


Example 

 <div ng-init="univ='The Ohio State University'; mascot='Brutus Buckeye';">     I go to {{univ}}. Our mascot is {{mascot}}. </div>

Output

I go to The Ohio State University.
Our mascot is Brutus Buckeye



Directives

At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children.


Example 

 <div ng-init="fiveDevs=['Mark T', 'Brandon', 'Evan', 'Naman', 'Mark N'];">      <h1>The 5Devs</h1>      <ul>            <li ng-repeat="dev in fivedevs">{{dev}}</li>      </ul> </div>



Output

The 5Devs

  1. {{dev}}
    2.

Linking Data with Controls

 This is a bidirectional relationship between the angular models/data and the DOM

Example 

 <div>      <input type="text" ng-model="data.message">
						      <h1>{{data.message}}</h1> </div>

{{data.message}}

Filtering

Are reusable functions to determine what data is needed for the app at the given time.

Example

 <div ng-init="fiveDevs=['Mark T', 'Brandon', 'Evan', 'Naman', 'Mark N'];">      <input type="text" ng-model="searchString" />      <ul>           <li ng-repeat="devs in fiveDevs | filter: searchString">{{dev}}</li>      </ul> </div>


  • {{devs}}

Controllers

Just like Rails, the Controller handles the business side logic of the application.

Example

 <div ng-controller="myController">
      Name: <input type="text" ng-model="searchitem.name" /><br />
      Interest: <input type="text" ng-model="searchitem.interest" />
      <ul>
           <li ng-repeat="dev in devs | filter: searchitem ">
                {{dev.name}}: {{dev.interest}}
           </li>
      </ul>
  </div>
       <script>
      function myController($scope) {
							$scope.fiveDevs=[{name: 'Mark T',    interest: 'Javascript'},
							{name: 'Brandon', interest: 'Ruby'},
							{name: 'Evan',    interest: 'HTML CSS'},
							{name: 'Naman',   interest: 'Ruby'},
							{name: 'Mark N',  interest: 'Javascript'}];
						}
 </script>
Name:    
Interest:

  • {{dev.name}}: {{dev.interest}}

Demo Time