Meet AngularJS!
Data Binding and Responding to Scope Changes
This example demonstrates how to react on a model change to trigger some further actions. The value greeting will be changed whenever there's there’s a change to the name model and the value is not blank.
...
Dependency Injection
- The built-in support for DI makes it easy to assemble a web application from smaller, thoroughly tested services
Two-way Data Binding
- It makes it easy to change a value and effortlessly have it update the DOM. This means that there is only one place in your application where that piece of information is stored
Strong Focus on Testability
- The design of the framework and the tooling around it promote testing practices at each stage of the development process.
Deep Linking
- The framework makes it easy to share and change the application state. The URL of the application reflects what the user is doing.
Unique Templating System
- It uses HTML as the templating language
- It doesn't require an explicit DOM refresh, as AngularJS is capable of tracking user actions, browser events, and model changes to figure out when and which templates to refresh
- It has a very interesting and extensible components subsystem, and it is possible to teach a browser how to interpret new HTML tags and attributes (Directives!!!)
- You can create custom DOM elements, attributes, or classes that attach functionality that you define in JavaScript
Core concepts
Modules
- Advantages:
- Keeps our global namespace clean
- Eases writing tests as well as keeps them clean as easy to target isolated functionality
- Eases to share code between applications
- Allows different parts of the code to be loaded in any order
Scopes
...
Modules exist as containers that can provide configuration information, runtime dependencies, and other infrastructure support.
An Angular (main) "application" is just a module except...
- it should know about all the other modules
- it is the one identified by the ngApp directive
With Angular you can place all your controllers into a one module and all your services into a second module, or put the controllers and services all inside a single module
- Advantages of using multiple modules in one app:
- Keeps our global namespace clean
- Eases writing tests as well as keeps them clean as easy to target isolated functionality
- Eases to share code between applications
- Allows different parts of the code to be loaded in any order
Scopes
- Scopes objects that contain functionality and data to use when rendering the view. It is the single source of truth for all views. You can think of scopes as view models.
- Basic Functions
- They provide observers to watch for model changes
- They provide the ability to propagate model changes through the application as well as outside
the system to other components - They can be nested such that they can isolate functionality and model properties.
- They provide an execution environment in which expressions are evaluated.
- All properties found on the $scope object are automatically accessible to the view.
...
In this example, we can then reference data on the ParentController's ParentController’s containing $scope on the child scope.
...
Advanced Concepts
Directives
Directives are Angular's Angular’s method of creating new HTML elements with their own custom functionality. For instance, we can create our own custom element "my-directive"
...
- https://github.com/mgechev/angularjs-style-guide
- AngularJS Best Practices: I've I’ve Been Doing It Wrong! -- Part 1, Part 2, Part 3
- Unit Testing Best Practices in AngularJS
- Advanced Design Patterns and Best Practices
...
Scopes
- The $rootScope object is the closest object we have to the global context in an angular app. It's It’s a bad idea to attach too much logic to this global context, just like it's it’s not a good idea to dirty the javascript global scope.
- A model refers to a traditional JavaScript object {} where transient state should be stored. Persistent state should be bound to a service, which is then responsible for dealing with persisting that model.
Data Binding
- Due to the nature of javascript itself and how it passes by value vs. reference, it's it’s considered a best- practice in Angular to bind references in the views by an attribute on an object, rather than the raw object itself.
...
Directives
- While declaring an AngularJS directive, the naming convention followed is camelCase. For example, we would define the name of the directive as 'myDatePicker'. But when you actually use the directive in your HTML, it is the dash-separated version (my-date-picker).
- To make your directives and attributes HTML5 compliant, you can prefix all AngularJS attributes with "data“data-" ” or "x“x-"”. That is, "x“x-ng-show" show” or "data“data-date-picker"picker”, and AngularJS will treat it just like you wrote it like a normal HTML element.
...
Pentaho Platform Integration
Why AngularJS ?
TODO:
- What is the use case for this technology from the developers point of view
- What benefit does a developer get from using this technology
- What pain were we trying to solve by adopting this technology
- What are the strengths and weaknesses of this technology
- What technologies complement this technology and can be used in tandem
Getting your development environment set up
TODO: add content here
Unit Test / CI
...
Plugging into Pentaho User Console
A seed project has been created to demonstrate the usage of the PUC Plugin API. The REAMDME on the Github page describes how to use it. https://github.com/pentaho/pentaho-angular-seed