Author: corneadoug
Date: Thu Sep 22 08:15:13 2016
New Revision: 1761865

URL: http://svn.apache.org/viewvc?rev=1761865&view=rev
Log:
Add zeppelinweb good practice 3

Added:
    zeppelin/site/contribution/zeppelinweb/goodPracticeGuide03.html
Modified:
    zeppelin/site/contribution/contributions.html
    zeppelin/site/contribution/documentation.html
    zeppelin/site/contribution/webapplication.html
    zeppelin/site/contribution/zeppelinweb/goodPracticeGuide01.html
    zeppelin/site/contribution/zeppelinweb/goodPracticeGuide02.html

Modified: zeppelin/site/contribution/contributions.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/contributions.html?rev=1761865&r1=1761864&r2=1761865&view=diff
==============================================================================
--- zeppelin/site/contribution/contributions.html (original)
+++ zeppelin/site/contribution/contributions.html Thu Sep 22 08:15:13 2016
@@ -118,12 +118,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -284,12 +284,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     

Modified: zeppelin/site/contribution/documentation.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/documentation.html?rev=1761865&r1=1761864&r2=1761865&view=diff
==============================================================================
--- zeppelin/site/contribution/documentation.html (original)
+++ zeppelin/site/contribution/documentation.html Thu Sep 22 08:15:13 2016
@@ -118,12 +118,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -284,12 +284,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     

Modified: zeppelin/site/contribution/webapplication.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/webapplication.html?rev=1761865&r1=1761864&r2=1761865&view=diff
==============================================================================
--- zeppelin/site/contribution/webapplication.html (original)
+++ zeppelin/site/contribution/webapplication.html Thu Sep 22 08:15:13 2016
@@ -118,12 +118,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -284,12 +284,16 @@
   
     
       
+        
+          
+            <li><a href="/contribution/zeppelinweb/goodPracticeGuide03.html">3 
- Making A Controller</a></li>
+          
+        
+      
     
   
     
       
-        
-      
     
   
     

Modified: zeppelin/site/contribution/zeppelinweb/goodPracticeGuide01.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/zeppelinweb/goodPracticeGuide01.html?rev=1761865&r1=1761864&r2=1761865&view=diff
==============================================================================
--- zeppelin/site/contribution/zeppelinweb/goodPracticeGuide01.html (original)
+++ zeppelin/site/contribution/zeppelinweb/goodPracticeGuide01.html Thu Sep 22 
08:15:13 2016
@@ -118,12 +118,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -284,12 +284,16 @@
   
     
       
+        
+          
+            <li><a href="/contribution/zeppelinweb/goodPracticeGuide03.html">3 
- Making A Controller</a></li>
+          
+        
+      
     
   
     
       
-        
-      
     
   
     

Modified: zeppelin/site/contribution/zeppelinweb/goodPracticeGuide02.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/zeppelinweb/goodPracticeGuide02.html?rev=1761865&r1=1761864&r2=1761865&view=diff
==============================================================================
--- zeppelin/site/contribution/zeppelinweb/goodPracticeGuide02.html (original)
+++ zeppelin/site/contribution/zeppelinweb/goodPracticeGuide02.html Thu Sep 22 
08:15:13 2016
@@ -118,12 +118,12 @@
   
     
       
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -284,12 +284,16 @@
   
     
       
+        
+          
+            <li><a href="/contribution/zeppelinweb/goodPracticeGuide03.html">3 
- Making A Controller</a></li>
+          
+        
+      
     
   
     
       
-        
-      
     
   
     
