Valentine with Angular js - Introduction
Download as PPTX, PDF•1 like•1,050 views
This document provides an overview of AngularJS, including what it is, why it is useful, basic concepts, and how to get started. AngularJS is an open-source JavaScript framework for building single-page applications. It uses HTML as the template language and allows binding data to HTML elements. Some key benefits are less boilerplate code, improved maintainability through separation of concerns using an MVC pattern, and efficient development through features like data binding. The document outlines how to include AngularJS scripts, core concepts like directives, controllers and models, and recommends resources for learning more.
![Controller
Typically also contains module loading
angular.module(<name>, [<dependencies>]);
Creates a module with the given name
This module can then be configured
Ex.
• var myApp = angular.module(‘myApp’, []);
myApp.controller(‘MyCtrl’, function($scope) { … });
myApp.controller(‘OtherCtrl’, [‘$scope’, ‘$http’, function($scope, $http) { … }]);](https://image.slidesharecdn.com/angularjs-150324115453-conversion-gate01/85/Valentine-with-Angular-js-Introduction-21-320.jpg)
![Modules
var myControllers = angular.module(‘myControllers’, []);
// Add controllers to the module
myControllers.controller(…);
var myApp = angular.module(‘myApp’, [‘myControllers’]);](https://image.slidesharecdn.com/angularjs-150324115453-conversion-gate01/85/Valentine-with-Angular-js-Introduction-23-320.jpg)
Valentine with Angular js - Introduction
- 1. Getting Started with AngularJS Senthil Kumar Microsoft MVP – Windows Platform Development MobileOSGeek.com
- 2. About Me • Work for Trivium eSolutions , Bangalore • Microsoft MVP in Windows Platform Development. • Speaker , Blogger and Software Engineer • BDotNetter • Blog about Mobile development at MobileOSGeek.com • Twitter : @isenthil
- 6. Agenda • What is Angular ? • Why Angular ? • Ways of getting angular • Basic Concepts • Quick Demo
- 8. Angular JS facts • Open-source JavaScript framework • For Creating Single Page Applications. • Developed in 2009 by Miško Hevery and Adam Abrons • Maintained by Google • Actively developed and supported. • GitHub: https://github.com/angular/angular.js
- 9. Why AngularJS ? • Faster way to create Web Applications. • The problem – HTML is great for static pages, but has no tools for web applications. • The solution – extend and adapt HTML vocabulary with some additional declarations that are useful for web applications • Excellent templating engine (integral part of HTML) • Easily load Json Data • MVC Architecture
- 10. Core Features • Directives • Data Binding • Filters
- 11. More benefits • Less boilerplate code • Better focus on the Logic • Efficiency in development • Separation of concerns
- 12. Getting AngularJS • Including angular scripts from the Google CDN • Point your html <script> tag to a Google CDN URL. • angular.js — This is the human-readable, non-minified version, suitable for web development. • angular.min.js — This is the minified version, which we strongly suggest you use in production. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"> </script> • Downloading and hosting angular files locally http://code.angularjs.org/
- 13. Getting Angular JS • Install the latest version of GitHub for Windows from https://windows.github.com/ • Bower: We use Bower to manage client-side packages for the docs. Install the bower command-line tool globally with: • npm install -g bower • Visual Studio NugetPackage Manager
- 14. Angular JS is MVC • MVC = Model-View-Controller • Less dependencies • Improves maintainability • It is easier to read and understand code
- 15. MVC Model The data Controller The behavior Modifying / updating the models View The interface How the data is presented to the user JavaScript HTML
- 16. Data Binding Views are declarative The structure of the interface Controllers do not need to directly manipulate the view Changes in the models / data are automatically reflected in the view Updates are managed by the framework No DOM manipulation boilerplate needed!
- 17. Views Make use of special ng attributes (directives) on the HTML elements ng-app • Determines which part of the page will use AngularJS • If given a value it will load that application module ng-controller • Determines which Javascript Controller should be used for that part of the page ng-model • Determines what model the value of an input field will be bound to • Used for two-way binding
- 18. Views {{ }} Angular expressions • Like JavaScript expressions except: • Evaluated in the current scope not the global window • More forgiving to undefined and null errors Insert model values directly into the view
- 19. Controller Function that takes at least one parameter: $scope Function is a constructor Ex: • function MyCtrl($scope) { … } We will see a different way of creating a controller constructor later $scope JavaScript object Contains data (i.e. models) and methods (i.e. functions) Can add own properties • $scope.<my new property> = <value>;
- 20. Controller Dependency Injection Pass the modules and services that you need as parameters In the previous case $scope is a service that will be injected Can be passed as an array of strings to the controller function as well • Prevents errors when performing minification Other useful services • $http • Used to handle Ajax calls • Wrappers around jQuery
- 21. Controller Typically also contains module loading angular.module(<name>, [<dependencies>]); Creates a module with the given name This module can then be configured Ex. • var myApp = angular.module(‘myApp’, []); myApp.controller(‘MyCtrl’, function($scope) { … }); myApp.controller(‘OtherCtrl’, [‘$scope’, ‘$http’, function($scope, $http) { … }]);
- 22. Modules Can be used to separate the application into parts Application module can include the other modules by listing them as dependencies
- 23. Modules var myControllers = angular.module(‘myControllers’, []); // Add controllers to the module myControllers.controller(…); var myApp = angular.module(‘myApp’, [‘myControllers’]);
- 24. Models Properties on the Controller’s $scope object Standard JavaScript values
- 25. More To learn more: Tutorial: http://docs.angularjs.org/tutorial Documentation: http://docs.angularjs.org/guide/overview