Front End, IT, Uncategorized

(12) AngularJs Two Way Data Binding Example (Student Information Form)

  • Using the AngularJs two way data binding, when you type the student information in the input field (Enter student information part), the value will immediately be displayed on the view part (View student information part).
  • Now, we don’t need any custom code to move data from the model to the view or from the view to the model.
  • ng-model directive can be used with the (input, select, and textarea) html tags.
Front End, IT, Uncategorized

(11) AngularJs ng-src directive

In the following example, we want to display the country properties using AngularJs Code:

  • Country Flag: Path of the flag image.
  • Country Name: Palestine
  • Country Capital: Jerusalem
  • Country Language: Arabic

1. Create the module, controller, and your data.

You can return to previous AngularJs posts to learn how to write AngularJs module and controller.

screenshot-codepen.io-2018-01-30-08-47-38-632
AngularJs Module and Controller

Continue reading “(11) AngularJs ng-src directive”

Front End, IT, Uncategorized

(9) AngularJs Controller with Complex Object

The example demonstrates a controller object with more than one property: (firstname, lastname, specialization, and gender)

Note:

  • If you misspell a property name in the binding expression, angular expression will return null or undefined.
  • If you misspelled the controller name, an error will be raised, and the binding expressions will not be evaluated.
Front End, IT, Uncategorized

(8) AngularJs Modules and Controllers

  • An AngularJS module defines an application.
  • The  module is a container for the different parts of an application (controllers, services, directives, … ).
  • The controller is a JavaScript object. It controls the data of the AngularJs application.
  • Controllers always belong to a module.
  • The scope ($scope) is the binding part between the HTML (view) and the JavaScript (controller).


  • Create a JavaScript file. In the js file you should create the module, create the controller, and register controller with the module, as the following: 

1. To create the module:

                                       var app = angular.module(“myApp”, []);

     2. To create the controller: 

var myController = function ($scope){
$scope.msg = “Learning AngularJs”;
 }

3. To register the controller with the module:

myApp.controller(“myController”, myController);

Continue reading “(8) AngularJs Modules and Controllers”

Front End, IT

(7) AngularJs ng-repeat directive

  • The ng-repeat directive repeats an HTML element.
  • In the following example:
  • Using ng-init, define a set of colors (red, blue, orange, and yellow).
  • Then, you should display each color in a list as bullet points.
  • Using ng-repeat, define the color (such as red) as an element in the colors group (You can use ul for the list).
  • Display each color in a single li as a bullet point.
Front End, IT, Uncategorized

(6) Data binding using {{expression}}

  • Data binding binds AngularJS expressions with AngularJS data.
  • {{ X }} is bound with ng-model=”X”.
  • In the following example:
  • {{favc}} is bound with ng-model=”favc”.
  • Notice that there is a default value id defined using ng-init=”favc=’Pink’. Try to modify the default color value.
  • Also, notice that ng-app=”” is defind for the main div.
Front End, IT, Uncategorized

(5) AngularJS Expressions (ng-bind)

  • AngularJS expressions can also be written inside a directive: ng-bind=”expression”.
  • In the following example, the user will enter the first name and last name in two separated input fields. A paragraph will be generated that contain: Your name is “firstName” “lastName”.
  • Try to do the same function using {{expression}} format.

 

Front End, IT

(4) AngularJs Expressions {{Expression}}

  • AngularJS binds data to HTML using Expressions.
  • AngularJS expressions can be written inside double braces: {{ expression }}.
  • AngularJS solve the expression, and return the result.
  • AngularJS expressions can contain literals, operators, and variables like JavaScript expressions.
  • If you remove the ng-app directive, HTML will display the expression as it is, without solving it.
  • Look at the following code, and review the used expressions.
  • Note: Notice that ng-app is written inside the html tag, as we use more than one div. Try to write it in anther tag, such as in the first div only.
expressions
AngularJs Expressions

Continue reading “(4) AngularJs Expressions {{Expression}}”