Scribd
Upload
86 views

Angular Js

AngularJS is a JavaScript framework that handles DOM manipulation, input validation, server communication, and other tasks. It uses a Model-View-Controller pattern with two-way binding between HTML templates and application data. AngularJS sets up scopes to share data between templates and controllers. Templates can include bindings to dynamically display data from the scope. When data changes, AngularJS automatically updates both the scope data and DOM elements.

Uploaded by

Sakthivel Perumal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
86 views

Angular Js

AngularJS is a JavaScript framework that handles DOM manipulation, input validation, server communication, and other tasks. It uses a Model-View-Controller pattern with two-way binding between HTML templates and application data. AngularJS sets up scopes to share data between templates and controllers. Templates can include bindings to dynamically display data from the scope. When data changes, AngularJS automatically updates both the scope data and DOM elements.

Uploaded by

Sakthivel Perumal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

AngularJS Introduction

Mendel Rosenblum

CS142 Lecture Notes - AngularJS


AngularJS
JavaScript framework for writing web applications
Handles: DOM manipulation, input validation, server communication, URL mangement, etc.

Uses Model-View-Controller pattern


HTML Templating approach with two-way binding

Minimal server-side support dictated


Focus on supporting for programming in the large and single page applications
Modules, reusable components, testing, etc.

Widely used framework (Angular 1 - 2009) with a major rewrite coming out
(Angular 2)
CS142 will use Angular 1

CS142 Lecture Notes - AngularJS


Angular Concepts and Terminology
Template HTML with additional markup used to describe what should be displayed

Directive Allows developer to extend HTML with own elements and attributes (reusable pieces)

Scope Context where the model data is stored so that templates and controllers can access

Compiler Processes the template to generate HTML for the browser

Data Binding Syncing of the data between the Scope and the HTML (two ways)

Dependency Fetching and setting up all the functionality needed by a component


Injection

Module A container for all the parts of an application

Service A way of packaging functionality to make it available to any view


CS142 Lecture Notes - AngularJS
Angular Example
<!doctype html>
<html ng-app>
<head>
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

CS142 Lecture Notes - AngularJS


Angular Bootstrap
<!doctype html>
<html ng-app>
<head>
<script src="./angular.min.js"></script> Script loads and runs on when browser
signals context is loaded and ready
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

CS142 Lecture Notes - AngularJS


Angular Bootstrap
<!doctype html>
Once ready, scans the html looking for a
<html ng-app>
ng-app attribute - Creates a scope.
<head>
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

CS142 Lecture Notes - AngularJS


Angular Bootstrap
Compiler - Scans DOM covered by the
<!doctype html>
ng-app looking for templating markup -
<html ng-app> Fills in with information from scope.
<head>
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

CS142 Lecture Notes - AngularJS


Angular Compiler Output Changes to template HTML in red. Classes:
ng-scope - Angular attached a scope here.
ng-binding - Angular bound something here.
<!doctype html> ng-pristine/ng-dirty - User interactions?
<html ng-app class="ng-scope"> ng-untouched/ng-touched - Blur event?
<head> ng-valid/ng-invalid - Valid value?
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"
class="ng-pristine ng-untouched ng-valid">
<h1 class="ng-binding">Hello !</h1>
</div>
Note: {{yourName}} replaced
</body> with value of yourName
</html>
CS142 Lecture Notes - AngularJS
Two-way binding: Type 'D' character into input box
<!doctype html>
<html ng-app class="ng-scope">
<head>
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"
class="ng-valid ng-dirty ng-valid-parse ng-touched">
<h1 class="ng-binding">Hello D!</h1> The scope variable yourName is
updated to be "D" and the template
</div>
is rerendered with yourName = "D".
</body> Note angular validation support
</html>
CS142 Lecture Notes - AngularJS
Two-way binding: Type 'a', 'n' into input box
<!doctype html>
<html ng-app class="ng-scope">
<head>
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"
class="ng-valid ng-dirty ng-valid-parse ng-touched">
<h1 class="ng-binding">Hello Dan!</h1> Template updated with each change
</div> (i.e. key stroke)!
</body>
</html>
CS142 Lecture Notes - AngularJS
angular.module In a JavaScript file:

