Front end development with Angular JS

Front End Development
with AngularJS
Presented by:
Bipin Upadhyaya

Node package manager
• Node.js Package Management (NPM)
 Package manager for Node.js modules
 Initializes an empty Node.js project with package.json file
npm init

Let’s start bootstrapping
(you no longer have to write the boilerplate)

Client side package manager
npm install -g bower
bower search <query>
bower install <package>#<version>
bower uninstall <package>
bower list
Bower is to the web browser what NPM is to Node.js. It is a
package manager for your front-end development libraries like
jQuery, Bootstrap and so on.
Some commands
(self explanatory)

Automate your frontend workflows
npm install -g grunt-cli npm install -g gulp
Grunt and Gulp make it easy to incorporate best practices and
automate the tedious parts of web development.

Yoman: Web scaffolding tool for
modern app
3 types of tools for improving productivity and satisfaction
when building a web app
npm install -g yo
yo scaffolds out a new application, writing your build configuration ad pulling relevant
build tasks and package manager dependencies that you might need for your build.

Angular MVC Architecture Pattern
• Layers
• View: Defines visual appearance
• Model: Defines data model of the
app (JS objects)
• Controller: Adds behavior
• Workflow
• User interacts with the view
• Changes the model, call controller
• Controller manipulates the model,
interacts with service
• Angular JS detects model changes
and updates the view
HTML
CSS
Javascript
Controller
ModelView
Server
User

Data Binding Syncing of the data between the Scope and the HTML (two ways)
Scope Context where the model data is stored so that templates and
controllers can access
Directive Allows developer to extend HTML with own elements and
attributes (reusable pieces)
Template HTML with additional markup used to describe what should be
displayed
Compiler Processes the template to generate HTML for the browser
Dependency Injection Fetching and setting up all the functionality needed by a
component
Module A container for all the parts of an application
Angular Concepts and Terminology

Automatically bootstrapping
AngularJS
Ref. 1

var demoApp = angular.module(‘AngularApp', []);
What's the Array
for?
var demoApp = angular.module('demoApp',
['helperModule']);
Module that demoApp
depends on
Creating a Module

Module Phases
Config
• happens early while the application
is still being built. Only provider
services and constant services are
ready for dependency injection at
this stage.
RUN
• happens once the module has
loaded all of its services and
dependencies.
var module = angular.module(‘AngularApp', []);
module.config([function() {
alert('I run first');
}]);
module.run([function() {
alert('I run second');
}]);

Module Components and
Dependency Injection
• AngularJS lets you inject services (either from its own module or from
other modules) with the following pattern:
var module = angular.module(‘AngularApp', []);
module.service('serviceA', function() { ... });
module.service('serviceB', function(serviceA) { ... });

Using Directives and Data
Binding
<!DOCTYPE html>
<html ng-app= “AngularApp”>
<head>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{ name }}
</div>
<script src=“scripts/angular.js"></script>
</body>
</html>
Directive
Directive
Data Binding
Expression

<html data-ng-app="">
...
<div class="container"
data-ng-init="names=['Dave','Napur','Heedy','Shriva']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
...
</html>
Iterate through
names
Iterating with the ng-repeat
Directive

Naming Custom Directive
• When defining a directive in JavaScript, the name is in camel case
format:
• When we activate that directive we use a lower case form:
module.directive('myDirective', [function() { ... }]);
<my-directive></my-directive>
<div my-directive></div>

Example Custom Directive
comment directives
must set replace to true
Output in browser
Define the directive
Use it in HMTL

Defining Routes
var demoApp = angular.module(‘AngularApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl:'View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl:'View2.html'
})
.otherwise({ redirectTo: '/' });
});
Define Module
Routes

Filters
 Formats the value of an expression for display to the user.
 Filter can be used in view templates, controllers or services &
it is easy to define your own filter.
<ul>
<li ng-repeat="cust in customers | orderBy:'name'">
{{ cust.name | uppercase }}
</li>
</ul> Order customers by
name property
<input type="text" ng-model="nameText" />
<ul>
<li ng-repeat="cust in customers | filter:nameText | orderBy:'name'">
{{ cust.name }} - {{ cust.city }}</li>
</ul>
Filter customers by
model value

<div class="container" ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="cust in customers">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
}
</script>
Define the
controller to use
Basic controller
$scope injected
dynamically
Access $scope
Creating a View and
Controller

Value
• The value recipe stores a value within an injectable service.
• A value can store any service type: a string, a number, a function, and
object, etc.
• This value of this service can now be injected into any controller, filter,
or service.
//define a module
var myModule = angular.module(‘AngularApp', []);
//define a value
myModule.value('clientId', 'a12345654321x');
//define a controller that injects the value
myModule.controller('myController', ['$scope', 'clientId', function ($scope, clientId) {
$scope.clientId = clientId;
}]);

Service
• The service recipe will generate a singleton of an instantiated object.
//define a service
myModule.service('person', [function() {
this.first = 'John';
this.last = 'Jones';
this.name = function() {
return this.first + ' ' + this.last;
};
}]);
//inject the person service
myModule.controller('myController', ['$scope', 'person', function($scope,
person) {
$scope.name = person.name();
}]);
$http
$q
$timeout
…..

JS Testing
• Angular is designed to be testable (behavior-view separation, pre-
bundled mocks, dependency injection).
• Unit tests (ensure that the JavaScript code in our application is
operating correctly) - Karma Test Runner + Jasmine.
Jasmine describes the test in natural language.

describe ("A simple test", function (){
it("contains a spec with expectations", function(){
expect(true).toEqual(true);
});
});
TestSuite begins with
a call to describe()
TestCase (or spec)
begins with a it
Testcase contains one
or more matchers

Generating components
through yo generates the
necessary skeleton for tests

References
• http://cdn.tsq.me/ebook/AngularJS%20Test%20Driven.pdf
• https://docs.angularjs.org/guide
• https://dzone.com/refcardz/angularjs-essentials

Front end development with Angular JS

In this document