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

7. What is AngularJS?

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