Your SlideShare is downloading. ×

AngularJS 101

364

Published on

AngularJS 101 by Teeraphong Chaichalermpreecha

AngularJS 101 by Teeraphong Chaichalermpreecha

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
364
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Why AngularJS? AngularJS lets you extend HTML for declaring dynamic views in web-applications. AngularJS is a toolset for building the framework most suited to your application development and fully extensible and works well with other libraries.
  • 2. Core Concepts • Client-Side Templates • Model View Controller (MVC) • Data Binding • Dependency Injection • Directives
  • 3. Client-side Templates
  • 4. Model View Controller (MVC) The core idea behind MVC is that you have clear separation in your code between managing its data (model), the application logic (controller), and presenting the data to the user (view).
  • 5. Data Binding
  • 6. Dependency Injection For example, the $scope object that does our data binding is passed to us automatically; we didn’t have to create it by calling any function. $scope isn’t the only thing we can ask for. If we want to data bind to the location URL in the user’s browser, we can ask for an object that manages this by putting $location in our constructor.
  • 7. Directives A powerful DOM transformation engine that lets you extend HTML’s syntax. Examples include the double-curly notation for data binding, ng-controller for specifying which controller oversees which part of the view, and ng-model, which binds an input to part of the model. We call these HTML extension directives. We can write our own to extend HTML’s template abilities to do anything we can dream of.
  • 8. Anatomy of an AngularJS • Invoking Angular • Model View Controller • Templates and Data Binding • Organizing Dependencies with Modules • Formatting Data with Filters • Changing Views with Routes and $location • Talking to Servers • Changing the DOM with Directives • Validating User Input
  • 9. Invoking Angular • Loading the Script • Declaring Angular’s Boundaries with ng-app
  • 10. Loading the Script
  • 11. Declaring Angular’s Boundaries with ng-app
  • 12. Model View Controller • A model containing data that represents the current state of your application. • Views that display this data. • Controllers that manage the relationship between your model and your views.
  • 13. Model View Controller
  • 14. Templates and Data Binding • Displaying Text • Form Inputs • A Few Words on Unobtrusive JavaScript • Lists, Tables, and Other Repeated Elements • Hiding and Showing • CSS Classes and Styles • Considerations for src and href Attributes • Expressions • Separating UI Responsibilities with Controllers • Publishing Model Data with Scopes • Observing Model Changes with $watch • Performance Considerations in watch()
  • 15. Displaying Text
  • 16. Form Inputs
  • 17. 1. Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser. 2. Some folks use browsers that work differently. Visually impaired folks who use screen-readers and some mobile phone users can’t use sites with JavaScript. 3. Javascript works differently across different platforms. IE is usually the culprit here. You need to put in different event-handling code depending on the browser. 4. These event handlers reference functions in the global namespace. It will cause you headaches when you try to integrate other libraries with functions of the same names. 5. These event handlers combine structure and behavior. This makes your code more difficult to maintain, extend, and understand. A Few Words on Unobtrusive JavaScript
  • 18. A Few Words on Unobtrusive JavaScript
  • 19. Lists, Tables, and Other Repeated Elements
  • 20. Hiding and Showing
  • 21. CSS Classes and Styles
  • 22. Considerations for src and href Attributes
  • 23. Expressions We can do simple math (+, -, /, *, %), make comparisons (==, !=, >, <, >=, ⇐), perform boolean logic (&&, ||, !) and bitwise operations (^, &, |). We can call functions we expose on $scope in our controller and we can reference arrays and object notation ([ ], { }, .).
  • 24. Separating UI Responsibilities with Controllers The $scope passed to a nested controller prototypically inherits from its parent controller’s $scope. In this case, this means that the $scope passed to ChildController will have access to all the properties of the $scope passed to ParentController.
  • 25. Publishing Model Data with Scopes
  • 26. Observing Model Changes with $watch
  • 27. Performance Considerations in watch()
  • 28. Organizing Dependencies with Modules Enter modules. They provide a way to group dependencies for a functional area within your application, and a mechanism to automatically resolve dependencies (also known as dependency injection). Generically, we call these dependencies services, as they provide specific services to our application.
  • 29. Organizing Dependencies with Modules
  • 30. Formatting Data with Filters
  • 31. Changing Views with Routes and $location
  • 32. Changing Views with Routes and $location
  • 33. Changing Views with Routes and $location
  • 34. Changing Views with Routes and $location
  • 35. Talking to Servers
  • 36. Changing the DOM with Directives
  • 37. Validating User Input
  • 38. Thank You https://angularjs.org/ http://oreil.ly/angularJS

×