Angular is a structural framework for building dynamic web applications. It uses HTML as a template language and extends HTML syntax to build components. Angular handles DOM manipulation and AJAX calls, and includes data binding, templating directives, forms, routing, and reusable components. It aims to simplify application development through higher-level abstractions. The key concepts of Angular include templates, directives, models, scopes, expressions, and controllers.

1. ㈜유미테크

2. 1. What is Angular?
• Angular is a structural framework for dynamic wep app.
– Let’s you use HTML as a template language.
– Let’s you extend HTML’s syntax to express your app’s components.
– Eliminates much of the code you write through data binding and dependency
injection.
• HTML
– A greate declarative language for static documents.
– But, do not contain much in the way of creating application.
• Angular teaches the browser new syntax.
– Data binding, as in {{}}
– DOM control structures for repeating/hiding DOM fragments
– Support for forms and form validation.
– Attaching code-behind to DOM elements..
– Grouping of HTML into reusable components.
사내전파교육 제목명을 적어주세요.2

3. 2. A Complete client-side solution
• Handles all of the DOM and AJAX code you once wrote by hand, and make
sure that you can easily change at a starting point.
– Everything you need: data-binding, basic templating directives, form validation,
routing, deep-linking, reusable components, dependency injection.
– Testability story: unit-testing, end-to-end testing, mocks, test harness.
– Seed application with directory layout and test scripts as a starting point.
사내전파교육 제목명을 적어주세요.3

4. 3. Angular Sweet Spot
• Angular simplifies application development by presenting a higher level of
abstraction to the developer.
• Every app is a good fit for Angular.
• Angular was built with the CRUD application in mind.
사내전파교육 제목명을 적어주세요.4

5. 4. The Zen of Angular
• Angular is built around the belief that declarative code is better than
imperative when it comes to building UIs and wiring software components
together.
– Good to decouple DOM manipulation from app logic.
– Good to regard app testing as equal in importance to app writing.
– Excellent to decouple the client side of an app from the server side.
– Helpful indeed if the framework guides developers through the entire journey of
building an app: from designing the UI, through writing the business logic, to testing.
– Good to make common tasks trivial and difficult tasks possible.
사내전파교육 제목명을 적어주세요.5

6. 5. Angular frees you from what!
• Registering callbacks:
– It vastly reduces the amount of JavaScript coding you have to do, and it makes it
easier to see what your application does.
• Manipulating HTML DOM programmatically:
– By declaratively describing how the UI should change as your application state
changes, you are freed from low-level DOM manipulation tasks.
• Marshaling data to and from the UI:
– Angular eliminates almost all of this boilerplate, leaving code that describes the
overall flow of the application rather than all of the implementation details.
• Writing tons of initialization code just to get started:
– With Angular you can bootstrap your app easily using services, which are auto-
injected into your application in a Guice-like dependency-injection style.
사내전파교육 제목명을 적어주세요.6

7. 6. Conceptual Overview
• Template
– HTML with additional markup
• Directives
– extend HTML with custom attributes and elements
• Model
– the data that is shown to the user and with which the user interacts
• Scope
– context where the model is stored so that controllers, directives and expressions can
access it
• Expressions
– access variables and functions from the scope
• Compiler
– parses the template and instantiates directives and expressions
• Filter
– formats the value of an expression for display to the user
사내전파교육 제목명을 적어주세요.7

8. 6. Conceptual Overview Cont’d
• View
– what the user sees (the DOM)
• Data Binding
– sync data between the model and the view
• Controller
– the business logic behind views
• Dependency Injection
– Creates and wires objects / functions
• Injector
– dependency injection container
• Module
– configures the Injector
• Service
– reusable business logic independent of views
사내전파교육 제목명을 적어주세요.8

9. 7. Bootstrap (one of details)
• Angular <script> tag
– Placing script tags at the end of the page improves app load time because the HTML
loading is not blocked by loading of the angular.js script.
– Place ng-app to the root of your application, typically on the <html> tag if you want
angular to auto-bootstrap your application.
사내전파교육 제목명을 적어주세요.9

10. 7. Bootstrap Cont’d
• Angular initialize Process
– initializes automatically upon DOMContentLoaded event or when the angular.js script
is evaluated if at that time document.readyState is set to 'complete'.
– load the module associated with the directive.
– create the application injector
– compile the DOM treating the ng-app directive as the root of the compilation.
사내전파교육 제목명을 적어주세요.10

11. 7. Bootstrap Cont’d
• Angular automatic & manual initialize script code.
– Automatic
– Manual
사내전파교육 제목명을 적어주세요.11

12. 8. HTML Compiler (one of details)
• Overview
– what is need is a way to teach the browser new HTML syntax.
– AngularUS provides HTML directives extensions
– You will create a Domain Specific Language for building your application.
• Compiler
– Compile: traverse the DOM and collect all of the directives.
– Link: combine the directives with a scope and produce a live view.
사내전파교육 제목명을 적어주세요.12

13. 8. HTML Compiler Cont’d
• Other templating system
– any changes to the data need to be re-merged with the template and then
innerHTMLed into the DOM.
• AngularJS
– Angular compiler consumes the DOM, not string templates and a linking function,
which when combined with a scope model results in a live view is the result.
– The view and scope model bindings are transparent.
사내전파교육 제목명을 적어주세요.13
Other templating system Angular JS

14. 8. HTML Compiler Cont’d
• Other’s approaches
– reading user input and merging it with data
– clobbering user input by overwriting it
– managing the whole update process
– lack of behavior expressiveness
• AngularJS’s approaches
– approach produces a stable DOM.
– The DOM element instance bound to a model item instance does not change for the
lifetime of the binding.
사내전파교육 제목명을 적어주세요.14

15. 8. HTML Compiler Cont’d
• Compile directives
– $compile traverses the DOM and matches directives.
– $compile links the template with the scope by calling the combined linking function.
– This in turn will call the linking function of the individual directives, registering
listeners
– The result of this is a live binding between the scope and the DOM. So at this point,
a change in a model on the compiled scope will be reflected in the DOM.
사내전파교육 제목명을 적어주세요.15

16. 9. Code compare vs jQuery
• When you input the name, reflect it to the input text.
사내전파교육 제목명을 적어주세요.16
via jQuery via AngularJS

17. 10. References
• AnguarJS Official Site
– http://www.angularjs.org
• Developer Guide
– http://docs.angularjs.org/guide
• API
– http://docs.angularjs.org/api
사내전파교육 제목명을 적어주세요.17