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.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
function MyCtrl($scope) {
$scope.name = "";
$scope.$watch("name", function(newValue, oldValue) {
if (newValue.length > 0) {
$scope.greeting = "Greetings " + newValue;
}
});
}
|
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
- STRENGTHS
- Two-way data binding
- HTML Templates
- Dependency Injection
- Deep Linking
- Directives!!!
- Testable
- Embeddable - you can attach the AngularJS application to a specific DOM element and not have to worry about nasty side effects outside of that element and into the rest of the page
...
About Angular
- Open source project hosted on GitHub and licensed by Google, Inc. under the terms of the MIT license.
- AngularJS is a relatively new actor on the client-side MVC frameworks scene, yet it has managed to attract a lot of attention, mostly due to its innovative templating system, ease of development, and very solid engineering practices
- Prescriptive Framework - AngularJS is prescriptive in the sense that it has a recommended way of building web apps. It has its own spin on the ubiquitous MVC pattern that is especially well suited for JavaScript.
How does it stand out from the crowd?
- Automatic refresh and the two-way data binding frees developers from the tedious work of explicitly triggering UI repaints
- Live DOM generated from HTML syntax is used as a templating language. More importantly, it is possible to extend an existing HTML vocabulary (by creating new directives), and then build UIs using a new HTML-based DSL
- Declarative approach to the UI results in a very concise and expressive way
- The excellent UI templating machinery doesn't put any constraints on the JavaScript code (for example, models and controllers can be created using plain, old JavaScript without the AngularJS APIs called all over the place)
Getting your development environment set up
TODO: add content here
About Angular
- Open source project hosted on GitHub and licensed by Google, Inc. under the terms of the MIT license.
- AngularJS is a relatively new actor on the client-side MVC frameworks scene, yet it has managed to attract a lot of attention, mostly due to its innovative templating system, ease of development, and very solid engineering practices
- Prescriptive Framework - AngularJS is prescriptive in the sense that it has a recommended way of building web apps. It has its own spin on the ubiquitous MVC pattern that is especially well suited for JavaScript.
Core Features
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
...
Core Features
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
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
...
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
...
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