Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to AngularJS

514 views

Published on

A quick intro to AngularJS. In this presentation you will find out why AngularJS is so popular among web developers and learn how to make a web app in 5 easy steps.
You can download the FREE app for your Android and Fire OS device here:
http://www.amazon.com/dp/B019OQKACS/ref=cm_sw_r_fa_dp_uPzEwb07QK1VT

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Introduction to AngularJS

  1. 1. Introduction to AngularJS Cristian-Dan Bara Roessingh Research and Development www.rrd.nl 12.nov.2015
  2. 2. What is it? Why use it? “AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.” from angularjs.org
  3. 3. What is it? “AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.” from angularjs.org
  4. 4. Why use it? ... because MVC AngularJS uses the model-view-controller Model View Controller
  5. 5. Enough talk. Let’s code Most apps are actually lists. Let’s make our own to do list I use Google Web Designer to build the ‘view’.
  6. 6. 1.Defining an angular app and module index.html app.js The app and module need to have the same name
  7. 7. 2. Define an app controller index.html app.js The controller must have the same name in both files
  8. 8. 3. Make/get the model and link it to the controller app.js Our app knows what data to use, only when it is assigned to its $scope. This is the link between the model and the controller
  9. 9. 4. Link the controller to the view This is a complex procedure. We will use several directives. !Important: the controller knows only what is in its $scope
  10. 10. 4.1 Angular directives Directives are extended HTML attributes with the prefix ng- index.html In our app we use: ng-repeat: will repeat through our model’s data set ng-class: will attach a class to our to-do item when the item.done is true ng-switch: will switch according to item.done flag ng-switch-when: will display or hide it’s HTML <div> if the ng-switch expression matches the ng-switch-when value ng-click: will call it’s function when the user clicks on the <div>
  11. 11. 4.2 Angular data binding The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. (docs.angularjs.org) In index.html, I bind the item text to the text displayed on each to-do element in the view. In angular this is done through {{ }} double brackets.
  12. 12. 4.Link the controller to the view What I’m asking the controller to do is: “For each item in the model set, create a view and display the item data according to the view’s composition and style rules”.
  13. 13. 5. Let’s make the buttons work The $scope can define functions which add logic to the view. 5.1. Marking an item as done. in app.js I defined a function which marks the element at the index as done. in index.html I’m calling the markAsDone function when there is click on the check mark.
  14. 14. 5. Let’s make the buttons work 5.2 Remove an item from the list. in app.js I defined a function which removes the item at the index position from the model. in index.html I’m calling the removeToDo function when there is click on the x mark.
  15. 15. 5. Let’s make the buttons work 5.3 Add new items to the list. in app.js I defined a function which pushes a new item to the model. in index.html I’m calling the addToDo function when there is click on the + button.
  16. 16. Thank you :) You can download all the code from: https://github.com/cristianbara/intro2angularjs The package is structure in 3 folders: view - contains the Google Web Designer project. compiled-view - contains a simplified view (I use this for the app) finished-app - the working AngularJS app

×