You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by co...@apache.org on 2016/09/22 08:15:14 UTC
svn commit: r1761865 - in /zeppelin/site/contribution: contributions.html
documentation.html webapplication.html zeppelinweb/goodPracticeGuide01.html
zeppelinweb/goodPracticeGuide02.html zeppelinweb/goodPracticeGuide03.html
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('eventToCatch', 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> (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() {
+ 'use strict';
+
+ angular.module('zeppelinWebApp')
+ .controller('myNewController', myNewController);
+
+ myNewController.$inject = ['$http'];
+
+ function myNewController($http) {
+
+ var vm = this;
+
+ vm.publicVariable = {};
+
+ // Controller'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('eventName', 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'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"><div ng-controller="myNewController as newCtrl">
+ <div ng-click="newCtrl.myControllerPublicFunction"></div>
+</div>
+</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('/myPageName', {
+ templateUrl: 'app/myPageName/myPageName.html',
+ controller: 'myNewController',
+ controllerAs: 'newCtrl'
+})
+</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"><div>
+ <div ng-click="newCtrl.myControllerPublicFunction"></div>
+</div>
+</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's variables and functions through the 'as' keyword you set</li>
+<li>Private functions' 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>© 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>
+