AngularJS Quick Tutorial

Front-end Web-application (JavaScript) framework. Two-way binding. Model (Scope / a View’s data) View (HTML) and Controller (JavaScript)

The library can be added to HTML file using

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

Link library in <head> or the start of <body> instead of at end because angular.module can be compiled only after this linkage.

APPLICATION

Attributes with prefix ng- are called directives.

  • ng-app to define an application. NOTE: If you give a name and don’t define a controller, the script won’t work.
  • ng-model to bind a value to a variable.
  • ng-bind to bind data to HTML view. -Not very common OR
  • {{ }} to write expressions. Binds same way as ng-bind. (DATA BINDING)
  • ng-init to initialize application variables (separated by ;). – Not very common
  • ng-repeat works like a for-loop, cloning HTML elements.
  • ng-options for a drop-down list. <select ng-model=”” ng-options=”x for x in names”></select> (better than ng-repeat in option because considers object instead of strings)
  • ng-if is an if-then condtion. Eg for odd row: <td ng-if = “$odd” style=””>
  • ng-click call a user-written function when clicked
  • The ngRoute module routes your application to different pages without reloading the entire application. (Use 1) diff src, 2) .module(“app”, [“ngRoute”]))

Example

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>
<div ng-app = “” ng-init = “initVar = ‘NCSU’; initDict = [{a:2,b:3},{a:1,b:4}]”>
<p ng-bind = “initVar”></p>
<ul><li ng-repeat = “x in initDict”>{{$index+1+’:’+x.a+’,’+x.b}}</li></ul> <!– $index  + 1 gives iteration number –>
<input type=”text” ng-model=”name”>  <!–Binding input value to name–>
<p>{{name}}</p>
</div>
</body>

CONTROLLER

ng-controller defines controller that controls applications.

<div ng-app=”appName” ng-controller=”ctrl”> … </div>
<script>
var app = angular.module(‘appName’, []); //module defines application
app.controller(‘ctrl’, function($scope) { //controlling the app data
$scope.name = “Default Name”;
});
</script>

Common to put modules in one file and controller in the other using

<script src=”controllerScript.js”></script>

FILTERS

Added using |

<p>The name is {{ lastName | lowercase }}</p>
<li ng-repeat=”x in names | orderBy : ‘country’ “>
<h1>Price: {{ price | currency }}</h1> <!– adds a currency symbol –>
<li ng-repeat=”x in names | filter : ‘i'”> <!– subset of array (can also filter using input )–>
Custom filter: {{x | myFormat}}
app.filter(‘myFormat’, function() {
return function(x) { … return txt; };
}

SERVICES

Passed as a parameter to controller function.

var app = angular.module(‘myApp’, []);
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
}
app.controller(‘myCtrl’, function($scope, $http) {  //Commonly used, makes req to server, lets angular app handle response
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data; //data is a http property like many others (status, config)
}, function(response) { //optional, second function handles error
$scope.content = “Something went wrong”;
});
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () { $scope.myHeader = “How are you today?”;}, 2000); //header value changes after 2 sec
});
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () { $scope.theTime = new Date().toLocaleTimeString();}, 1000); //function called for every sec
});
Custom service:
app.service(‘hexafy’, function() { //decimal to hex convertor service
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller(‘myCtrl’, function($scope, hexafy) { //without $ because user-defined
$scope.hex = hexafy.myFunc(255);
});

Combining filter and service: {{ 255 | myFormat }}
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter(‘myFormat’,[‘hexafy’, function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

FEATURES

Input Validation

<style>
input.ng-invalid { <!–ng-invalid is a class –>
background-color: lightblue;
}
</style>
<body>
<form ng-app=”” name=”myForm” ng-init=”myText = ‘post@myweb.com'”>
Email: <input type=”email” name=”myAddress” ng-model=”myText” required>
<span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>
</form>
</body>

ng-empty, ng-not-empty, ng-touched, ng-untouched, ng-valid, ng-invalid, ng-dirty, ng-pending and ng-pristine.

DOM

  • ng-disabled (disable attribute like a button, = “true/false”)
  • ng-show (show/hide element, = “true/false”)
  • ng-hide (works opposite to ng-show)