@@ -402,6 +406,7 @@ $rootScope.$on(&#39;eventToCatch&#39;, f
 <ul>
 <li>Usage of event dispatching should be limited if possible</li>
 <li>We only use <code>$rootScope.$broadcast</code> and <code>$scope.$on</code> 
for event dispatching/catching</li>
+<li>We are grouping all the <code>$scope.$on</code> functions at the end of 
the compponent using it (controller or service)</li>
 </ul>
 
 <h4>Performances</h4>

Added: zeppelin/site/contribution/zeppelinweb/goodPracticeGuide03.html
URL: 
http://svn.apache.org/viewvc/zeppelin/site/contribution/zeppelinweb/goodPracticeGuide03.html?rev=1761865&view=auto
==============================================================================
--- zeppelin/site/contribution/zeppelinweb/goodPracticeGuide03.html (added)
+++ zeppelin/site/contribution/zeppelinweb/goodPracticeGuide03.html Thu Sep 22 
08:15:13 2016
@@ -0,0 +1,517 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>3 - Making A Controller</title>
+    <meta name="description" content="">
+    <meta name="author" content="The Apache Software Foundation">
+
+    <!-- Enable responsive viewport -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script 
src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
+    <![endif]-->
+
+    <!-- Le styles -->
+    <link href="/assets/themes/zeppelin/bootstrap/css/bootstrap.css" 
rel="stylesheet">
+    <link href="/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" 
type="text/css">
+    <link href="/assets/themes/zeppelin/css/syntax.css" rel="stylesheet"  
type="text/css" media="screen" /> 
+    <!-- Le fav and touch icons -->
+    <!-- Update these with your own images
+    <link rel="shortcut icon" href="images/favicon.ico">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="72x72" 
href="images/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" 
href="images/apple-touch-icon-114x114.png">
+    -->
+
+    <!-- Js -->
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script>
+    <script 
src="/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/assets/themes/zeppelin/js/docs.js"></script>
+    <script src="/assets/themes/zeppelin/js/anchor.min.js"></script>
+      
+
+    <!-- atom & rss feed -->
+    <link href="/atom.xml" type="application/atom+xml" rel="alternate" 
title="Sitewide ATOM Feed">
+    <link href="/rss.xml" type="application/rss+xml" rel="alternate" 
title="Sitewide RSS Feed">
+  </head>
+
+  <body>
+    
+        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">
+            <img src="/assets/themes/zeppelin/img/zeppelin_logo.png" 
width="50" alt="I'm zeppelin">
+            Apache Zeppelin
+          </a>
+        </div>
+        <nav class="navbar-collapse collapse" role="navigation">
+          <ul class="nav navbar-nav navbar-right">
+            
+            
+            
+
+
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+        
+          
+            <li><a href="/community.html">Community</a></li>
+          
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+          
+            <li><a href="/download.html">Download</a></li>
+          
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+        
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+
+
+
+
+
+            <!-- Docs -->
+            <li id="docs">
+              <a href="#" data-toggle="dropdown" 
class="dropdown-toggle">Docs<b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><span><b>Release</b><span></li>
+                <li><a href="/docs/0.6.1">0.6.1</a></li>
+                <li><a href="/docs/0.6.0">0.6.0</a></li>
+                <li><a href="/docs/0.5.6-incubating">0.5.6-incubating</a></li>
+                <li><a href="/docs/0.5.5-incubating">0.5.5-incubating</a></li>
+                <li><a href="/docs/0.5.0-incubating">0.5.0-incubating</a></li>
+                <li role="separator" class="divider"></li>
+                <li><span><b>Snapshot</b>&nbsp;(development)<span></li>
+                <li><a href="/docs/0.7.0-SNAPSHOT">0.7.0-SNAPSHOT</a></li>
+              </ul>
+            </li>
+
+            <li><a 
href="https://github.com/apache/incubator-zeppelin";>GitHub</a></li>
+
+            <!-- Apache -->
+            <li id="apache">
+              <a href="#" data-toggle="dropdown" 
class="dropdown-toggle">Apache<b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                <li><a 
href="http://www.apache.org/foundation/how-it-works.html";>Apache Software 
Foundation</a></li>
+                <li><a href="http://www.apache.org/licenses/";>Apache 
License</a></li>
+                <li><a 
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li>
+                <li><a href="/assets.html">Assets</a></li>
+                <li><a 
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li>
+              </ul>
+            </li>
+          </ul>
+        </nav><!--/.navbar-collapse -->
+      </div>
+    </div>
+
+
+
+
+    <div class="content">
+      
+
+<div class="row">
+  
+    <div class="sideMenu col-sm-3">
+      
+      
+      
+
+
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+          
+            <li><a href="/contribution/zeppelinweb/goodPracticeGuide01.html">1 
- Defining Components</a></li>
+          
+        
+      
+    
+  
+    
+      
+        
+          
+            <li><a href="/contribution/zeppelinweb/goodPracticeGuide02.html">2 
- Event Dispatching</a></li>
+          
+        
+      
+    
+  
+    
+      
+        
+          
+            <li class="active"><a 
href="/contribution/zeppelinweb/goodPracticeGuide03.html" class="active">3 - 
Making A Controller</a></li>
+          
+        
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+    
+  
+    
+      
+        
+      
+        
+          
+            <li><a href="/contribution/webapplication.html">Web 
Application</a></li>
+          
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+    
+      
+        
+      
+    
+  
+
+
+
+
+    </div>
+    <div class="col-sm-9">
+      <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>How to Write a Controller</h1>
+
+<p><br/>
+Our main rule regarding writing a controller, is to use the <code>Controller 
as vm</code> style, however, we also have a few other style guidelines.</p>
+
+<p>You can see below a full example of what the controller would look like.</p>
+<figure class="highlight"><pre><code class="language-text" 
data-lang="text">(function() {
+  &#39;use strict&#39;;
+
+  angular.module(&#39;zeppelinWebApp&#39;)
+    .controller(&#39;myNewController&#39;, myNewController);
+
+    myNewController.$inject = [&#39;$http&#39;];
+
+    function myNewController($http) {
+
+      var vm = this;
+
+      vm.publicVariable = {};
+
+      // Controller&#39;s public functions
+      vm.myControllerPublicFunction = myControllerPublicFunction;
+
+      _init();
+
+      /*************************************
+      ** Public functions Implementation **
+      *************************************/
+
+      function myControllerPublicFunction() {
+
+        ...
+
+      }
+
+      function myOtherPublicFunction() {
+
+        _utilFunction();
+        ...
+
+      }
+
+      /*************************************
+      ** Private functions Implementation **
+      *************************************/
+
+      function _init() {
+
+        vm.myControllerPublicFunction();
+        ...
+
+      }
+
+      function _utilFunction() {
+
+        ...
+
+      }
+
+      /***************************************
+      ** $scope.$on catchers Implementation **
+      ***************************************/
+
+      $scope.$on(&#39;eventName&#39;, function(event) {
+
+        ...
+
+      })
+    }
+})();
+</code></pre></figure>
+<p>This might look like a lot of lines, but it is mainly to show all the rules 
at once.</p>
+
+<h4>Using the controller in a view</h4>
+
+<p>Now let&#39;s see how we can use it inside our <code>.html</code> view in 
normal situations.</p>
+<figure class="highlight"><pre><code class="language-text" 
data-lang="text">&lt;div ng-controller=&quot;myNewController as 
newCtrl&quot;&gt;
+  &lt;div 
ng-click=&quot;newCtrl.myControllerPublicFunction&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre></figure>
+<h4>Using the controller in a page</h4>
+
+<p>In the case where your controller will be used on a view directly linked to 
a route</p>
+
+<p>For example: <code>localhost:8080/myPageName</code></p>
+
+<p>The definition of the controller will take place in the 
<code>$routeProvider</code> section of the <code>app.js</code> file.</p>
+<figure class="highlight"><pre><code class="language-text" 
data-lang="text">.when(&#39;/myPageName&#39;, {
+  templateUrl: &#39;app/myPageName/myPageName.html&#39;,
+  controller: &#39;myNewController&#39;,
+  controllerAs: &#39;newCtrl&#39;
+})
+</code></pre></figure>
+<p>Which will leave the <code>.html</code> view without any 
<code>ng-controller</code> property.</p>
+<figure class="highlight"><pre><code class="language-text" 
data-lang="text">&lt;div&gt;
+  &lt;div 
ng-click=&quot;newCtrl.myControllerPublicFunction&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre></figure>
+<h4>The rules in detail</h4>
+
+<ul>
+<li>Except <code>$scope.$on</code> and a few special cases, we do not use the 
<code>$scope</code> of that controller</li>
+<li>Only the functions and variables needed in the view should be linked to 
the <code>vm</code></li>
+<li>The view is using the controller&#39;s variables and functions through the 
&#39;as&#39; keyword you set</li>
+<li>Private functions&#39; name start with a <code>_</code></li>
+<li>Functions and variables are grouped by type in that order:
+private variables, public variables, init function call, public functions, 
private functions, $scope.$on functions</li>
+<li>There is a nice comment separating all those groups</li>
+<li>Services are added to the controller using the <code>$inject</code> at the 
top of the component</li>
+<li>Inside the controller, you call the public functions using 
<code>vm.nameOfTheFunction()</code></li>
+</ul>
+
+    </div>
+  
+</div>
+
+
+      <hr>
+      <footer>
+        <!-- <p>&copy; 2016 The Apache Software Foundation</p>-->
+      </footer>
+    </div>
+
+    
+
+
+
+
+  <script type="text/javascript">
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new 
Date();a=s.createElement(o),
+  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+  ga('require', 'linkid', 'linkid.js');
+  ga('send', 'pageview');
+
+</script>
+
+
+
+  </body>
+</html>
+


Reply via email to