Getting started with angular


Published on

The presentation that corresponds to this video which explains an example todo application using angular and jquery mobile

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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 Angular
    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. WPF / Silverlight Developers–
    15. 15. Thanks!