![Hello World program:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
} );
</script>
</body>
</html>](https://image.slidesharecdn.com/angularjsintroduction-140630055627-phpapp01/85/Angular-js-introduction-7-320.jpg)
Angular js introduction
- 2. What are we going to cover? What is Angular Js? Why Angular Js? Features of Angular Js. Angular js Hello world Basic Program. Resources.
- 3. What is Angular JS? AngularJS is an open source Web application framework with MVC capability for browser based apps. Developed By Brat Tech LLC, google and community. Initial release 2009. Stable release 1.2.18/june 13,2014 Operating system- cross platform Size: 103 KiB production 750 KiB developmen Supports modern desktop and mobile browsers, IE version 8 and above.
- 4. Why should I use it? To build well structured, rich client-side applications in a modular fashion Less code and more flexibility. To create powerful dynamic templates. You can also create your own directives. It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view without the need for any DOM manipulation or event handling.
- 5. Angular js Features. Model view Controller Architecture. A well known and proven architecture. Two way data binding Automatically synchronizes values between Model and View. Dynamic Template Makes it very easy to update the UI. Extends html with directives. Lots of powerful standard directives or create your own.
- 6. Build with Testing in mind. Makes it much easier to unit test different parts. Automatic Bootstrapping. -Add a reference to angular js. -Add the ng app attribute. Manual Bootstrapping also possible.
- 7. Hello World program: <!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="HelloController" > <h2>Hello {{helloTo.title}} !</h2> </div> <script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "World, AngularJS"; } ); </script> </body> </html>
- 9. Questions?