<!doctype html> angular.module("cs142App", []);


or to fetch existing module:
<html ng-app="cs142App">
<head>
angular.module("cs142App");
<script src="./angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html> Module - Container of everything needed under ng-app
CS142 Lecture Notes - AngularJS
In a JavaScript file:
Controllers angular.module("cs142App", [])
.controller('MyCntrl', function($scope) {
<!doctype html> $scope.yourName = "";
$scope.greeting = "Hola";
<html ng-app="cs142App"> });
<head>
<script src="./angular.min.js"></script>
</head>
<body ng-controller="MyCntrl"> Will define a new scope and call
controller MyCntrl.
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>{{greeting}} {{yourName}}!</h1>
</div>
</body>
</html>

CS142 Lecture Notes - AngularJS


Templates, Scopes & Controllers
Best practice: Each template component gets a new scope and is paired
with a controller.
Expressions in templates:
{{foo + 2 * func()}}
are evaluated in the context of the scope. Controller sets up scope:
$scope.foo = ... ;
$scope.func = function() { ... };

Best practice: Keep expressions simple put complexity in controller


Controllers make model data available to view template

CS142 Lecture Notes - AngularJS


Scope inheritance
A scope object gets its prototype set to its enclosing parent scope

<div ng-controller="crtl1"> Creates new scope (ScopeA)

<div ng-controller="crtl2"> Creates new scope (ScopeB)


...
</div>
</div>
ScopeB's prototype points at ScopeA
Mostly does what you want (all properties of A appear in B)
Useful since scopes are frequently created (e.g. ng-repeat, etc.)
$rootScope is parent of all
CS142 Lecture Notes - AngularJS
"There should always be a dot in your model"
Common advice to beginning AngularJS programmers. Why?

Consider: <input type="text" ng-model="yourName" placeholder="Enter a name here">

Model reads will go up to fetch properties from inherited scopes.


Writes will create the property in the current scope!

<input type="text" ng-model="model.yourName" placeholder="Enter a name here">

Read of object model will locate it in whatever inherited scope it is in. yourName
will be create in that object in the right scope.

CS142 Lecture Notes - AngularJS


Scope digest and watches
Two-way binding works by watching when expressions in view template
change and updating the corresponding part of the DOM.
Angular add a watch for every variable or function in template expressions
During the digest processing all watched expressions are compared to their
previously known value and if different the template is reprocessed and the
DOM update
Angular automatically runs digest after controller run, etc.
It is possible to:
Add your own watches: ($scope.$watch(..)) (e.g. caching in controller)
Trigger a digest cycle: ($scope.$digest()) (e.g. model updates in event)
CS142 Lecture Notes - AngularJS
Example of needing scope $watch
Name: {{firstName}} {{lastName}} $scope.fullName =
vs $scope.firstName +
" " + $scope.lastName;
Name: {{fullName}}
$scope.$watch('firstName',
function() {
$scope.fullName =
$scope.firstName +
" " + $scope.lastName;
});

CS142 Lecture Notes - AngularJS


A digression: camelCase vs dash-case
Word separator in multiword variable name

Use dash: active-buffer-entry


Capitalize first letter of each word: activeBufferEntry

Issue: HTML is case-insensitive so camelCase is a problem

AngularJS solution: You can use either, Angular will map them to the same thing.

Use dash in HTML and camelCase in JavaScript

Example: ng-model and ngModel


CS142 Lecture Notes - AngularJS
ngRepeat - Directive for looping in templates
ngRepeat - Looping for DOM element creation (tr, li, p, etc.)
<ul>
<li ng-repeat="person in peopleArray">
<span>{{person.name}} nickname {{person.nickname}}</span>
</li>
</ul>
Powerful but opaque syntax. From documentation:

<div ng-repeat="model in collection | orderBy: 'id' as


filtered_result track by model.id">

CS142 Lecture Notes - AngularJS


