Front End, IT, javascript, 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, javascript

(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, javascript, 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, javascript, 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, javascript

(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}}”

Front End, IT, javascript

(2) AngularJs Introduction – ng-directives

  • AngularJS extends HTML with ng-directives.
  • AngularJS directives are HTML attributes with an ng prefix such as (ng-app, ng-model, ng-bind).
  • ng-app: defines an AngularJS application.
  • ng-model: binds the value of HTML controls (input, select, textarea) to application data.
  • ng-bind: binds application data to the HTML view.
  • ng-init:  initializes AngularJS application variables.
1edit
AngularJs ng-directives

Continue reading “(2) AngularJs Introduction – ng-directives”

Front End, IT, javascript

(1) What is AngularJs?

  • Before learning AngularJs, you should already learn HTML, CSS, and JavaScript.
  • AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google.
  • It is easy to learn.
  • It extends HTML with new attributes.
  • You can view some websites that are built using AngularJs: madewithangular
  • You can download AngularJs from https://angularjs.org/.
  • You can download the script file and save it locally and call it in your  html file using script tag.
  • You can include CDN link directly to your html file using script tag (You can get it from http://www.angularjs.org).
  • Review and try the following simple code: