Skip to content
Sumukh Sridhara edited this page Feb 24, 2015 · 2 revisions

Tools

Common: Google App Engine, Flask, AngularJS, Highlight.JS, Bower (package manager) Admin: Bootstrap

Getting started with Angular

A high level approach

There are templates that are the foundation of the page (The student one is server/app/templates/student.html). This defines the basic layout and necessary support files (CSS, JS etc).

Inside the template - we include the Angular app (server/static/js/student.js) that tell us what pieces are needed for that page. It then loads "partials" (example) (which are parts of the page, like the assignment count or the list of assignments).

Each of these partials have some part of the page (example). You'll notice these partials have things that looks like variables {{course.website}} - this data is filled in by Angular and the data is filled in by the controller (visible at the top of the partial). (The controllers for the student front-end are here

JS Overview

Services perform HTTP requests to the API to get data. Controllers use the services as appropriate to get data - and then the view/partial starts displaying - the partial has access to data in it's "scope". The controller adds the appropriate data to the scope. It also defines functions in the scope that the partial can call

URL Routing

Angular UI-Router. This is how we link to other "pages" in the front-end. The pages are created in the base .js file for the app (ex server/static/js/student.js). A link between view in an Angular app should use ui-sref to link to another page.

Admin

The Admin interface is based off AdminLTE - For CSS/Components see the AdminLTE documentation/example.

Error Tracking

Sentry reports front-end JS errors