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

More Related Content

What's hot

Similar to Front end development with Angular JS

Recently uploaded

Front end development with Angular JS

Editor's Notes