Take advantage of jQuery and AngularJS to dynamically update HTML5-based apps, and learn how AJAX works for asynchronous calls. Simplify the development process by separating the model, view, and controller for your web apps, enabling your content to work within a browser and within mobile applications as well.
This GitHub repository includes two projects:
They have identical functionality, but we wanted to illustrate how simple it was to get started with one jQuery, and segue into using Angular.
This project allows you to GET a JSON object from an Azure Mobile Service (included), as well as POST JSON object to the service.
Wrap your apps in something like Cordova with the Intel XDK and have it work on all mobile devices. This is perfect for hackathons! You can find a template and tutorial on how to do that here.
Stacey Mulcahey and I put together a Microsoft Virtual Academy course on how to create this entire project. The video tutorial outline is follows:
- Understanding Single Page Apps
- Using jQuery to Make a SPA & creating a Mobile Service
- Debugging and Testing
- Understanding Frameworks
- Introduction to AngularJS
- Using AngularJS to Create a SPA
- Deploying to Azure
- Runs on nearly every device that has a browser
- Extend HTML vocabulary for your application
- Contains projects for both jQuery and Angular users
- A text editor
- PC or Mac
- A web server (local or remote - Azure)
- Download the source from GitHub
- Set up your web server (either local or remote)
- Navigate to /Angular or /jQuery folders. Point your web server towards index.html and you'll be up and running.
##FAQ Where can I get free hosting to store my website or app
Microsoft's BizSpark offers startups and select student developers the ability to host their websites or applications in the cloud, using Azure. Reach out to me via the link above to get signed up for a new account.
Where should I start? Take a look at the MVA course that Stacey and I did. That walks you through the entire process of building this application, along with the source code for both.
After that, I'd suggest the [AngularJS docs & Examples] (https://angularjs.org/)
- Microsoft's BizSpark
- AngularJS Intellisense in Visual Studio
- Angular code snippets in Visual Studio
- Angular style guide
- [AngularJS docs & Examples] (https://angularjs.org/)
Quick Notes / Study Gude
###Separation of concerns
Angular - View and controller never interact directly. Angular simplifies these scenarios, and has a separation of concerns
jQuery - JS directly manipulates events. Looks inside HTML to find elements and catch events.
- Multiple controllers - perhaps even on the same page
- Each controller is responsible for diff. features or areas of data
- Simplifies GET, POST, PUT, Delete
- Returns a promise -- will return something in the future
- Provide a container for code to live, without cluttering the global namespace
- Can have multiple controllers within a single module
Ex: angular.module('finance2', )
Behavior behind the DOM elements
Attached to the DOM via the ng-controller directive.
Pass in $scope as an argument
Use controllers to: - Set up the initial state of the $scope object. - Add behavior to the $scope object.
- Defines a controller to be bound with the view.
- Function which executes when the compiler encounters it in the DOM
- Allow for indirect model <-> view interaction
- Apply special behavior to attributers or elements in HTML
- Object that connects the View with Controller
- Data binding: Moves model data -> View
- Basically equal to using "this" in JS
- compile traverses the DOM and matches directives
- Sorts the directives by priority
- Links DOM & Scope, then creates a live binding between the two
Automatic way of updating the view whenever the model changes
- Write text on an input
- Create variables to find divs
- Have event listener on new div, to draw text based on what you wrote in input
- Write some HTML
- Add expressions and data bindings
##Change Log ###v1.0.0 Initial build of the app