definitions from code teaching sites - SnowBubbleJS/AngularArrows-Angular GitHub Wiki

• AngularJS is a JavaScript framework for making dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's two-way data binding and dependency injection eliminate much of the code you would otherwise have to write.

• An AngularJS Directive extends HTML attributes by placing markers on a HTML tag which tells Angular to run or reference JavaScript code. Directives allow you to write HTML that expresses the behavior of your application.

• AngularJS Expressions binds data to HTML markup by using double curly braces {{data}}

Controllers are where we define our app's behavior by defining functions and values.

(ng-app = attach the Application Module to the page) (ng-controller = attach a Controller function to the page) (ng-model = binds the form element value to the property) ({{}} = expressions allow you to insert dynamic values into your HTML) (Modules - * Where we write pieces of our Angular application. * Makes our code more maintainable, testable, and readable * Where we define dependencies for our app) (Services give your Controller additional functionality, like...

• Fetching JSON data from a web service with $http
• Logging messages to the Javascript console with $log
• Filtering an array with $filter) <-- All built-in Services start with a $ sign

• A module contains the different components of an AngularJS app.
• The ng-app is called a directive. It tells AngularJS that the MyApp module will live within the element, termed the application's scope. In other words, we used ng-app to directive to define the applications scope.
• A controller manages the app's data.
• Like ng-app, ng-controller is a directive that defines the controllers scope. This means that the properties attaches to $scope in the MainController becomes available to use within
  Expressions are used to display values on the page.

  Typical workflow

  1. Create a module, and use ng-app in the view to define the application scope.
  2. Create a controller, and use ng-controller in the view to define the controller scope.
  3. Add data to $scope in the controller so they can be displayed with expressions in the view.

  Optional to use (|) The pipe symbol (|) takes the output on the left and "pipes" it to the right. Basically, filters help to separate the content in the controller from its presentation view. It formats the value of an expression.

  • Directives bind behavior to HTML elements. When the app runs, AngularJS walks through each HTML element looking for directives. When it finds one, AngularJS triggers that behavior (like attaching a scope or looping through an array).

  • Something I'm getting from these lessons are the emphasis of creating a custom directive (might brain-storm on that)

  • Directives are a powerful way to create self-contained, interactive components. Unlike JQuery which adds interactivity as a layer on top of HTML, AngularJS treats interactivity as a native component of HTML.

  • The key rule concept here is the $scope concept, which you’ll tie to all your functions inside a specific controller. The $scope refers to the current element/area in the DOM (no, not the same as this), and encapsulates a very clever scoping capability that keeps data and logic completely scoped inside elements. It brings JavaScript public/private scoping to the DOM, which is fantastic.

  Rules for the Controller going forward:

  Controllers should hold zero logic Controllers should bind references to Models only (and call methods returned from promises) Controllers only bring logic together Controller drives Model changes, and View changes. Keyword; drives, not creates/persists, it triggers them! Delegate updating of logic inside Factories, don’t resolve data inside a Controller, only update the Controller’s value with updated Factory logic, this avoids repeated code across Controllers as well as Factory tests made easier Use “Controller as” (read the article) Keep things simple, I prefer XXXXCtrl and XXXXFactory, I know exactly what the two do, we don’t need fancy names for things Keep method/prop names consistent across shared methods, such as this.something = MyFactory.something; otherwise it becomes confusing Factories hold the Model, change, get, update, and persist the Model changes Think about the Factory as an Object that you need to persist, rather than persisting inside a Controller Talk to other Factories inside your Factory, keep them out the Controller (things like success/error handling) Try to avoid injecting $scope into Controllers, generally there are better ways to do what you need, such as avoiding $scope.$watch()

  The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.