Angular JS - Javascript framework for superheroes
4 likes1,031 views
This document provides an overview of AngularJS, a JavaScript framework for building web applications. It discusses how AngularJS addresses problems with building client-side apps like DOM manipulation and data validation through features like data binding, directives, filters, routing and services. It also covers AngularJS concepts like scopes, compilation, forms and unit testing.
![Directives Example
angular.module('Presentation', [])
.controller('DirectiveController', ['$scope', function ($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function () {
return {
template: '<b>Name</b>: {{customer.name}} <b>Address</b>: {{customer.add
};
});
// HTML
<div ng-controller="DirectiveController">
<div my-customer></div>
</div>
Name: Naomi Address: 1600 Amphitheatre](https://image.slidesharecdn.com/angularjs-140512082254-phpapp02/85/Angular-JS-Javascript-framework-for-superheroes-15-320.jpg)
![Routing Example
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/user/:id', {
templateUrl: 'views/user.html',
controller: 'UserController'
});
})
.controller('UserController', ['$scope', '$route', function ($scope, $route) {
$scope.userId = $route.current.params.id;
});](https://image.slidesharecdn.com/angularjs-140512082254-phpapp02/85/Angular-JS-Javascript-framework-for-superheroes-19-320.jpg)
![Services Example
angular.module('Presentation', [])
.service('notify', ['$window', function (window) {
var msgs = [];
return function (msg) {
msgs.push(msg);
if (msgs.length > 2) {
window.alert(msgs);
msgs = [];
}
};
})
.controller('ServiceController', ['$scope', 'notify',
function ($scope, notify) {
$scope.notify = notify;
});
// HTML
<div ng-controller="ServiceController">
<input type="text" ng-init="message='Developers'" ng-model="message"/>
<button ng-click="notify(message)") Notify</button>
</div>
Developers Notify](https://image.slidesharecdn.com/angularjs-140512082254-phpapp02/85/Angular-JS-Javascript-framework-for-superheroes-21-320.jpg)
Angular JS - Javascript framework for superheroes
- 2. Sponsors Media Partners
- 9. Conceptual Overview 1. The browser loads the HTML and parses it into a DOM 2. The browser loads angular.js script 3. Angular waits for DOMContentLoaded event 4. Angular looks for ngapp directive, which designates the application boundary 5. The Module specified in ngapp (if any) is used to configure the $injector 6. The $injector is used to create the $compile service as well as $rootScope 7. The $compile service is used to compile the DOM and link it with $rootScope
- 13. Example Code <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello {{yourName}}!</h1> Enter a name here Hello !
- 15. Directives Example angular.module('Presentation', []) .controller('DirectiveController', ['$scope', function ($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function () { return { template: '<b>Name</b>: {{customer.name}} <b>Address</b>: {{customer.add }; }); // HTML <div ng-controller="DirectiveController"> <div my-customer></div> </div> Name: Naomi Address: 1600 Amphitheatre
- 17. Filters Example <div>Formatted number: {{val | number:2}}</div> <div>Your name (in lowercase): {{user.name | lowercase}}</div> Formatted number: Enter a name here Your name (in lowercase):
- 19. Routing Example angular.module('MyApp', ['ngRoute']) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/user/:id', { templateUrl: 'views/user.html', controller: 'UserController' }); }) .controller('UserController', ['$scope', '$route', function ($scope, $route) { $scope.userId = $route.current.params.id; });
- 21. Services Example angular.module('Presentation', []) .service('notify', ['$window', function (window) { var msgs = []; return function (msg) { msgs.push(msg); if (msgs.length > 2) { window.alert(msgs); msgs = []; } }; }) .controller('ServiceController', ['$scope', 'notify', function ($scope, notify) { $scope.notify = notify; }); // HTML <div ng-controller="ServiceController"> <input type="text" ng-init="message='Developers'" ng-model="message"/> <button ng-click="notify(message)") Notify</button> </div> Developers Notify
- 24. Form Example (HTML) <div ng-controller="FormController"> <form name="form" class="css-form" novalidate> Name: <input type="text" ng-model="user.name" name="uName" required/> <br/>E-mail: <input type="email" ng-model="user.email" name="uEmail" required/> <br/> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: <span ng-show="form.uEmail.$error.required"> Tell us your email. </span> <span ng-show="form.uEmail.$error.email"> This is not a valid email. </span> </div> <input type="checkbox" ng-model="user.agree" name="userAgree" required/> I agree<br/> <div ng-show="!user.agree"> Please agree. </div> <button ng-click="reset()" ng-disabled="isUnchanged(user)"> RESET </button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"> SAVE </button>
- 25. Form Example (Javascript) function FormController ($scope) { $scope.master = {}; $scope.update = function (user) { $scope.master = angular.copy(user); }; $scope.reset = function () { $scope.user = angular.copy($scope.master); }; $scope.isUnchanged = function (user) { return angular.equals(user, $scope.master); }; $scope.reset(); }
- 28. Unit testing example function PasswordCtrl ($scope) { $scope.password = ''; $scope.grade = function () { var size = $scope.password.length; if (size > 8) { $scope.strength = 'strong'; } else if (size > 3) { $scope.strength = 'medium'; } else { $scope.strength = 'weak'; } }; } var $scope = {}; var pc = $controller('PasswordCtrl', {$scope: $scope}); $scope.password = 'abc'; $scope.grade(); expect($scope.strength).toEqual('weak');
- 29. E2E testing example It's quite easy to test services, directives, filters, controllers, etc with AngularJS and Jasmine describe('service', function () { beforeEach(module('myApp.services')); describe('version', function () { it('should return current version', inject(function (version) { expect(version).toEqual('0.1'); })); }); });