Downloaded 16 times
![Example
<html><head>
<title>Angular JS Controller</title>
<script src="angular.min.js"></script>
</head><body><h2>First Controller </h2>
<div ng-app="mainApp" ng-controller="employeeController">
Enter first name: <input type="text" ng-model="employee.firstName"><br><br>
Enter last name: <input type="text" ng-model="employee.lastName"><br>
You are entering: {{employee.fullName()}}
</div><script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('employeeController', function($scope) {
$scope.employee = { firstName: "Raju", lastName: "Dodamani", fullName: function() {
var employeeObject; employeeObject = $scope.employee;
return employeeObject.firstName + " " + employeeObject.lastName;
} };});
</script>
</body>
</html>
www.collaborationtech.co.in](https://cdn.statically.io/img/image.slidesharecdn.com/doneangularjs-intro-170210100425/75/Introduction-to-AngularJS-6-2048.jpg)
![AngularJS - Controller
<html>
<head>
<title>Angular JS Custom Directives</title>
<script src="angular.min.js"></script>
</head>
<body>
<h2> Student Custom Directives</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="Ramesh"></student><br/>
<student name="Sunil"></student> </div>
<script src="angular.min.js"></script> <script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function()
{ var directive = {}; directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No:
<b>{{student.rollno}}</b>";
directive.scope = { student : "=name" }
www.collaborationtech.co.in](https://cdn.statically.io/img/image.slidesharecdn.com/doneangularjs-intro-170210100425/75/Introduction-to-AngularJS-7-2048.jpg)
Uploaded byCollaboration Technologies
Introduction to AngularJS
The document introduces AngularJS, a JavaScript framework developed by Google for building complex client-side applications, specifically focusing on single-page applications. It highlights key features such as MVC architecture, directives, data binding, and dependency injection that enhance the organization and maintainability of web applications. Additionally, the document contains code examples demonstrating the use of controllers and custom directives in AngularJS.
Introduction to AngularJS
- 1. Introduction to AngularJS www.collaborationtech.co.in BengaluruINDIA Presentation By Ramananda M.S Rao
- 2. Content Content Overview AngularJS - MVCArchitecture Angular.js Building Blocks Directives Data Binding Scope Model Views Routing Filters Services Project About Us www.collaborationtech.co.in
- 3. Overview AngularJS is aJavaScript framework made by Google for building complex client-side applications. Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps. Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the structure. AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology. www.collaborationtech.co.in
- 4. Overview Why AngularJS? AngularJSis a MVC framework that defines numerous concepts to properly organize your web application. Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated thanks to dependency injection. AngularJS helps you structure and test your JavaScript code very easily. Finally, utility code can easily be factorized into services that can be injected in your controllers. Now let’s have a closer look at all those features. www.collaborationtech.co.in
- 5. First Hello WorldExample <!DOCTYPE html> <html> <head> <script src="angular.min.js"></script> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body ng-app ng-init="name = 'World AngularJS'"> <h1>Hello {{name}}!</h1> </body> </html> www.collaborationtech.co.in
- 6. Example <html><head> <title>Angular JS Controller</title> <scriptsrc="angular.min.js"></script> </head><body><h2>First Controller </h2> <div ng-app="mainApp" ng-controller="employeeController"> Enter first name: <input type="text" ng-model="employee.firstName"><br><br> Enter last name: <input type="text" ng-model="employee.lastName"><br> You are entering: {{employee.fullName()}} </div><script> var mainApp = angular.module("mainApp", []); mainApp.controller('employeeController', function($scope) { $scope.employee = { firstName: "Raju", lastName: "Dodamani", fullName: function() { var employeeObject; employeeObject = $scope.employee; return employeeObject.firstName + " " + employeeObject.lastName; } };}); </script> </body> </html> www.collaborationtech.co.in
- 7. AngularJS - Controller <html> <head> <title>AngularJS Custom Directives</title> <script src="angular.min.js"></script> </head> <body> <h2> Student Custom Directives</h2> <div ng-app="mainApp" ng-controller="StudentController"> <student name="Ramesh"></student><br/> <student name="Sunil"></student> </div> <script src="angular.min.js"></script> <script> <script> var mainApp = angular.module("mainApp", []); mainApp.directive('student', function() { var directive = {}; directive.restrict = 'E'; directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>"; directive.scope = { student : "=name" } www.collaborationtech.co.in
- 8. AngularJS - Controller directive.compile= function(element, attributes) { element.css("border", "1px solid #cccccc"); var linkFunction = function($scope, element, attributes) { element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>"); element.css("background-color", "lightblue"); } return linkFunction; } return directive; }); mainApp.controller('StudentController', function($scope) { $scope.Ramesh = {}; $scope.Ramesh.name = "Ramesh K"; $scope.Ramesh.rollno = 100; $scope.Sunil = {}; $scope.Sunil.name = "Sunil P"; $scope.Sunil.rollno = 101; }); </script> </body> </html> www.collaborationtech.co.in
- 9.