AngularJS for Beginners Jim Parsons Valley Christian Schools Cerritos, CA Email: [email protected] About the trainer. PowerSchool Experience: – 7 Years Working with PowerSchool – Installing – Customizations – 30+ Years of Programming Experience – PHP/MySQL – Javascript, jQuery, AngularJS Personal: – Married 24 Years, 1 Daughter + 2 Grandkids – Sixth Grade Teacher for 25 years – Other Interests: preaching, swing dancing ? Agenda • Presentation - Basics • See it in action • Hands On Lab • Q & A What is AngularJS? Javascript Framework Why learn AngularJS? MVC Is AngularJS Too Complicated? AngularJS and PowerSchool Where can I use Angular in PowerSchool? 1. Grid Widget 2. Tile Carousel 3. Dynamic Input 4. PowerTeacher Pro (it’s all AngularJS, well 99%) Server Side vs. Client Side SPA - Single-Page Application Grid Widget Demo (UI Examples Page and Birthdays by Month Pages) JavaScript Primer High-level, dynamic, untyped, and interpreted programming language. No relation to Java. What’s a variable? … variables can be of several types Types: number, string, boolean, null, undefined, object, and function Arrays: indexed sets of any of the above types Examples of variables: myChar = 'Batman'; myNameObject = {name: 'Jim'}; myArray = [{name: myChar, age: 21 },{name: 'Jim', age: 54}]; myFunction = function(myArray) { return myArray[0].age; }; HTML5 (data-) <div data-ng-app="myApp"> <div class="box-round" data-ng-controller="myController" data-ng-init="unitprice=7.95"> <h2>Section Title Text Goes Here</h2> <p> <div> <label for="qty_input">Enter Quantity: </label> <input type="text" id="qty_input" data-ng-model="quantity" /> </div> <h3>Total Cost: {{ calculate(quantity) | currency }}</h3> </p> </div> </div> Include the Angular JavaScript Framework Method 1: Reference the AngularJS file from the Google CDN <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> <script> -- your Angular Code goes here -- </script> Note: this method will not work with PowerSchool’s built in Angular Widgets, but will work with stand-alone Angular functions Include the Angular JavaScript Framework Method 2: Use the require function to load your script file along with angular.js. Once loaded, the callback function will bootstrap your code to the page. <script> require(['angular', 'folder/filename'], function (angular) { angular.bootstrap(document, ['myModule']); }); </script> -- your Angular Code goes in the /scripts/ folder -- Example: /scripts/folder/filename.js Include the Angular JavaScript Framework Method 3: Use the require function load angular.js and then add your code into the call back function (your code will load after angular.js is loaded. <script> require(['angular', 'components/shared/index'], function (angular) { var myApp = angular.module('myApp', ['powerSchoolModule']); -- your Angular Code goes here -- angular.bootstrap(document, ['myApp']); }); </script> Javascript var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.quantity = 100; $scope.calculate = function(number) { return number * $scope.unitprice; }; }); Angular Speak Directives Scopes Controllers Services Filters “The Angular Way” Basic Angular Directives Angular compiles the HTML and looks for all tags (“data-”) and strips out the dashes to map them to custom and built-in AngularJS functions: ● ngApp - automatically load your module (the JS code) ● ngController - defines this HTML element and its $scope object ● ngCloak - conceal the output until all the data is rendered ● ngInit - automatically initialize a $scope variable (or call a function) ● ngBind - a one-way bind to the HTML from the controller ● ngModel - a two-way bind from the controller and back to the HTML ● ngRepeat - create a number of elements (such as rows) for each item in a list ● ngClick - call action on click event (must also be bound with ng-model) HTML5 (data-) <div data-ng-app="myApp"> <div class="box-round" data-ng-controller="myController" data-ng-init="unitprice=7.95"> <h2>Section Title Text Goes Here</h2> <p> <div> <label for="qty_input">Enter Quantity: </label> <input type="text" id="qty_input" data-ng-model="quantity" /> </div> <h3>Total Cost: {{ calculate(quantity) | currency }}</h3> </p> </div> </div> Javascript <script> var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.quantity = 100; $scope.calculate = function(number) { return number * $scope.unitprice; }; }); </script> Your Custom Powerschool Page <!DOCTYPE html> <html> <head> <title>Angular Example</title> ~[wc:commonscripts] </head> <body> <!-- your page content goes here → <script> require(['angular', 'components/shared/index'], function (angular) { var myApp = angular.module('myApp', ['powerSchoolModule']); <!-- your angular script goes here --> angular.bootstrap(document, ['myApp']); }); </script> </body> </html> See It in Action https://ps11.psugcal.org/admin/bug/sample.html https://ps11.psugcal.org/admin/bug/sample_ps.html https://ps11.psugcal.org/admin/bug/bug_birthday.html Time for some Hands On Create your first AngularJS customization… … a Zip Code lookup app on the demographics page That’s It ! Thank you for attending... Resources: • https://support.powerschool.com/developer - a must for the PowerSchool customizer • https://docs.angularjs.org/api - a complete reference to AngularJS • https://www.codeschool.com - has a free AngularJS Course .