Added events.Service and xmlhelper.service
This commit is contained in:
perploug
committed by
Per Ploug Krogslund
Per Ploug Krogslund
parent
3e3f12bf63
commit
e825c08901
@@ -1,168 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Test-driven developement flow for Umbraco 7</h1>
|
||||
<p><em>This document tries to outline what is required to have a test-driven setup for
|
||||
angular developement in Umbraco 7. It goes through the setup process as well as how
|
||||
to add new services that requires mocking as well as how to use grunt to run tests automaticly.</em></p>
|
||||
<h2>Setup</h2>
|
||||
<p>Make sure to have all the node dependencies in order when you start, these are updated regularly in case we need to go to a new version of a dependency, or new dependencies are added.</p>
|
||||
<p>Simply run open a terminal / cmd in the Umbraco.Web.Ui.Client folder and run:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<p>This should setup the entire grunt,karma and jsint setup we use for tests and pruning.</p>
|
||||
<h2>Automated testing</h2>
|
||||
<p>To start working on the client files, and have them automaticly built and merged into the client project, as well as the VS project, simply run the command</p>
|
||||
<pre><code>grunt dev</code></pre>
|
||||
<p>This will start a webserver on :8080 and tell karma to run tests every time a .js or .less file is changed.
|
||||
After linting and tests have passed, all the client files are copied to umrbaco.web.ui/umbraco folder, so it also keeps the server project uptodate on any client changes. This should all happen in the background.</p>
|
||||
<h2>Adding a new service</h2>
|
||||
<p>The process for adding or modifying a service should always be based on passed tests. So if we need to change the footprint of the contentservice, and the way any controller calls this service, we need to make sure the tests passes with our mocked services.</p>
|
||||
<p>This ensures 3 things:
|
||||
- we test our controllers
|
||||
- we test our services
|
||||
- we always have mocked data available, if you want to run the client without IIS</p>
|
||||
<h3>Example:</h3>
|
||||
<p>We add a service for fetching macros from the database, the initial implementation should happen of this service should happen in <code>/src/common/resources/macro.resource.js</code></p>
|
||||
<p>The macro.resource.js calls <code>$http</code> as normal, but no server implementation should be needed at this point.</p>
|
||||
<p>Next, we describe how the rest service should return data, this is done in /common/mocks/umbraco.httpbackend.js, where we can define what data a certain url
|
||||
would return. </p>
|
||||
<p>So in the case of getting tree items we define:</p>
|
||||
<pre><code>$httpBackend
|
||||
.whenGET( urlRegex('/umbraco/UmbracoTrees/ApplicationTreeApi/GetApplicationTrees') )
|
||||
.respond(returnApplicationTrees);</code></pre>
|
||||
<p>The <code>returnApplicationTrees</code> function then looks like this: </p>
|
||||
<pre><code>function returnApplicationTrees(status, data, headers){
|
||||
var app = getParameterByName(data, "application");
|
||||
var tree = _backendData.tree.getApplication(app);
|
||||
return [200, tree, null];
|
||||
}</code></pre>
|
||||
<p>It returns an array of 3 items, the http status code, the expected data, and finally it can return a collection of http headers.</p>
|
||||
<pre><code>_backendData.tree.getApplication(app);</code></pre>
|
||||
<p>Refers to a helper method in <code>umbraco.httpbackend.helper.js</code> which contains all the helper methods we
|
||||
use to return static json. </p>
|
||||
<h3>In short</h3>
|
||||
<p>So to add a service, which requires data from the server we should:</p>
|
||||
<ul>
|
||||
<li>add the .service.js as normal</li>
|
||||
<li>add the .resource.js as normal</li>
|
||||
<li>call $http as normal</li>
|
||||
<li>define the response data in umbraco.httpbackend.helper.js</li>
|
||||
<li>define the url in umbraco.httpbackend.js</li>
|
||||
</ul>
|
||||
<h3>ServerVariables</h3>
|
||||
<p>There is a static servervariables file in /mocks which describes the urls used by the rest service, this is currently needed as we dont have this set as a angular service, and no real conventions for these urls yet. Longer-term it would be great to have a urlBuilder which could do</p>
|
||||
<pre><code>urlService.url("contentTypes", "GetAllowedChildren");
|
||||
//would return /<umbracodir>/<apibaseDir>/contentyTypes/getAllowedChildren</code></pre>
|
||||
<p>But for now, they are set in the servervariables file. </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Test-driven developement flow for Umbraco 7</h1>
|
||||
<p><em>This document tries to outline what is required to have a test-driven setup for
|
||||
angular developement in Umbraco 7. It goes through the setup process as well as how
|
||||
to add new services that requires mocking as well as how to use grunt to run tests automaticly.</em></p>
|
||||
<h2>Setup</h2>
|
||||
<p>Make sure to have all the node dependencies in order when you start, these are updated regularly in case we need to go to a new version of a dependency, or new dependencies are added.</p>
|
||||
<p>Simply run open a terminal / cmd in the Umbraco.Web.Ui.Client folder and run:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<p>This should setup the entire grunt,karma and jsint setup we use for tests and pruning.</p>
|
||||
<h2>Automated testing</h2>
|
||||
<p>To start working on the client files, and have them automaticly built and merged into the client project, as well as the VS project, simply run the command</p>
|
||||
<pre><code>grunt dev</code></pre>
|
||||
<p>This will start a webserver on :8080 and tell karma to run tests every time a .js or .less file is changed.
|
||||
After linting and tests have passed, all the client files are copied to umrbaco.web.ui/umbraco folder, so it also keeps the server project uptodate on any client changes. This should all happen in the background.</p>
|
||||
<h2>Adding a new service</h2>
|
||||
<p>The process for adding or modifying a service should always be based on passed tests. So if we need to change the footprint of the contentservice, and the way any controller calls this service, we need to make sure the tests passes with our mocked services.</p>
|
||||
<p>This ensures 3 things:
|
||||
- we test our controllers
|
||||
- we test our services
|
||||
- we always have mocked data available, if you want to run the client without IIS</p>
|
||||
<h3>Example:</h3>
|
||||
<p>We add a service for fetching macros from the database, the initial implementation should happen of this service should happen in <code>/src/common/resources/macro.resource.js</code></p>
|
||||
<p>The macro.resource.js calls <code>$http</code> as normal, but no server implementation should be needed at this point.</p>
|
||||
<p>Next, we describe how the rest service should return data, this is done in /common/mocks/umbraco.httpbackend.js, where we can define what data a certain url
|
||||
would return. </p>
|
||||
<p>So in the case of getting tree items we define:</p>
|
||||
<pre><code>$httpBackend
|
||||
.whenGET( urlRegex('/umbraco/UmbracoTrees/ApplicationTreeApi/GetApplicationTrees') )
|
||||
.respond(returnApplicationTrees);</code></pre>
|
||||
<p>The <code>returnApplicationTrees</code> function then looks like this: </p>
|
||||
<pre><code>function returnApplicationTrees(status, data, headers){
|
||||
var app = getParameterByName(data, "application");
|
||||
var tree = _backendData.tree.getApplication(app);
|
||||
return [200, tree, null];
|
||||
}</code></pre>
|
||||
<p>It returns an array of 3 items, the http status code, the expected data, and finally it can return a collection of http headers.</p>
|
||||
<pre><code>_backendData.tree.getApplication(app);</code></pre>
|
||||
<p>Refers to a helper method in <code>umbraco.httpbackend.helper.js</code> which contains all the helper methods we
|
||||
use to return static json. </p>
|
||||
<h3>In short</h3>
|
||||
<p>So to add a service, which requires data from the server we should:</p>
|
||||
<ul>
|
||||
<li>add the .service.js as normal</li>
|
||||
<li>add the .resource.js as normal</li>
|
||||
<li>call $http as normal</li>
|
||||
<li>define the response data in umbraco.httpbackend.helper.js</li>
|
||||
<li>define the url in umbraco.httpbackend.js</li>
|
||||
</ul>
|
||||
<h3>ServerVariables</h3>
|
||||
<p>There is a static servervariables file in /mocks which describes the urls used by the rest service, this is currently needed as we dont have this set as a angular service, and no real conventions for these urls yet. Longer-term it would be great to have a urlBuilder which could do</p>
|
||||
<pre><code>urlService.url("contentTypes", "GetAllowedChildren");
|
||||
//would return /<umbracodir>/<apibaseDir>/contentyTypes/getAllowedChildren</code></pre>
|
||||
<p>But for now, they are set in the servervariables file. </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,159 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Belle Lab Tasks</h1>
|
||||
<h2>Applcation Structure</h2>
|
||||
<ul>
|
||||
<li>Work on dialogs, plenty to choose from</li>
|
||||
<li>A reuseable tree component for pickers</li>
|
||||
<li>migrate all the navigation stuff into a navigation service</li>
|
||||
<li>a scriptloading service to replace requireJs, with labJs, $script or similiar</li>
|
||||
<li>reusable modal component (show in left side, right side, generic closing events etc)</li>
|
||||
</ul>
|
||||
<h2>Components</h2>
|
||||
<ul>
|
||||
<li>tabs directive</li>
|
||||
<li>date picker</li>
|
||||
<li>tabs property editor</li>
|
||||
<li>localization strategy?<ul>
|
||||
<li>localize filter: {{This is my default english value,content.area.key | localize}}</li>
|
||||
<li>So, it will use the default value if there is none found for the key, and register this
|
||||
value in the localize service, keys should not contain commas</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Chores</h2>
|
||||
<ul>
|
||||
<li>Write a test</li>
|
||||
<li>Write docs</li>
|
||||
<li>Automate something<ul>
|
||||
<li>OSX:<ul>
|
||||
<li>start webserver</li>
|
||||
<li>start grunt watch</li>
|
||||
<li>improve test output?</li>
|
||||
<li>phantomJs?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>windows<ul>
|
||||
<li>start webserver</li>
|
||||
<li>start grunt</li>
|
||||
<li>install node stuff?</li>
|
||||
<li>register chrome_bin in path</li>
|
||||
<li>or register phantomJS?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Belle Lab Tasks</h1>
|
||||
<h2>Applcation Structure</h2>
|
||||
<ul>
|
||||
<li>Work on dialogs, plenty to choose from</li>
|
||||
<li>A reuseable tree component for pickers</li>
|
||||
<li>migrate all the navigation stuff into a navigation service</li>
|
||||
<li>a scriptloading service to replace requireJs, with labJs, $script or similiar</li>
|
||||
<li>reusable modal component (show in left side, right side, generic closing events etc)</li>
|
||||
</ul>
|
||||
<h2>Components</h2>
|
||||
<ul>
|
||||
<li>tabs directive</li>
|
||||
<li>date picker</li>
|
||||
<li>tabs property editor</li>
|
||||
<li>localization strategy?<ul>
|
||||
<li>localize filter: {{This is my default english value,content.area.key | localize}}</li>
|
||||
<li>So, it will use the default value if there is none found for the key, and register this
|
||||
value in the localize service, keys should not contain commas</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Chores</h2>
|
||||
<ul>
|
||||
<li>Write a test</li>
|
||||
<li>Write docs</li>
|
||||
<li>Automate something<ul>
|
||||
<li>OSX:<ul>
|
||||
<li>start webserver</li>
|
||||
<li>start grunt watch</li>
|
||||
<li>improve test output?</li>
|
||||
<li>phantomJs?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>windows<ul>
|
||||
<li>start webserver</li>
|
||||
<li>start grunt</li>
|
||||
<li>install node stuff?</li>
|
||||
<li>register chrome_bin in path</li>
|
||||
<li>or register phantomJS?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,198 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Codereview with Peter Bacon Darwin</h1>
|
||||
<h2>Office at cogworks:</h2>
|
||||
<p>71-75 Shelton Street
|
||||
London
|
||||
WC2H 9JQ</p>
|
||||
<p>Meeting room 11 - 17</p>
|
||||
<h2>Issues to go through:</h2>
|
||||
<h3>Structure, dependencies and external libraries</h3>
|
||||
<ul>
|
||||
<li>review of modules structure and suggestions on how to handle loading things when needed.</li>
|
||||
<li><p>replace requireJs for dependency loading, so we dont have to load tinyMCE, googlemaps, etc
|
||||
on app start $script, yepNope, labjs?</p>
|
||||
</li>
|
||||
<li><p>get the app to load .aspx pages in an iframe instead of a "normal" view</p>
|
||||
<ul>
|
||||
<li>write directive for loading templates to replace ng-include</li>
|
||||
<li>if .aspx, load in iframe, </li>
|
||||
<li>if not found try default, finally load error msg </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Javascript as resources from dlls? - add a scriptService to load these? - yes
|
||||
merge those resources into the umbraco.app.js file </li>
|
||||
</ul>
|
||||
<p><a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
|
||||
<h3>Refactoring</h3>
|
||||
<ul>
|
||||
<li><p>Convert tree into directive, recursive, lazy-load</p>
|
||||
<ul>
|
||||
<li>$watchCollection $watch on the entire tree model</li>
|
||||
<li>reuse the old tree plugin to inject into dom instead of into angular</li>
|
||||
<li>10 levels of digest limit</li>
|
||||
<li>fine for CG, bad for release</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p>best practices for directives, what should we convert?</p>
|
||||
</li>
|
||||
<li>other areas to convert?<ul>
|
||||
<li>for guidelines, look at angular/bootstrap-ui</li>
|
||||
<li>replace our components with ng-bootstrap or angular-strap</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Application logic</h3>
|
||||
<ul>
|
||||
<li>Authentication, force login, authenticate user against acccess to sections?</li>
|
||||
<li>whats the best way to handle urls, routes and state management,
|
||||
so the tree, sections etc, syncs with urls and the state of the application</li>
|
||||
<li>tinyMCE directive angular-ui </li>
|
||||
<li>How to handle file-uploads<ul>
|
||||
<li>through a service?</li>
|
||||
<li>ng-upload? or jquery-upload-plugin thingy?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>validation, ng-form $valid and directives should be enough<ul>
|
||||
<li>add remote directive: angular-app/admin/users/user-edit.js for directive code</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Dev experience</h3>
|
||||
<ul>
|
||||
<li><p>H Way to handle templates with missing controller? -> replace ng-include? <- yup
|
||||
angular-app/samples/directives/fielddirective for code</p>
|
||||
<ul>
|
||||
<li>H generel exception handling with feedback to log or notifications service</li>
|
||||
<li>L jslint code on the server?<br> <a href="http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx">http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx</a></li>
|
||||
<li>L automated setup of node, grunt, jasmine and karma, powershell and .sh? </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Testing</h3>
|
||||
<ul>
|
||||
<li>Best way to test against service data, simply mock data in memory, or better way?</li>
|
||||
<li>Testing dom manipulating components, like modals</li>
|
||||
<li>e2e testing</li>
|
||||
<li>teamcity intergration</li>
|
||||
<li>testing templates</li>
|
||||
</ul>
|
||||
<h1>Notes</h1>
|
||||
<ul>
|
||||
<li>Javascript as resources? - add a scriptService to load these? nope, they will compile into umbraco.app.js</li>
|
||||
<li>capture errors with javascript code, to not load it into the combined files
|
||||
(serverside jsLint) - mads blogpost for compiling js</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Codereview with Peter Bacon Darwin</h1>
|
||||
<h2>Office at cogworks:</h2>
|
||||
<p>71-75 Shelton Street
|
||||
London
|
||||
WC2H 9JQ</p>
|
||||
<p>Meeting room 11 - 17</p>
|
||||
<h2>Issues to go through:</h2>
|
||||
<h3>Structure, dependencies and external libraries</h3>
|
||||
<ul>
|
||||
<li>review of modules structure and suggestions on how to handle loading things when needed.</li>
|
||||
<li><p>replace requireJs for dependency loading, so we dont have to load tinyMCE, googlemaps, etc
|
||||
on app start $script, yepNope, labjs?</p>
|
||||
</li>
|
||||
<li><p>get the app to load .aspx pages in an iframe instead of a "normal" view</p>
|
||||
<ul>
|
||||
<li>write directive for loading templates to replace ng-include</li>
|
||||
<li>if .aspx, load in iframe, </li>
|
||||
<li>if not found try default, finally load error msg </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Javascript as resources from dlls? - add a scriptService to load these? - yes
|
||||
merge those resources into the umbraco.app.js file </li>
|
||||
</ul>
|
||||
<p><a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
|
||||
<h3>Refactoring</h3>
|
||||
<ul>
|
||||
<li><p>Convert tree into directive, recursive, lazy-load</p>
|
||||
<ul>
|
||||
<li>$watchCollection $watch on the entire tree model</li>
|
||||
<li>reuse the old tree plugin to inject into dom instead of into angular</li>
|
||||
<li>10 levels of digest limit</li>
|
||||
<li>fine for CG, bad for release</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p>best practices for directives, what should we convert?</p>
|
||||
</li>
|
||||
<li>other areas to convert?<ul>
|
||||
<li>for guidelines, look at angular/bootstrap-ui</li>
|
||||
<li>replace our components with ng-bootstrap or angular-strap</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Application logic</h3>
|
||||
<ul>
|
||||
<li>Authentication, force login, authenticate user against acccess to sections?</li>
|
||||
<li>whats the best way to handle urls, routes and state management,
|
||||
so the tree, sections etc, syncs with urls and the state of the application</li>
|
||||
<li>tinyMCE directive angular-ui </li>
|
||||
<li>How to handle file-uploads<ul>
|
||||
<li>through a service?</li>
|
||||
<li>ng-upload? or jquery-upload-plugin thingy?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>validation, ng-form $valid and directives should be enough<ul>
|
||||
<li>add remote directive: angular-app/admin/users/user-edit.js for directive code</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Dev experience</h3>
|
||||
<ul>
|
||||
<li><p>H Way to handle templates with missing controller? -> replace ng-include? <- yup
|
||||
angular-app/samples/directives/fielddirective for code</p>
|
||||
<ul>
|
||||
<li>H generel exception handling with feedback to log or notifications service</li>
|
||||
<li>L jslint code on the server?<br> <a href="http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx">http://madskristensen.net/post/Verify-JavaScript-syntax-using-C.aspx</a></li>
|
||||
<li>L automated setup of node, grunt, jasmine and karma, powershell and .sh? </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Testing</h3>
|
||||
<ul>
|
||||
<li>Best way to test against service data, simply mock data in memory, or better way?</li>
|
||||
<li>Testing dom manipulating components, like modals</li>
|
||||
<li>e2e testing</li>
|
||||
<li>teamcity intergration</li>
|
||||
<li>testing templates</li>
|
||||
</ul>
|
||||
<h1>Notes</h1>
|
||||
<ul>
|
||||
<li>Javascript as resources? - add a scriptService to load these? nope, they will compile into umbraco.app.js</li>
|
||||
<li>capture errors with javascript code, to not load it into the combined files
|
||||
(serverside jsLint) - mads blogpost for compiling js</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,178 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Naming conventions</h1>
|
||||
<h2>modules handle namespacing,</h2>
|
||||
<p>Naming: last one wins
|
||||
but to do this automaticly, we would need
|
||||
to auto-register all modules needed on app-start.
|
||||
This gives us a couple of complications for handling 3rd party applications.
|
||||
As it would be a pain to scan every file for modules to load on app start.</p>
|
||||
<p>Proposed structure:
|
||||
<a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
|
||||
<p>Register all modules in app.js
|
||||
Root module: Umbraco
|
||||
- contains the core services: notifications,dialogs,etc
|
||||
- contains the core resources: content,media etc
|
||||
- contains the core directives</p>
|
||||
<p>1 module pr file princible</p>
|
||||
<p>1st level modules:
|
||||
Umbraco (for misc system-level stuff, dialogs, notifications, etc)
|
||||
Umbraco.PropertyEditors (for all editors, as they are shared between all modules)
|
||||
- how would a 3rd party property editor access a 3rd party service in the Ucommerce module, when its loaded in the content editor? (which is inside the the content module?)
|
||||
Umbraco.Content (registers that it needs umbraco module, for access to core services )
|
||||
Umbraco.Media
|
||||
Umbraco.Settings
|
||||
Ucommerce
|
||||
TeaCommerce
|
||||
Etc</p>
|
||||
<p>Should all (core + 3rd party) services, filters and directives just be dependencies in the global umbraco module?</p>
|
||||
<p>Each section namespace knows what modules to initially have loaded:
|
||||
Umbraco.Content
|
||||
- EditController
|
||||
- SortController</p>
|
||||
<p>Inside the EditController module, it references the needed services:
|
||||
- DialogService
|
||||
- ContentFactory
|
||||
- Etc</p>
|
||||
<p>So things are only loaded when needed, due to the modules, and our application, really only needs to know about the root modules, Content,Media,Settings, Ucommerce etc.</p>
|
||||
<h2>Directives</h2>
|
||||
<p>If more directives have the same name, they will all be run</p>
|
||||
<h2>Controllers</h2>
|
||||
<p>Last one wins, so you can override core controllers
|
||||
Can be namedspaced, but shouldnt, the module is the namespace?
|
||||
Module: Umbraco.Section.Area.Page
|
||||
Name: PageNameController</p>
|
||||
<p>Filename: /umbraco/section/area/pagename.controller.js
|
||||
Ex: /umbraco/content/document/edit.controller.js
|
||||
Ex: /umbraco/settings/documenttype/edit.controller.js</p>
|
||||
<p>There is a need to have an extra level in the content tree urls due to all
|
||||
other sections have this as well, and we dont want to confuse the routing.</p>
|
||||
<p>The ctrl acronym is horrible and should not be used IMO.</p>
|
||||
<h2>Services</h2>
|
||||
<p>typeService ? - cant be namespaced
|
||||
Module: Umbraco.Services.Type
|
||||
Name: TypeService?</p>
|
||||
<p>Ex: Umbraco.Services.Notifications.NotificationsService
|
||||
Filename: /umbraco/common/services/notifcations.service.js</p>
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li>Content, media, etc, cant be namespaced:
|
||||
Module: Umbraco.Resources.Type
|
||||
Name: TypeFactory?</li>
|
||||
</ul>
|
||||
<p>Ex: Umbraco.Resources.Content.ContentFactory?
|
||||
filename: /umbraco/common/resources/content.resources.js ? or
|
||||
/umbraco/common/resoures/content.factory.js ?</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Naming conventions</h1>
|
||||
<h2>modules handle namespacing,</h2>
|
||||
<p>Naming: last one wins
|
||||
but to do this automaticly, we would need
|
||||
to auto-register all modules needed on app-start.
|
||||
This gives us a couple of complications for handling 3rd party applications.
|
||||
As it would be a pain to scan every file for modules to load on app start.</p>
|
||||
<p>Proposed structure:
|
||||
<a href="http://briantford.com/blog/huuuuuge-angular-apps.html">http://briantford.com/blog/huuuuuge-angular-apps.html</a></p>
|
||||
<p>Register all modules in app.js
|
||||
Root module: Umbraco
|
||||
- contains the core services: notifications,dialogs,etc
|
||||
- contains the core resources: content,media etc
|
||||
- contains the core directives</p>
|
||||
<p>1 module pr file princible</p>
|
||||
<p>1st level modules:
|
||||
Umbraco (for misc system-level stuff, dialogs, notifications, etc)
|
||||
Umbraco.PropertyEditors (for all editors, as they are shared between all modules)
|
||||
- how would a 3rd party property editor access a 3rd party service in the Ucommerce module, when its loaded in the content editor? (which is inside the the content module?)
|
||||
Umbraco.Content (registers that it needs umbraco module, for access to core services )
|
||||
Umbraco.Media
|
||||
Umbraco.Settings
|
||||
Ucommerce
|
||||
TeaCommerce
|
||||
Etc</p>
|
||||
<p>Should all (core + 3rd party) services, filters and directives just be dependencies in the global umbraco module?</p>
|
||||
<p>Each section namespace knows what modules to initially have loaded:
|
||||
Umbraco.Content
|
||||
- EditController
|
||||
- SortController</p>
|
||||
<p>Inside the EditController module, it references the needed services:
|
||||
- DialogService
|
||||
- ContentFactory
|
||||
- Etc</p>
|
||||
<p>So things are only loaded when needed, due to the modules, and our application, really only needs to know about the root modules, Content,Media,Settings, Ucommerce etc.</p>
|
||||
<h2>Directives</h2>
|
||||
<p>If more directives have the same name, they will all be run</p>
|
||||
<h2>Controllers</h2>
|
||||
<p>Last one wins, so you can override core controllers
|
||||
Can be namedspaced, but shouldnt, the module is the namespace?
|
||||
Module: Umbraco.Section.Area.Page
|
||||
Name: PageNameController</p>
|
||||
<p>Filename: /umbraco/section/area/pagename.controller.js
|
||||
Ex: /umbraco/content/document/edit.controller.js
|
||||
Ex: /umbraco/settings/documenttype/edit.controller.js</p>
|
||||
<p>There is a need to have an extra level in the content tree urls due to all
|
||||
other sections have this as well, and we dont want to confuse the routing.</p>
|
||||
<p>The ctrl acronym is horrible and should not be used IMO.</p>
|
||||
<h2>Services</h2>
|
||||
<p>typeService ? - cant be namespaced
|
||||
Module: Umbraco.Services.Type
|
||||
Name: TypeService?</p>
|
||||
<p>Ex: Umbraco.Services.Notifications.NotificationsService
|
||||
Filename: /umbraco/common/services/notifcations.service.js</p>
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li>Content, media, etc, cant be namespaced:
|
||||
Module: Umbraco.Resources.Type
|
||||
Name: TypeFactory?</li>
|
||||
</ul>
|
||||
<p>Ex: Umbraco.Resources.Content.ContentFactory?
|
||||
filename: /umbraco/common/resources/content.resources.js ? or
|
||||
/umbraco/common/resoures/content.factory.js ?</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,147 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Getting up and running with Belle</h1>
|
||||
<p><em>The super fast introduction to getting belle running on your local machine, both as a pre-built environment, and with the full setup with unit-tests, grunt-tasks and node.</em></p>
|
||||
<h2>Running the prebuilt site</h2>
|
||||
<h3>Windows</h3>
|
||||
<p>Right-click the <code>/build</code> folder and choose "open in webmatrix", run the website in webmatrix and browse to <code>localhost:9999/Belle/</code>, this should display the Belle login screen</p>
|
||||
<p><em>Port 9999 should be used because that is the target site that the grunt build command mentioned below will launch</em></p>
|
||||
<h3>OSX</h3>
|
||||
<p>Open a terminal inside the "/build" folder and run the command:</p>
|
||||
<pre><code>python -m SimpleHTTPServer 9999</code></pre>
|
||||
<p>This will start a local webserver, hosting the site on <code>localhost:9999</code> browse to localhost:9999/Belle/ which should display the belle login screen.</p>
|
||||
<h2>Uing the dev environment</h2>
|
||||
<p><em>The dev environment is tad more tricky to get running, since it depends on a number of unit tests and automated tools, to produce the contents of the /build folder</em></p>
|
||||
<p><em>The dev environment is cross platform, so will work on both osx and windows, and do not currently have any dependencies to .net</em></p>
|
||||
<h3>Install node.js</h3>
|
||||
<p>We need node to run tests and automated less compiling and other automated tasks. go to <a href="http://nodejs.org">http://nodejs.org</a>. Node.js is a powerfull javascript engine, which allows us to run all our tests and tasks written in javascript locally.</p>
|
||||
<p><em>note:</em> On windows you might need to restart explorer.exe to register node.</p>
|
||||
<h3>Install dependencies</h3>
|
||||
<p>Next we need to install all the required packages. This is done with the package tool, included with node.js, open /Umbraco.Belle.Client in cmd.exe or osx terminal and run the command:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<p>this will fetch all needed packages to your local machine.</p>
|
||||
<h3>Install grunt globally</h3>
|
||||
<p>Grunt is a task runner for node.js, and we use it for all automated tasks in the build process. For convenience we need to install it globally on your machine, so it can be used directly in cmd.exe or the terminal.</p>
|
||||
<p>So run the command:</p>
|
||||
<pre><code>npm install grunt-cli -g</code></pre>
|
||||
<p><em>note:</em> On windows you might need to restart explorer.exe to register the grunt cmd.</p>
|
||||
<p><em>note:</em> On OSX you might need to run:</p>
|
||||
<pre><code>sudo npm install grunt-cli -g</code></pre>
|
||||
<p>Now that you have node and grunt installed, you can open <code>/Umbraco.Belle.Client</code> in either <code>cmd.exe</code> or terminal and run: </p>
|
||||
<pre><code>grunt dev</code></pre>
|
||||
<p>This will build the site, merge less files, run tests and create the /Build folder, launch the web browser and monitor changes.</p>
|
||||
<h3>Automated builds and tests</h3>
|
||||
<p>grunt dev will continue to run in the background monitoring changes to files. When changes are detected it will rebuild the JS and also run the unit tests.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Getting up and running with Belle</h1>
|
||||
<p><em>The super fast introduction to getting belle running on your local machine, both as a pre-built environment, and with the full setup with unit-tests, grunt-tasks and node.</em></p>
|
||||
<h2>Running the prebuilt site</h2>
|
||||
<h3>Windows</h3>
|
||||
<p>Right-click the <code>/build</code> folder and choose "open in webmatrix", run the website in webmatrix and browse to <code>localhost:9999/Belle/</code>, this should display the Belle login screen</p>
|
||||
<p><em>Port 9999 should be used because that is the target site that the grunt build command mentioned below will launch</em></p>
|
||||
<h3>OSX</h3>
|
||||
<p>Open a terminal inside the "/build" folder and run the command:</p>
|
||||
<pre><code>python -m SimpleHTTPServer 9999</code></pre>
|
||||
<p>This will start a local webserver, hosting the site on <code>localhost:9999</code> browse to localhost:9999/Belle/ which should display the belle login screen.</p>
|
||||
<h2>Uing the dev environment</h2>
|
||||
<p><em>The dev environment is tad more tricky to get running, since it depends on a number of unit tests and automated tools, to produce the contents of the /build folder</em></p>
|
||||
<p><em>The dev environment is cross platform, so will work on both osx and windows, and do not currently have any dependencies to .net</em></p>
|
||||
<h3>Install node.js</h3>
|
||||
<p>We need node to run tests and automated less compiling and other automated tasks. go to <a href="http://nodejs.org">http://nodejs.org</a>. Node.js is a powerfull javascript engine, which allows us to run all our tests and tasks written in javascript locally.</p>
|
||||
<p><em>note:</em> On windows you might need to restart explorer.exe to register node.</p>
|
||||
<h3>Install dependencies</h3>
|
||||
<p>Next we need to install all the required packages. This is done with the package tool, included with node.js, open /Umbraco.Belle.Client in cmd.exe or osx terminal and run the command:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<p>this will fetch all needed packages to your local machine.</p>
|
||||
<h3>Install grunt globally</h3>
|
||||
<p>Grunt is a task runner for node.js, and we use it for all automated tasks in the build process. For convenience we need to install it globally on your machine, so it can be used directly in cmd.exe or the terminal.</p>
|
||||
<p>So run the command:</p>
|
||||
<pre><code>npm install grunt-cli -g</code></pre>
|
||||
<p><em>note:</em> On windows you might need to restart explorer.exe to register the grunt cmd.</p>
|
||||
<p><em>note:</em> On OSX you might need to run:</p>
|
||||
<pre><code>sudo npm install grunt-cli -g</code></pre>
|
||||
<p>Now that you have node and grunt installed, you can open <code>/Umbraco.Belle.Client</code> in either <code>cmd.exe</code> or terminal and run: </p>
|
||||
<pre><code>grunt dev</code></pre>
|
||||
<p>This will build the site, merge less files, run tests and create the /Build folder, launch the web browser and monitor changes.</p>
|
||||
<h3>Automated builds and tests</h3>
|
||||
<p>grunt dev will continue to run in the background monitoring changes to files. When changes are detected it will rebuild the JS and also run the unit tests.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,176 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Things to do</h1>
|
||||
<h2>Structure</h2>
|
||||
<ul>
|
||||
<li>One module pr file idea, instead of registering everything on app.js</li>
|
||||
<li><p>Have core services, resources and other common items under umbraco</p>
|
||||
</li>
|
||||
<li><p>third party modules outside of the root umbraco module, but registered in app.js</p>
|
||||
</li>
|
||||
<li><p>to access 3rd party service:
|
||||
ecomEditor.controller.js
|
||||
angular.module("umbraco.myeditor", ["ecommerce.services"]).controller("ecom.editor", </p>
|
||||
<pre><code> function("inventoryFactory"){
|
||||
do things...
|
||||
});</code></pre>
|
||||
</li>
|
||||
<li><p>best way to setup services and controllers are:
|
||||
.controller("name",[
|
||||
"service",
|
||||
"dependency",
|
||||
function(s, d){</p>
|
||||
<p> }
|
||||
]);</p>
|
||||
</li>
|
||||
<li><p>move logic from controllers to services, especcially around navigation</p>
|
||||
<ul>
|
||||
<li>easier for testing</li>
|
||||
<li>only keep view interactions, everything into a service</li>
|
||||
<li>looser testing on controllers</li>
|
||||
<li>for testing the dialogs, look in angular source or angular bootstrap projects</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Routing</h2>
|
||||
<p>Change /section/page/id to /section/area/page/id to support all section scenarios
|
||||
Have a fallback to defaults?</p>
|
||||
<h2>Legacy</h2>
|
||||
<ul>
|
||||
<li>for UmbClientTools we can access the services in angular from
|
||||
angular.element("body").injector().get("notifications");</li>
|
||||
<li>rootscope available in same location</li>
|
||||
<li>the bootstrap method returns the injector</li>
|
||||
</ul>
|
||||
<h2>ScriptLoaderService</h2>
|
||||
<pre><code>- Service to load required scripts for a controller using $script
|
||||
- remove requirejs dependency as it makes things muddy</code></pre>
|
||||
<h2>Authentication</h2>
|
||||
<p>Angular-app: common/security/interceptor.js , intercept http requests</p>
|
||||
<h2>Promises</h2>
|
||||
<pre><code>Use promises pattern for all our services
|
||||
$http.get(url)
|
||||
.then(function(response){
|
||||
return response.data;
|
||||
}, function(response){
|
||||
return $q.reject("http failed");
|
||||
}).then(function(data){
|
||||
alert("our data:" + data);
|
||||
})</code></pre>
|
||||
<h2>Think about rest services and authentication</h2>
|
||||
<p>Usecase: member picker editor, which fetches member-data</p>
|
||||
<h2>Avoid $resource and instead use $http</h2>
|
||||
<p>Sublime linter</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Things to do</h1>
|
||||
<h2>Structure</h2>
|
||||
<ul>
|
||||
<li>One module pr file idea, instead of registering everything on app.js</li>
|
||||
<li><p>Have core services, resources and other common items under umbraco</p>
|
||||
</li>
|
||||
<li><p>third party modules outside of the root umbraco module, but registered in app.js</p>
|
||||
</li>
|
||||
<li><p>to access 3rd party service:
|
||||
ecomEditor.controller.js
|
||||
angular.module("umbraco.myeditor", ["ecommerce.services"]).controller("ecom.editor", </p>
|
||||
<pre><code> function("inventoryFactory"){
|
||||
do things...
|
||||
});</code></pre>
|
||||
</li>
|
||||
<li><p>best way to setup services and controllers are:
|
||||
.controller("name",[
|
||||
"service",
|
||||
"dependency",
|
||||
function(s, d){</p>
|
||||
<p> }
|
||||
]);</p>
|
||||
</li>
|
||||
<li><p>move logic from controllers to services, especcially around navigation</p>
|
||||
<ul>
|
||||
<li>easier for testing</li>
|
||||
<li>only keep view interactions, everything into a service</li>
|
||||
<li>looser testing on controllers</li>
|
||||
<li>for testing the dialogs, look in angular source or angular bootstrap projects</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Routing</h2>
|
||||
<p>Change /section/page/id to /section/area/page/id to support all section scenarios
|
||||
Have a fallback to defaults?</p>
|
||||
<h2>Legacy</h2>
|
||||
<ul>
|
||||
<li>for UmbClientTools we can access the services in angular from
|
||||
angular.element("body").injector().get("notifications");</li>
|
||||
<li>rootscope available in same location</li>
|
||||
<li>the bootstrap method returns the injector</li>
|
||||
</ul>
|
||||
<h2>ScriptLoaderService</h2>
|
||||
<pre><code>- Service to load required scripts for a controller using $script
|
||||
- remove requirejs dependency as it makes things muddy</code></pre>
|
||||
<h2>Authentication</h2>
|
||||
<p>Angular-app: common/security/interceptor.js , intercept http requests</p>
|
||||
<h2>Promises</h2>
|
||||
<pre><code>Use promises pattern for all our services
|
||||
$http.get(url)
|
||||
.then(function(response){
|
||||
return response.data;
|
||||
}, function(response){
|
||||
return $q.reject("http failed");
|
||||
}).then(function(data){
|
||||
alert("our data:" + data);
|
||||
})</code></pre>
|
||||
<h2>Think about rest services and authentication</h2>
|
||||
<p>Usecase: member picker editor, which fetches member-data</p>
|
||||
<h2>Avoid $resource and instead use $http</h2>
|
||||
<p>Sublime linter</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,193 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Using AngularJS Promises and Umbraco Resources</h1>
|
||||
<h2>Promises in Umbraco Resources</h2>
|
||||
<p>All Umbraco resource methods utilize a helper method:</p>
|
||||
<pre><code>umbRequestHelper.resourcePromise</code></pre>
|
||||
<p>This method accepts 2 arguments:</p>
|
||||
<ul>
|
||||
<li>The angular HttpPromise which is created with a call to $http.get (post, etc..)</li>
|
||||
<li>The error message that is bubbled to the UI when the http call fails</li>
|
||||
</ul>
|
||||
<p>Here's an example of the usage in an Umbraco resource. This example is the method of the treeResource that fetches data to display the menu for a tree node:</p>
|
||||
<pre><code>/** Loads in the data to display the nodes menu */
|
||||
loadMenu: function (node) {
|
||||
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(getTreeMenuUrl(node)),
|
||||
"Failed to retreive data for a node's menu " + node.id);
|
||||
}</code></pre>
|
||||
<p>HTTP error handling is performed automatically inside of the <code>umbRequestHelper.resourcePromise</code> and inside of Umbraco's response interceptors.</p>
|
||||
<h2>Consuming Umbraco resources</h2>
|
||||
<p>When consuming Umbraco resources, a normal angular promise will be returned based on the above <code>umbRequestHelper.resourcePromise</code>. The success callback will always receive the RAW json data from the server and the error callback will always receive an object containing these properties:</p>
|
||||
<ul>
|
||||
<li>erroMsg = the error message that can be used to show in the UI</li>
|
||||
<li>data = the original data object used to create the promise</li>
|
||||
</ul>
|
||||
<p>Error handling will be done automatically in the Umbraco resource. Http error handling should not be done during the consumption of an Umbraco resource.</p>
|
||||
<h3>Simple example</h3>
|
||||
<p>An simple example of consuming an Umbraco resource:</p>
|
||||
<pre><code>treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
scope.menu = data;
|
||||
});</code></pre>
|
||||
<h3>Transforming result data</h3>
|
||||
<p>Sometimes the consumption of an Umbraco resource needs to return a promise itself. This is required in some circumstances such as:</p>
|
||||
<p>The data from a result of an http resource might need to be transformed into something usable in the UI so a Service may need to call a resource, transform the result and continue to return it's own promise (since everything happens async).</p>
|
||||
<p>This is actually very simple to do, the Service (or whatever is consuming the resource) just returns the result of their 'then' call. Example - this example is the <code>getActions</code> method of the <code>treeService</code> that consumes the treeResource, transforms the result and continues to return it's own promise:</p>
|
||||
<pre><code>getActions: function(treeItem, section) {
|
||||
|
||||
return treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
//need to convert the icons to new ones
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
data[i].cssclass = iconHelper.convertFromLegacyIcon(data[i].cssclass);
|
||||
}
|
||||
return data;
|
||||
});
|
||||
} </code></pre>
|
||||
<p>Notice that this is just returning the call to 'then' which will return a promise that resolves the data from it's return statement.</p>
|
||||
<h3>Error hanlding</h3>
|
||||
<p>Ok, what about error handling ? This is really simple as well, we just add an additional method to the .then call. A simple example:</p>
|
||||
<pre><code>treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
scope.menu = data;
|
||||
}, function(err) {
|
||||
//display the error
|
||||
notificationsService.error(err.errorMsg);
|
||||
});</code></pre>
|
||||
<h3>Error handling when transforming result data</h3>
|
||||
<p>This is one of those things that is important to note! If you need to return a custom promise based on the result of an Umbraco resource (like the example above in Transforming result data) then you will need to 'throw' an error if you want to 'bubble' the error to the handler of your custom promise.</p>
|
||||
<p>The good news is, this is very simple to do, example:</p>
|
||||
<pre><code>getActions: function(treeItem, section) {
|
||||
|
||||
return treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
//need to convert the icons to new ones
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
data[i].cssclass = iconHelper.convertFromLegacyIcon(data[i].cssclass);
|
||||
}
|
||||
return data;
|
||||
}, function(err) {
|
||||
//display the error
|
||||
notificationsService.error(err.errorMsg);
|
||||
|
||||
//since we want the handler of this promise to be notified of this error
|
||||
// we just need to rethrow it:
|
||||
throw err;
|
||||
});
|
||||
}</code></pre>
|
||||
<p>The next thing that is important to note is that <strong>you don't have to do anything</strong> if you don't want to do anything with the error but still want the error bubbled up to your promises handlers. So for example, if you are expecting the handler of this promise to handle the error and display something in the UI, just leave out the function(err) callback which would look exactly the same as the example for 'Transforming result data'</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>doc</title>
|
||||
<style>
|
||||
/*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8ff
|
||||
}
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .nginx .title,
|
||||
pre .subst,
|
||||
pre .request,
|
||||
pre .status {
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .number,
|
||||
pre .hexcolor,
|
||||
pre .ruby .constant {
|
||||
color: #099;
|
||||
}
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .clojure .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
pre .class .title,
|
||||
pre .haskell .type,
|
||||
pre .vhdl .literal,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .prompt {
|
||||
color: #990073
|
||||
}
|
||||
pre .built_in,
|
||||
pre .lisp .title,
|
||||
pre .clojure .built_in {
|
||||
color: #0086b3
|
||||
}
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Using AngularJS Promises and Umbraco Resources</h1>
|
||||
<h2>Promises in Umbraco Resources</h2>
|
||||
<p>All Umbraco resource methods utilize a helper method:</p>
|
||||
<pre><code>umbRequestHelper.resourcePromise</code></pre>
|
||||
<p>This method accepts 2 arguments:</p>
|
||||
<ul>
|
||||
<li>The angular HttpPromise which is created with a call to $http.get (post, etc..)</li>
|
||||
<li>The error message that is bubbled to the UI when the http call fails</li>
|
||||
</ul>
|
||||
<p>Here's an example of the usage in an Umbraco resource. This example is the method of the treeResource that fetches data to display the menu for a tree node:</p>
|
||||
<pre><code>/** Loads in the data to display the nodes menu */
|
||||
loadMenu: function (node) {
|
||||
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(getTreeMenuUrl(node)),
|
||||
"Failed to retreive data for a node's menu " + node.id);
|
||||
}</code></pre>
|
||||
<p>HTTP error handling is performed automatically inside of the <code>umbRequestHelper.resourcePromise</code> and inside of Umbraco's response interceptors.</p>
|
||||
<h2>Consuming Umbraco resources</h2>
|
||||
<p>When consuming Umbraco resources, a normal angular promise will be returned based on the above <code>umbRequestHelper.resourcePromise</code>. The success callback will always receive the RAW json data from the server and the error callback will always receive an object containing these properties:</p>
|
||||
<ul>
|
||||
<li>erroMsg = the error message that can be used to show in the UI</li>
|
||||
<li>data = the original data object used to create the promise</li>
|
||||
</ul>
|
||||
<p>Error handling will be done automatically in the Umbraco resource. Http error handling should not be done during the consumption of an Umbraco resource.</p>
|
||||
<h3>Simple example</h3>
|
||||
<p>An simple example of consuming an Umbraco resource:</p>
|
||||
<pre><code>treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
scope.menu = data;
|
||||
});</code></pre>
|
||||
<h3>Transforming result data</h3>
|
||||
<p>Sometimes the consumption of an Umbraco resource needs to return a promise itself. This is required in some circumstances such as:</p>
|
||||
<p>The data from a result of an http resource might need to be transformed into something usable in the UI so a Service may need to call a resource, transform the result and continue to return it's own promise (since everything happens async).</p>
|
||||
<p>This is actually very simple to do, the Service (or whatever is consuming the resource) just returns the result of their 'then' call. Example - this example is the <code>getActions</code> method of the <code>treeService</code> that consumes the treeResource, transforms the result and continues to return it's own promise:</p>
|
||||
<pre><code>getActions: function(treeItem, section) {
|
||||
|
||||
return treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
//need to convert the icons to new ones
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
data[i].cssclass = iconHelper.convertFromLegacyIcon(data[i].cssclass);
|
||||
}
|
||||
return data;
|
||||
});
|
||||
} </code></pre>
|
||||
<p>Notice that this is just returning the call to 'then' which will return a promise that resolves the data from it's return statement.</p>
|
||||
<h3>Error hanlding</h3>
|
||||
<p>Ok, what about error handling ? This is really simple as well, we just add an additional method to the .then call. A simple example:</p>
|
||||
<pre><code>treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
scope.menu = data;
|
||||
}, function(err) {
|
||||
//display the error
|
||||
notificationsService.error(err.errorMsg);
|
||||
});</code></pre>
|
||||
<h3>Error handling when transforming result data</h3>
|
||||
<p>This is one of those things that is important to note! If you need to return a custom promise based on the result of an Umbraco resource (like the example above in Transforming result data) then you will need to 'throw' an error if you want to 'bubble' the error to the handler of your custom promise.</p>
|
||||
<p>The good news is, this is very simple to do, example:</p>
|
||||
<pre><code>getActions: function(treeItem, section) {
|
||||
|
||||
return treeResource.loadMenu(treeItem.node)
|
||||
.then(function(data) {
|
||||
//need to convert the icons to new ones
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
data[i].cssclass = iconHelper.convertFromLegacyIcon(data[i].cssclass);
|
||||
}
|
||||
return data;
|
||||
}, function(err) {
|
||||
//display the error
|
||||
notificationsService.error(err.errorMsg);
|
||||
|
||||
//since we want the handler of this promise to be notified of this error
|
||||
// we just need to rethrow it:
|
||||
throw err;
|
||||
});
|
||||
}</code></pre>
|
||||
<p>The next thing that is important to note is that <strong>you don't have to do anything</strong> if you don't want to do anything with the error but still want the error bubbled up to your promises handlers. So for example, if you are expecting the handler of this promise to handle the error and display something in the UI, just leave out the function(err) callback which would look exactly the same as the example for 'Transforming result data'</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user