Skip to content

README.md

Latest commit

 

History

History
111 lines (98 loc) · 5.08 KB

README.md

File metadata and controls

111 lines (98 loc) · 5.08 KB

Single Page Web Applications with AngularJS(Coursera)

(course github : https://github.com/jhu-ep-coursera/fullstack-course5/)

WEEK1

1. MVVM pattern

  • Model(javascript) - data / business logic
    • represents and holds raw data
    • some of hits data may be displayed in the view
    • can also cantain logic to retriece the data from some source
    • contains no logic associated w/ displaying the model
  • View(html, css) - UI / presentation
    • user interface
    • only display the data that is given
    • never changes the data
    • declaratively broadcasts events, but never handles them
  • ViewModel(javascript) - presentation logic
    • representation of the state of the view
    • responds to view events, aka presentation logic
    • calls other functionality for business logic processing
    • never directly asks the view to display anything

2. Declarative binder

  • declaratively binds the model of the viewmodel to the view
  • declaratively means you don'y have to write any code(the framework does this thing)
  • key enabler of the whole MVVM pattern

3. Dependency Injection (DI)

  • design pattern that implements incersion of control for resolving dependencies
  • client gets called with eht dependendy by some system
  • client is not responsible for instantiate the dependency
  • (don't call us, we'll call you)

4. Minification

  • process of removing all unnecessary characters from source code without changing its functionality
  • DI(Dependency Infection) in Angular needs to be minification proof
  • 2 methods are:
    • inline array with function as last element
    • attach $inject property to the function object

5. Expression : {{exp}}

  • something that evaluates to some value
    • processed by Angular & roughly similar to the result of eval(some_js)
    • executed in the context of the scope & has access to properties on $scope
    • doesn't throw errors if it results in a TypeError or ReferenceError
    • control flow functions (ex. 'if' statements ) are not allowed
    • accept a filter or a filter chain to format the output

6. Interpolation

  • process of evaluating a string literal containing one or more placeholders, which are replaced with values
    • in Angular, this string :
      • Messege is {{ messege }}
    • (provided messege = "hello") is interpolated into this string :
      • Messege is hello
  • still connected to the original messege property
    • if $scope.messege changes, so will interpolation result

WEEK2

1. Filter Function

  • steps to create a custom filter
    • define filter factory function
    • register filter factory with module
  • to use custom filter in Javascript
    • inject filter function registeredNameFilter into controller
  • to use in HTML : no need to inject into controller
    • {{ expression | registeredName }}
  • extra arguments can be supplied to the filter function
    • otherwise, steps are the same for registration & injection
  • to use in HTML with extra arguments
    • {{ expression | registeredName : arg1, arg2... }}
  • to user filter chaining
    • {{ expression | filter1 | filter2 ... }}
    • result of the filter1 becomes to an input of filter2

2. Digest Cycles

  • digest cycle : running digest loops until all watchers report that nothing has changed
    • dirty checking
  • several ways to set up watchers:
    • $scope.$watch : bad way(because controllers and templates have their own ways to deal with watchers and set them up)
    • {{ someProperty }}
    • <input ... ng-model="someProperty" ...>
  • only applied to things done inside of the Angular context
  • digest cycle does not get triggered automatically if events are unaware of Angular
  • solution:
    • call $digest after custom code (bad way)
    • wrap custom code inside of $apply
    • find angular specific service that handles the same functionality (ex: $timeout)

3. Data Binding

  • 2-way binding (ng-model) means:
    • listener for change on input automatically set up by Angular updates property value on $scope
    • direct update to property value is automatically updated in UI
  • 1-way binding ( {{ property }} ) means:
    • direct update to property value is updated in UI
  • 1-time binding ( {{ ::property }} ) means:
    • initialized value of property is automatically updated in UI
    • watcher for property is removed, so UI never again gets updated

4. NG-REPEAT

  • ng-repeat is a directive that extends the functionality of HTML elements it's applied to
    • behaves very similarily to for-each construct
  • ng-repeat="item in collection", where item can now be used in interpolation as an item in the collection at particular index of iteration
  • ng-repeat exposes a special $index property to the body of its host tag
    • holds the numeric index of the current item in the loop
  • Array has a special function called filter
    • create new array where each item satisfies some condition of the comparison function passed into the filter function
  • Angular has a special filter called 'filter'
    • provided a string as first argument, it will filter array it's applied to, matching all string items against the provided one
  • ng-repeat="item on collection | filter : searchString"