Angular

Angular is an MVW (model-view-whatever) framework for properly architected single-page applications.   It’s opinionated, declarative, has two-way binding, and allows separation of presentation and business logic.

Angular 1 and 2 are quite different.

Modules:

Module are top-level containers for different parts of the application.

Controllers:

  • Controllers build logic for a particular view
  • Controllers configure and manage the $scope object.
  • Controllers make your components stateful.  Without controllers, your component is stateless.

Screen Shot 2017-12-15 at 10.46.47 AM

In example above, controller is not part of a component so to access the attributes, you have to use $scope.  If the controller is within a component, you have to use ‘this’ (and $ctrl in template). 

Scope: 

  • In Angular 1, you access scope using $scope.
  • In Angular 2, you access scope using this (because $scope and controllers don’t exist) and $ctrl.  (It’s similar to props in React)

Factories/Services:

  • Factories and services are objects that you can register with Angular so their data and behavior can be shared among different parts of the app. (e.g. registering an API with Angular so it can be accessed everywhere in the app)
  • The main difference between factories and services is that services are instantiated with the ‘new’ keyword so you do not need to return the object.
  • Services allow the use of ES6 classes because they are constructor functions.

Components:

Angular 1.x uses components but Angular 2 is entirely component-based.

  • In a component, there is always a template, which is used to render your view.
  • If you’re passing data from or to a component, use data binding.
    • When using binding, specify what you want the attribute to be treated as:
      • ‘@’ : strings
      • ‘<‘ :  one-way binding. Used to pass variables down.
      • ‘=’:  two-way binding.  Not very common.
      • ‘&’: methods or functions
  • Use ‘this’ keyword to access scope within controller in component.

Screen Shot 2017-12-15 at 12.14.01 PM

Screen Shot 2017-12-15 at 12.27.25 PM

data binding is used above to pass the ‘item’ variable from ‘todoList’ component to ‘entry’ subcomponent.

Directives:

Directives supercharge your HTML by giving it angular power!

There are four categories of directives:

  1. attribute (most commonly used)
  2. class name
  3. comment
  4. element (components are basically element directives)

Filters: 

Angular offers filters that make your app dynamic.  Some filters include: JSON, uppercase, lowercase, etc.

Syntax: 

  • built-in directives are prefixed with ‘ng’ in Angular 1.  (e.g. ng-click).  No ‘ng’ in Angular 2.
  • To present something to a user, use double curly braces {{ }}
  • When you want something to be invoked by Angular, use double quotes.

AngularJS Resources:

 

 

Angular

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s