Scribd
Upload
37 views

$scope: "Textcontroller"

This document provides an overview of key AngularJS concepts including client-side templates, Model-View-Controller architecture, data binding, dependency injection, directives, controllers, models, and views. It demonstrates using AngularJS to build a simple app with data binding between inputs and models, calling controller methods on events, and repeating elements with ng-repeat.

Uploaded by

Ashay Naik
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

$scope: "Textcontroller"

This document provides an overview of key AngularJS concepts including client-side templates, Model-View-Controller architecture, data binding, dependency injection, directives, controllers, models, and views. It demonstrates using AngularJS to build a simple app with data binding between inputs and models, calling controller methods on events, and repeating elements with ng-repeat.

Uploaded by

Ashay Naik
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Concepts: 1.

Client-side templates Template and data get shipped to browser to get assembled there rather than getting assembled on the server. 2. Model View Controller Clear separation of code between managing data (model), application logic (controller) and data presentation (view). In AJS, the view is the DOM, the controllers are Javascript classes and the model data is stored in object properties. 3. Data Binding Synchronization of data between UI and Javascript properties. 4. Dependency Injection $scope and other objects that do data binding are passed to function by dependency injection. 5. Directives AJS includes a powerful DOM transformation engine that lets you write directives that extend HTML syntax: {{ }}, ng-controller, ng-model, etc. Load script from Google CDN [6]. The ng-app directive tells AJS the part of the page to manage. Model includes object attributes or primitive types containing data [10]. View includes doublecurly syntax interpolation in a HTML template page and merging it with data from the model [4]. Controllers include classes or types in which model is assigned to $scope object [9-11].
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. <html ng-app> <body ng-controller="TextController"> <p>{{someText}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" /> <script> function TextController($scope) { $scope.someText = 'You have started your journey.'; } </script> </body> </html>

Above example uses primitive-style model someText and TextController in global scope. Using object model and controller in module scope:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. <html ng-app='myApp'> <body ng-controller='TextController'> <p>{{someText.message}}</p> <script src="Google CDN"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('TextController', function($scope) { var someText = {}; someText.message = 'You have started your journey.'; $scope.someText = someText; }); </script> </body> </html>

Use ng-bind to display text in UI. <p>{{greeting}}</p> or <p ng-bind=greeting></p>. It is recommended to use ng-bind on the first page of app and {{ }} on subsequent pages. With form elements, use ng-model to bind elements to model.
1. <form ng-controller="SomeController"> 2. <input type="checkbox" ng-model="youCheckedIt"> 3. </form>

Un/Checking the box sets $scope.youCheckedIt in SomeController to false/true. If property is set to false/true then UI shows un/checked. Use ng-change attribute to call controller method when user changes the input value.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. <form ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> Recommendation: {{funding.needed}} </form> function StartUpController($scope) { $scope.funding = { startingEstimate: 0 }; $scope.computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10; }; }

Use $watch() to call controller method when field gets updated in general. Call $watch() with an expression to observe and a callback to call when expression changes.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. <form ng-controller="StartUpController"> Starting: <input ng-model="funding.startingEstimate"> Recommendation: {{funding.needed}} </form> function StartUpController($scope) { $scope.funding = { startingEstimate: 0 }; var computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10; }; $scope.$watch('funding.startingEstimate', computeNeeded); }

Use ng-submit to call function when form submits.


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. <form ng-submit="requestFunding()" ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate"> Recommendation: {{needed}} <button>Fund my startup!</button> </form> function StartUpController($scope) { $scope.computeNeeded = function() { $scope.needed = $scope.startingEstimate * 10; }; $scope.requestFunding = function() { window.alert("Sorry."); }; }

Use ng-click, ng-dblclick, etc. for onclick, ondblclick events.


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. <form ng-submit="requestFunding()" ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate"> Recommendation: {{needed}} <button>Fund my startup!</button> <button ng-click="reset()">Reset</button> </form> function StartUpController($scope) { $scope.computeNeeded = function() { $scope.needed = $scope.startingEstimate * 10; }; $scope.requestFunding = function() { window.alert("Sorry."); }; $scope.reset = function() { $scope.startingEstimate = 0; }; }

AJS event handling directives are unobtrusive because they behave uniformly across browsers and their scope is limited to elements controller instead of the global namespace.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. <div class="navbar" ng-controller="NavController"> <li class="menu-item" ng-click="doSomething()">Something</li> </div> <div class="contentArea" ng-controller="ContentAreaController"> <div ng-click="doSomething()">Something else</div> </div> function NavController($scope) { $scope.doSomething = doA; } function ContentAreaController($scope) { $scope.doSomething = doB; }

With AJS you can write unobtrusive JS because controllers (behavior) does not refer to DOM (structure). Use ng-repeat for creating lists.
1. 2. 3. 4. 5. 6. 7. 8. 9. var students = [{name:'A', id:'1'}, {name:'B', id:'2'}, {name:'C', id:'3'}]; function StudentListController($scope) { $scope.students = students; } <ul ng-controller='StudentListController'> <li ng-repeat='student in students'> <a href='/student/view/{{student.id}}'>{{student.name}}</a> </li> </ul>

You might also like