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

element to the application variable name. */ Here are content to be intrepreted /////////////////////////////////// // 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. // Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

My first expression: {{ 5 + 5 }}

//If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

My first expression: {{ 5 + 5 }}

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

Name:

// AngularJS numbers are like JavaScript numbers:

Total in dollar: {{ quantity * cost }}

//AngularJS strings are like JavaScript strings:

The name is

//AngularJS objects are like JavaScript objects:

The name is {{ person.lastName }}

//AngularJS arrays are like JavaScript arrays:

The third result is {{ points[2] }}

// Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables. // Unlike JavaScript expressions, AngularJS expressions can be written inside HTML. // AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do. // AngularJS expressions support filters, while JavaScript expressions do not. /////////////////////////////////// // AngularJS Directives //AngularJS directives are extended HTML attributes with the prefix ng-. //The ng-app directive initializes an AngularJS application. //The ng-init directive initializes application data. //The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Name:

You wrote: {{ firstName }}

//Using ng-init is not very common. You will learn how to initialize data in the chapter about controllers. //The ng-repeat directive repeats an HTML element:

{{ x }}

//The ng-repeat directive used on an array of objects:

{{ x.name + ', ' + x.country }}

// AngularJS is perfect for database CRUD (Create Read Update Delete) applications. // Just imagine if these objects were records from a database. // The ng-app directive defines the root element of an AngularJS application. // The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. // Later you will learn how ng-app can have a value (like ng-app="myModule"), to connect code modules. // The ng-init directive defines initial values for an AngularJS application. // Normally, you will not use ng-init. You will use a controller or module instead. // You will learn more about controllers and modules later. //The ng-model directive binds the 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-repeat directive clones HTML elements once for each item in a collection (in an array). /////////////////////////////////// // AngularJS Controllers // AngularJS controllers control the data of AngularJS applications. // AngularJS controllers are regular JavaScript Objects. // AngularJS applications are controlled by controllers. // The ng-controller directive defines the application controller. // A controller is a JavaScript Object, created by a standard JavaScript object constructor.

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

//Application explained: //The AngularJS application is defined by ng-app="myApp". The application runs inside the

. //The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller. //The myCtrl function is a JavaScript function. //AngularJS will invoke the controller with a $scope object. //In AngularJS, $scope is the application object (the owner of application variables and functions). //The controller creates two properties (variables) in the scope (firstName and lastName). //The ng-model directives bind the input fields to the controller properties (firstName and lastName). //The example above demonstrated a controller object with two properties: lastName and firstName. //A controller can also have methods (variables as functions):

First Name:
Last Name:

Full Name: {{fullName()}}

//In larger applications, it is common to store controllers in external files. //Just copy the code between the tags into an external file named personController.js:

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

// For the next example we will create a new controller file: angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }); //Save the file as namesController.js: //And then use the controller file in an application:

{{ x.name + ', ' + x.country }}

/////////////////////////////////// // AngularJS Filers // Filters can be added to expressions and directives using a pipe character. // AngularJS filters can be used to transform data: **currency: Format a number to a currency format. **filter: Select a subset of items from an array. **lowercase: Format a string to lower case. **orderBy: Orders an array by an expression. **uppercase: Format a string to upper case. //A filter can be added to an expression with a pipe character (|) and a filter. //(For the next two examples we will use the person controller from the previous chapter) //The uppercase filter format strings to upper case:

The name is {{ lastName | uppercase }}

//The lowercase filter format strings to lower case:

The name is {{ lastName | lowercase }}

//The currency filter formats a number as currency:

Total = {{ (quantity * price) | currency }}

//A filter can be added to a directive with a pipe character (|) and a filter. //The orderBy filter orders an array by an expression:

{{ x.name + ', ' + x.country }}

//An input filter can be added to a directive with a pipe character (|) //and filter followed by a colon and a model name. //The filter filter selects a subset of an array:

{{ (x.name | uppercase) + ', ' + x.country }}

