Skip to content

Moving some RUI stuff to angular appsdk #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pcwinters wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Moving some RUI stuff to angular appsdk #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c7b1220
Porting RUI services and utilities to angular app sdk
Jul 12, 2014
498c186
consistency in test folder namespaces
Jul 12, 2014
a9f9033
Rebuild and some grunt/config changes due to folder moves
Jul 12, 2014
d424840
Strip much of the junk from the readme
Jul 12, 2014
afd4e94
Wsapi project scope down loader
Jul 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions Gruntfile.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = (grunt) ->
copy:
build:
cwd: '<%= src %>/'
src: ['scripts/**/*.js', 'scripts/**/*.coffee', 'views/**/*']
src: ['**/*.js', '**/*.coffee', '**/*.html', '**/*.jade']
dest: '<%= build %>/'
expand: true

Expand All @@ -22,7 +22,7 @@ module.exports = (grunt) ->
dist:
files:
'<%= dist %>/rally.js': [
'<%= build %>/scripts/**/*.js'
'<%= build %>/**/*.js'
]

clean:
Expand All @@ -35,18 +35,18 @@ module.exports = (grunt) ->
bare: true
expand: true
flatten: false
cwd: '<%= build %>/scripts'
cwd: '<%= build %>'
src: '**/*.coffee'
dest: '<%= build %>/scripts/'
dest: '<%= build %>'
ext: '.js'

# Compile all Jade templates
jade:
views:
files: [{
expand: true
cwd: '<%= build %>/views'
dest: '<%= build %>/views/'
cwd: '<%= build %>'
dest: '<%= build %>'
ext: '.html'
src: ["**/*.jade"]
}]
Expand All @@ -62,5 +62,5 @@ module.exports = (grunt) ->

grunt.registerTask('build', ['clean', 'copy:build', 'coffee', 'jade:views'])
grunt.registerTask('dist', ['build', 'concat:dist'])
grunt.registerTask('test', ['build', 'karma:unit'])
grunt.registerTask('default', ['build', 'test'])
grunt.registerTask('test', ['karma:unit'])
grunt.registerTask('default', ['test', 'dist'])
145 changes: 3 additions & 142 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,81 +7,7 @@ adapter, the primary purpose is to support the patterns and style of usage obser

TODO
----

- [ ] Build distribution script
- [ ] Bower file with version

Use Angular in ExtJS
====================

We've extended ```Ext.Component``` to bootstrap an angular module anywhere within your ext app.
The component will very simple call [angular.bootstrap](http://docs.angularjs.org/api/angular.bootstrap)
on the component's element after it renders and set up event bubbling between Ext and Angular.

```javascript
template = new Ext.XTemplate('<div ng-controller="MyController"/>');
Ext.create('Angular.Component', {
module: 'myModule',
renderTo: 'angular-container',
renderTpl: template
})
```

Use ExtJS in Angular
====================

Attributes and Configs
-------
Ext components and widgets are created in code, but we want to leverage Angular's support for attributes.
While angular makes it easy enough to define interpolated, evaluated, and isolate scope bound attributes,
it's not simple to do this dynamically nor where the value type is unknown.

The value of all attributes (except explicitly stated special ones) will be passed as a part of the config object
to Ext.create().

### Interpolation
This is the default behavior for config attributes. Standard attributes will be compiled and evaluated as strings.
```
<ext-component title="My title is {{someVar}}"/>
```

### Evaluation
Using the prefix 'e-' in hungarian style notation, the value of the attribute will be assumed to be an expression
evaluated on the parent scope.
```
<ext-component e-title="'My title is '+someVar"/>
```

### Binding
Perhaps the least likely scenario is to set up two-way property binding. The title will be set to the value of the
parent scope, and a two-way binding will be set up with the component's property.
```
<ext-component b-title="someVar"/>
```

### Special attributes
In order to configure components with some reasonable defaults, there are a few special directive attributes.

- config - An angular expression that returns an object used for Ext.create(). All other config attributes will be added to this config object with ```configs = _.extend(configs, attributeValue)```
- example - ```config="{title:myTitle}"```
- bindTo - A variable name on the parent scope to bind the ext component to.
- renderTo - Establishes what DOM element to render the component to.
- ```false``` or ```''```: Doesn't set the config at all (You'll probably need to use 'add')
- ```true```: sets 'renderTo' to the directives HTML element.
- ```[string]```: passes the id through to the Ext renderTo config.
- add - For adding components to parent containers.
- ```false``` or ```''```: No behavior. You probably want to use 'renderTo' in this case.
- ```true```: Adds this component to the immediate parent directive/component (assuming the parent is a container)
- ```[string]```: Add this component to the component found at given property on the parent scope (Least likely)

TODO
----

- [ ] Hungarian style attribute evaluation
- [ ] Interpolated attributes
- [ ] Evaluated attributes
- [ ] Two-way binding
- [ ] Virtual element directives that add to parent 'items'
Much of this repo and library is a work in progress. There aren't any special Angular-EXT adapters or bindings yet, but this will be the place for them.

Angular's Digest and Ext Events
-------------------------------
Expand All @@ -96,73 +22,8 @@ a $digest as well as $emit those events on the parent scope.

DataStores
----------
???
Things like find() and datastore results can be set up as functions.
```javascript
$scope.results = function() { return store.find(...) }
```

Stores should be observables that can be bound to the digest cycle just like components. They'll get constructed
on the scope and manipulated with $watch if they need to be bound to things like filter changes.
WIP. Conceptually, data stores can be adapted to provide angular promises.

Motivation
----------
The goal is to be able to do the following

```javascript
$scope.title = 'Border Layout';
```
```html
<ext-component bindTo="panelVar" xtype="panel" width="500" height="500" title="{{title}}" layout="border" renderTo="true">
<ext-component title="South Region is resizable" xtype="panel" region="south" height="100" split="true" margins="0 5 5 5"/>
<ext-component title="West Region is collapsible" xtype="panel" region="west" width="200" collapsible="true" margins="5 0 0 5" id="west-region-container" layout="fit"/>
<ext-component title="Center Region" xtype="panel" region="center" layout="fit" margins="5 5 0 0"/>
</ext-component>
```

### TODO
- [ ] - Determine how child elements get rolled into 'items' for their parent. Shouldn't this be the default behavior?
- [ ] - Component directive that includes child html as 'template' for creating containers with markup

Instead of this

```javascript
var panelVar = Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
```
And, to allow the App SDK to effortlessly include angular apps and components.
```
Ext.create('Rally.anuglar.app', {module: 'myModule'})
```

### TODO
- [ ] Create an ext container class to bootstrap angular.
To allow the App SDK to effortlessly include angular apps and components.
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"node_modules",
"bower_components",
"test",
"src"
"src",
"build"
],
"dependencies": {
"angular": "latest",
Expand Down
Loading