AngularJS - Javascript framework for superheroes
0 likes883 views
The document provides a comprehensive overview of AngularJS, a JavaScript framework designed for building dynamic web applications, detailing its architecture, features like data binding, directives, filters, and routing. It discusses how AngularJS simplifies client-side development, improves code organization through services and dependency injection, and facilitates unit testing. Additionally, it offers code examples for various functionalities, illustrating best practices in form management and testing methods.
![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-140512050901-phpapp01/85/AngularJS-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-140512050901-phpapp01/85/AngularJS-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-140512050901-phpapp01/85/AngularJS-Javascript-framework-for-superheroes-21-320.jpg)
AngularJS - 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'); })); }); });