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-)
Section Title Text Goes Here
Total Cost: {{ calculate(quantity) | currency }}
Method 1: Reference the AngularJS file from the Google CDN
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.
-- 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.
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-)
Section Title Text Goes Here
Total Cost: {{ calculate(quantity) | currency }}
Your Custom Powerschool Page
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