ngIf/ngShow - Conditional inclusion in DOM
ngIf - Include in DOM if expression true (dialogs, modals, etc.)
<div class="center-box" ng-if="showTrialOverWarning">
{{buyProductAdmonishmentText}}
</div>
Note: will create scope/controllers when going to true, exit going to false

ngShow - Like ngIf except uses visibility to hide/show DOM elements


Occupies space when hidden
Scope & controllers created at startup

CS142 Lecture Notes - AngularJS


ngClick/ngModel - Binding user input to scope
ngClick - Run code in scope when element is clicked
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span> count: {{count}} </span>
ngModel - Bind with input, select, textarea tags
<select name="singleSelect" ng-model="data.singleSelect">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>

CS142 Lecture Notes - AngularJS


ngHref & ngSrc
Sometimes need to use ng version of attributes:
a tag
<a ng-href="{{linkHref}}">link1</a>
img tag
<img ng-src="{{imageSrc}}" alt="Description" />

CS142 Lecture Notes - AngularJS


ngInclude - Fetches/compile external HTML fragment
Include partial HTML template (Take angular expression of URL)

<div ng-include="'navBarHeader.html'"</div>

CS142 uses for components

<div ng-include="'components/example/exampleTemplate.html'"
ng-controller="ExampleController"></div>

CS142 Lecture Notes - AngularJS


Directives
Angular preferred method for building reusable components
Package together HTML template and Controller and extend templating language.
Ng prefixed items in templates are directives
Directive can:
Be inserted by HTML compiler as:
attribute (<div my-dir="foo">...</div>)
element (<my-dir arg1="foo">...</my-dir>)
Specify the template and controller to use
Accept arguments from the template
Run as a child scope or isolated scope

Powerful but with a complex interface


Example: <example arg1="fooBar"></example>
CS142 Lecture Notes - AngularJS
Directives are heavily used in Angular
<bodylayout="row" ng-controller="AppCtrl">
<md-sidenav layout="column" ... >
<md-toolbar ...>
...
</md-toolbar>
<md-list>
<md-item ng-repeat="item in menu">
<md-item-content layout="row" layout-align="start center">
<md-button aria-label="Add" ng-click="showAdd($event)">
</md-item-content>
</md-item>
<md-divider></md-divider>
<md-subheader>Management</md-subheader>

CS142 Lecture Notes - AngularJS


Services
Used to provide code modules across view components
Example: shared JavaScript libraries
Angular has many built-in services
Server communication (model fetching)
$http, $resource, $xhrFactory
Wrapping DOM access (used for testing mocks)
$location, $window, $document, $timeout, $interval
Useful JavaScript functionality
$animate, $sce, $log
Angular internal accesses
$rootScope, $parse, $compile
CS142 Lecture Notes - AngularJS
Dependency injection
Support for programming in large
a. Entities list what they define and what they need
b. At runtime Angular brings entities and their dependencies together

Example:

var cs142App = angular.module('cs142App', ['ngRoute']);


cs142App.config(['$routeProvider', function($routeProvider) {
cs142App.controller('MainController', ['$scope',function($scope) {

CS142 Lecture Notes - AngularJS


Angular APIs
ngRoute - Client-side URL routing and URL management
CS142 - Passing parameters to the views

ngResource - REST API access


CS142 - Fetch models

ngCookies - Cookie management and access


ngAria - Support for people with disabilities (Accessible Rich Internet Applications)
ngTouch - Support for mobile devices (ngSwipeLeft, ngSwipeRight, etc.)
ngAnimate - Support for animations (CSS & JavaScript based)
ngSanitize - Parse and manipulate HTML safely
CS142 Lecture Notes - AngularJS
Some thoughts on JavaScript Frameworks
Web app can not start until framework downloaded and initialized
Particular relevant for wimpy devices and networks (e.g. Mobile)

Can lazy load Angular modules (Makes dependency tracking important)


Core Angular is not small

1.4.8/angular.js 1,070,726 bytes

1.4.8/angular.min.js 148,199 bytes

1.4.8/angular.min.js.gzip 53,281 bytes

CS142 Lecture Notes - AngularJS

You might also like