Getting started with angular

1,133 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,133
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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.
  • Getting started with angular

    1. 1. Getting Started with Angularhttps://github.com/jperl/angular-jquery-mobile#getting-started
    2. 2. API(Angular) ServiceControllerViewDirectivesscope
    3. 3. Model – View – Controller• Model– Your data in vanilla JavaScript. No classes to inherit and nospecial getters or setters to call. Plain old JSON you loadfrom the API.• View– Regular HTML, but now with data binding and the ability toteach it new tricks (like creating widgets). The viewcommunicates with the controller via a $scope object.• Controller– Sets the initial state of the $scope for the view andaugment’s the $scope with behavior
    4. 4. (Angular) Service
    5. 5. Controller
    6. 6. View
    7. 7. Scope
    8. 8. Scope
    9. 9. View
    10. 10. View
    11. 11. Directives
    12. 12. Step through each line of the codefrom API to adding a todo
    13. 13. Install:
    14. 14. Resourcesangularjs.comegghead.ioweblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspxjohnlindquist.comdocs.angularjs.org/guide/conceptsgithub.com/jperl/angular-jquery-mobilehttp://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascriptFor WPF / Silverlight Developers– https://csharprambling.wordpress.com/category/angularjs/
    15. 15. Thanks!@jon_perljonathanp@angieslist.com

    ×