Itroducing Angular JS

400 views

Published on

From the book AngularJS O'Reilly

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

No Downloads
Views
Total views
400
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Itroducing Angular JS

  1. 1. Angular JS AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.
  2. 2. Concepts There are a few core ideas that you’ll use throughout an Angular app. As it turns out, we didn’t invent any of these. Instead, we’ve borrowed heavily from successful idioms in other development environments and implemented them in a way that embraces HTML, browsers, and many other familiar web standards.
  3. 3. Concepts ● Client-Side Templates ● Model View Controller (MVC) ● Data Binding ● Dependency Injection ● Directives
  4. 4. Client-Side Templates ● ● Multi-page web applications create their HTML by assembling and joining it with data on the server, and then shipping the finished pages up to the browser. Angular is different in that the template and data get shipped to the browser to be assembled there.
  5. 5. Client-Side Templates ● ● ● ● ● There are no classes or IDs in the HTML to identify where to attach event listeners. When HelloController set the greeting.text to Hello, we didn’t have to register any event listeners or write any callbacks. HelloController is a plain JavaScript class, and doesn’t inherit from anything. HelloController got the $scope object that it needed without having to create it. We didn’t have to call the HelloController’s constructor ourselves
  6. 6. Client-Side Templates Example
  7. 7. ● ● ● Model View Controller (MVC) MVC application structure was introduced in the 1970s as part of Smalltalk. 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).
  8. 8. ● ● Model View Controller (MVC) The view is the Document Object Model (DOM) ● The controllers are JavaScript classes ● The model data is stored in object properties.
  9. 9. Data Binding ● ● ● Before AJAX single-page apps were common, platforms like Rails, PHP, or JSP helped us create the user interface (UI) by merging strings of HTML with data before sending it to the users to display it. Libraries like jQuery extended this model to the client and let us follow a similar style, but with the ability to update, part of the DOM separately, rather than updating the whole page.
  10. 10. Data Binding ● This all works pretty well, but when you want to insert fresher data into the UI, or change the data based on user input, you need to do quite a bit of non-trivial work to make sure you get the data into the correct state, both in the UI and in JavaScript properties.
  11. 11. Data Binding ● ● ● But what if we could have all this work done for us without writing code? What if we could just declare which parts of the UI map to which JavaScript properties and have them sync automatically? This style of programming is called binding. data
  12. 12. Data Binding Example
  13. 13. Dependency Injection ● ● ● The $scope object that does our data binding is passed to us automatically We didn’t have to create it by calling any function. We just asked for it by putting it in HelloController’s constructor.
  14. 14. Dependency Injection ● ● ● We get this magical effect through Angular’s dependency injection system. Dependency injection lets us follow a development style in which, instead of creating dependencies, our classes just ask for what they need. This follows a design pattern called the Law of Demeter, also known as the principle of least knowledge.
  15. 15. Directives ● ● One of the best parts of Angular is that you can write your templates as HTML. You can do this because at the core of the framework we’ve included a powerful DOM transformation engine that lets you extend HTML’s syntax.
  16. 16. Directives ● ● ● ● Double-curly( {{ something }} ) notation for data binding. ng-app directive lets you tell Angular which part of your page it should expect to manage ng-controller for specifying which controller oversees which part of the view. ng-model, which binds an input to part of the model. ● And more... ● And you can write your own
  17. 17. Examples ● http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z?p=preview ● http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?p=preview

×