/////////////////////////////////// // AngularJS AJAX - $http //$http is an AngularJS service for reading data from remote servers. // The following data can be provided by a web server: // http://www.w3schools.com/angular/customers.php // **Check the URL to see the data format** // AngularJS $http is a core service for reading data from web servers. // $http.get(url) is the function to use for reading server data.

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

Application explained: // The AngularJS application is defined by ng-app. The application runs inside a

. // The ng-controller directive names the controller object. // The customersCtrl function is a standard JavaScript object constructor. // AngularJS will invoke customersCtrl with a $scope and $http object. // $scope is the application object (the owner of application variables and functions). // $http is an XMLHttpRequest object for requesting external data. // $http.get() reads JSON data from http://www.w3schools.com/angular/customers.php. // If success, the controller creates a property (names) in the scope, with JSON data from the server. // Requests for data from a different server (than the requesting page), are called cross-site HTTP requests. // Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers. // In modern browsers, cross-site HTTP requests from scripts are restricted to same site for security reasons. // The following line, in our PHP examples, has been added to allow cross-site access. header("Access-Control-Allow-Origin: *"); /////////////////////////////////// // AngularJS Tables // Displaying tables with angular is very simple:

// To sort the table, add an orderBy filter:

// To display the table index, add a with $index:

// Using $even and $odd

/////////////////////////////////// // AngularJS HTML DOM //AngularJS has directives for binding application data to the attributes of HTML DOM elements. // The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

Button

//Application explained: // The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute. // The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch. // If the value of mySwitch evaluates to true, the button will be disabled:

// If the value of mySwitch evaluates to false, the button will not be disabled:

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

I am visible.

I am not visible.

// The ng-show directive shows (or hides) an HTML element based on the value of ng-show. // You can use any expression that evaluates to true or false:

I am visible.

/////////////////////////////////// // AngularJS Events // AngularJS has its own HTML events directives. // The ng-click directive defines an AngularJS click event.

// The ng-hide directive can be used to set the visibility of a part of an application. // The value ng-hide="true" makes an HTML element invisible. // The value ng-hide="false" makes the element visible.

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

//Application explained: // The first part of the personController is the same as in the chapter about controllers. // The application has a default property (a variable): $scope.myVar = false; // The ng-hide directive sets the visibility, of a

element with two input fields, // according to the value (true or false) of myVar. // The function toggle() toggles myVar between true and false. // The value ng-hide="true" makes the element invisible. // The ng-show directive can also be used to set the visibility of a part of an application. // The value ng-show="false" makes an HTML element invisible. // The value ng-show="true" makes the element visible. // Here is the same example as above, using ng-show instead of ng-hide:

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

/////////////////////////////////// // AngularJS Modules // An AngularJS module defines an application. // The module is a container for the different parts of an application. // The module is a container for the application controllers. // Controllers always belong to a module. // This application ("myApp") has one controller ("myCtrl"):

// It is common in AngularJS applications to put the module and the controllers in JavaScript files. // In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:

//myApp.js var app = angular.module("myApp", []); // The [] parameter in the module definition can be used to define dependent modules. // myCtrl.js app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName= "Doe"; }); // Global functions should be avoided in JavaScript. They can easily be overwritten // or destroyed by other scripts. // AngularJS modules reduces this problem, by keeping all functions local to the module. // While it is common in HTML applications to place scripts at the end of the // element, it is recommended that you load the AngularJS library either // in the or at the start of the . // This is because calls to angular.module can only be compiled after the library has been loaded.

/////////////////////////////////// // AngularJS Applications // AngularJS modules define AngularJS applications. // AngularJS controllers control AngularJS applications. // The ng-app directive defines the application, the ng-controller directive defines the controller.

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

// AngularJS modules define applications: var app = angular.module('myApp', []); // AngularJS controllers control applications: app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); ``` ## Source & References **Examples * http://www.w3schools.com/angular/angular_examples.asp **References * http://www.w3schools.com/angular/angular_ref_directives.asp * http://www.w3schools.com/angular/default.asp * https://teamtreehouse.com/library/angular-basics/ Feedback is welcome! You can find me in: [@WalterC_87](https://twitter.com/WalterC_87), or [me@waltercordero.com](mailto:me@waltercordero.com).