Getting started with angular
•Download as PPTX, PDF•
3 likes•1,198 views
The presentation that corresponds to this video http://youtu.be/hNAHogdcus0 which explains an example todo application using angular and jquery mobile https://github.com/jperl/angular-jquery-mobile
Recommended
More Related Content
Viewers also liked
Recently uploaded
Recently uploaded (20)
Getting started with angular
- 1. Getting Started with Angular https://github.com/jperl/angular-jquery-mobile#getting-started
- 6. Model – View – Controller • Model – Your data in vanilla JavaScript. No classes to inherit and no special getters or setters to call. Plain old JSON you load from the API. • View – Regular HTML, but now with data binding and the ability to teach it new tricks (like creating widgets). The view communicates with the controller via a $scope object. • Controller – Sets the initial state of the $scope for the view and augment’s the $scope with behavior
- 8. Controller
- 9. View
- 10. Scope
- 11. Scope
- 12. View
- 13. View
- 14. Directives
- 15. Step through each line of the code from API to adding a todo
- 17. Install:
- 18. Resources angularjs.com egghead.io weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs- fundamentals-in-60-ish-minutes.aspx johnlindquist.com docs.angularjs.org/guide/concepts github.com/jperl/angular-jquery-mobile http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript For WPF / Silverlight Developers – https://csharprambling.wordpress.com/category/angularjs/
Editor's Notes
- A service is just a wrapper around an object, so that it can be included in other places. This service has a get method which loads the model from an api.$http is very similar to jquery’sajax function
- The controller will call the service to get the model, then expose it on the scope for the view.It also exposes an add function to the view
- So let’s get the controller’s scope onto the view. In this example we only have one controller, and we put it’s scope on the document’s whole body so any child can access it.
- The scope exposes vanilla javascript to the view.. primitives, objects, and functions call all be set on the scope. No need to make your model inherit special objects like a knockout observable, or use special getters and setters (like in KendoUI).
- An important property of scopes, is that they are isolated to their children. This prevents pollution across a large application and it is a key part to the way angular works. For performance, angular only calculates updates to what is on the screen at any time.
- Now in the view. We bind to the scope’s add function and inputText….
- On the controller we use the todoStorage to load the data, and then set it on the scope.On the view with an ng-repeat we display each todo. Ng-repeat is a directive built into angular that is similar to an ItemTemplate in WPF or Silverlight. The todo is a custom directive.
- Directives allow you to teach the browser and html new tricks. And very often you will use directives to create widgets (which are similar to user controls). But there are many other cool things you can do with directives (ng-repeat is a directive).
- What is nice about javascript, is that there are a lot of helpful tools from the open source community. And I have consolidated the popular ones into a workflow that runs on node.Grunt – Handles all of the development work flow tasks (serving a static file server, watching your files and auto updating the page whenever you make changes, running your unit tests, building and minifying the code, enforcing standards with JSHint).Bower – Is a package manager from twitter, similar to NPM, but instead of server side packages it manages packages that are used only on the client (thinks like jQuery)Karma – Is a test runner.Instructions on how to get up and running with all of them are under the todo repo’s readme.