refactor(1.x): rename "routerViewPort" to "ngViewport" and "routerLin…

…k" to "ngLink" Closes angular#112
adam77 · Feb 26, 2015 · 33a950a · 33a950a
1 parent 255bc22
commit 33a950a
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ Below is a short summary of these goals:
 
 * Have sensible conventions and defaults
 * Be customizable at almost every point
-* Support sibling "view ports" (like `ng-view`s in Angular 1.x's ngRoute)
+* Support sibling "viewports" (like `ng-view`s in Angular 1.x's ngRoute)
 * Support nested routers
   * Allow components to encapsulate entire parts of an application
 * Expose a "navigation model" which can be used to generate a navigation UI (like menus)

diff --git a/docs/content/configuration.md b/docs/content/configuration.md
@@ -25,8 +25,8 @@ $router.config([
 ```
 
 ```html
-<div router-view-port="master"></div>
-<div router-view-port="detail"></div>
+<div ng-viewport="master"></div>
+<div ng-viewport="detail"></div>
 ```
 
 ## redirectTo

diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md
@@ -48,7 +48,7 @@ Let's start with the contents of `index.html`:
   <title>My app</title>
 </head>
 <body ng-app="myApp" ng-controller="AppController as app">
-  <div router-view-port></div>
+  <div ng-viewport></div>
 
   <script src="/node_modules/angular/angular.js"></script>
   <script src="/dist/router.es5.js"></script>
@@ -57,8 +57,8 @@ Let's start with the contents of `index.html`:
 </html>
 ```
 
-This is a pretty typical angular app, except the `router-view-port` directive.
-`router-view-port` is like `ng-view`; it's a placeholder for part of your app loaded
+This is a pretty typical angular app, except the `ng-viewport` directive.
+`ng-viewport` is like `ng-view`; it's a placeholder for part of your app loaded
 dynamically based on the route configuration.
 
 So how do we configure the app? Let's open `app.js` and find out. Add this to the file:
@@ -91,9 +91,9 @@ In Angular 1, we need this component system to hook up child routers.
 </aside>
 -->
 
-A component's template can have "view ports," which are holes in the DOM for loading parts of your app based on the route configuration and its controller can have a router.
-A component's router tells the component what to put inside the view ports based on URL.
-The configuration maps routes to components for each view port.
+A component's template can have "viewports," which are holes in the DOM for loading parts of your app based on the route configuration and its controller can have a router.
+A component's router tells the component what to put inside the viewports based on URL.
+The configuration maps routes to components for each viewport.
 
 Let's make a `home` component that our app can route to.
 
@@ -157,12 +157,12 @@ function AppController ($router) {
 }
 ```
 
-We can link to our `detail` component using the `router-link` directive.
+We can link to our `detail` component using the `ng-link` directive.
 Add this to `index.html`:
 
 ```html
 <body ng-app="myApp" ng-controller="AppController as app">
-  <a router-link="detail({id: 5})">link to detal</a>
+  <a ng-link="detail({id: 5})">link to detal</a>
   ...
 ```
 

diff --git a/examples/angular-1/animation/index.html b/examples/angular-1/animation/index.html
@@ -10,8 +10,8 @@
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
-        <li><a router-link="welcome">welcome</a></li>
-        <li><a router-link="goodbye">goodbye</a></li>
+        <li><a ng-link="welcome">welcome</a></li>
+        <li><a ng-link="goodbye">goodbye</a></li>
       </ul>
 
       <ul class="nav navbar-nav navbar-right">
@@ -23,7 +23,7 @@
   </nav>
 
   <div class="page-host">
-    <router-view-port></router-view-port>
+    <ng-viewport></ng-viewport>
   </div>
 
 

diff --git a/examples/angular-1/hello/components/settings/settings.html b/examples/angular-1/hello/components/settings/settings.html
@@ -3,13 +3,13 @@ <h2>{{settings.heading}}</h2>
   <div>
     <div class="col-md-2">
       <ul class="well nav nav-pills nav-stacked">
-        <li><a router-link="flickr">flickr</a></li>
-        <li><a router-link="settings">settings</a></li>
-        <li><a router-link="welcome">welcome</a></li>
+        <li><a ng-link="flickr">flickr</a></li>
+        <li><a ng-link="settings">settings</a></li>
+        <li><a ng-link="welcome">welcome</a></li>
       </ul>
     </div>
     <div class="col-md-10" style="padding: 0">
-      <router-view-port></router-view-port>
+      <ng-viewport></ng-viewport>
     </div>
   </div>
 </section>
diff --git a/examples/angular-1/hello/index.html b/examples/angular-1/hello/index.html
@@ -16,9 +16,9 @@
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
-        <li><a router-link="flickr">flickr</a></li>
-        <li><a router-link="settings">settings</a></li>
-        <li><a router-link="welcome">welcome</a></li>
+        <li><a ng-link="flickr">flickr</a></li>
+        <li><a ng-link="settings">settings</a></li>
+        <li><a ng-link="welcome">welcome</a></li>
       </ul>
 
       <ul class="nav navbar-nav navbar-right">
@@ -30,8 +30,7 @@
   </nav>
 
   <div class="page-host">
-    <router-view-port view-port-name="left"></router-view-port>
-    <router-view-port view-port-name="right"></router-view-port>
+    <ng-viewport></ng-viewport>
   </div>
 
   <script src="/node_modules/angular/angular.js"></script>

diff --git a/examples/angular-1/phone-kitten/components/phone-list/phone-list.html b/examples/angular-1/phone-kitten/components/phone-list/phone-list.html
@@ -17,8 +17,8 @@
       <ul class="phones">
         <li ng-repeat="phone in phoneList.phones | filter:phoneList.query | orderBy:phoneList.orderProp"
             class="thumbnail phone-listing">
-          <a router-link="phoneDetail({phoneId: phone.id})" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
-          <a router-link="phoneDetail({phoneId: phone.id})">{{phone.name}}</a>
+          <a ng-link="phoneDetail({phoneId: phone.id})" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+          <a ng-link="phoneDetail({phoneId: phone.id})">{{phone.name}}</a>
           <p>{{phone.snippet}}</p>
         </li>
       </ul>

diff --git a/examples/angular-1/phone-kitten/index.html b/examples/angular-1/phone-kitten/index.html
@@ -24,7 +24,7 @@
 </head>
 <body ng-app="phoneKitten" ng-controller="AppController as app">
   <div class="view-container">
-    <div router-view-port class="view-frame"></div>
+    <div ng-viewport class="view-frame"></div>
   </div>
 </body>
 </html>
diff --git a/examples/angular-1/wizard/components/intro/intro.html b/examples/angular-1/wizard/components/intro/intro.html
@@ -7,7 +7,7 @@ <h2>STOP!</h2>
   Ere the other side he see.
   </p>
 
-  <a class="btn btn-success" router-link="one">
+  <a class="btn btn-success" ng-link="one">
     Ask me your questions, Bridgekeeper. I am not afraid.
   </a>
 </section>
diff --git a/examples/angular-1/wizard/components/one/one.html b/examples/angular-1/wizard/components/one/one.html
@@ -3,7 +3,7 @@ <h2>{{one.question}}</h2>
   <input type="text" ng-model="one.answers.name" class="form-control">
 
   <ul class="pager">
-    <li><a router-link="one">Previous</a></li>
-    <li><a router-link="two">Next</a></li>
+    <li><a ng-link="one">Previous</a></li>
+    <li><a ng-link="two">Next</a></li>
   </ul>
 </section>
diff --git a/examples/angular-1/wizard/components/three/three.html b/examples/angular-1/wizard/components/three/three.html
@@ -2,7 +2,7 @@
   <h2>{{three.question}}</h2>
   <input type="text" ng-model="three.answers.favoriteColor" class="form-control">
   <ul class="pager">
-    <li><a router-link="two">Previous</a></li>
-    <li><a router-link="end">Next</a></li>
+    <li><a ng-link="two">Previous</a></li>
+    <li><a ng-link="end">Next</a></li>
   </ul>
 </section>
diff --git a/examples/angular-1/wizard/components/two/two.html b/examples/angular-1/wizard/components/two/two.html
@@ -2,7 +2,7 @@
   <h2>{{two.question}}</h2>
   <input type="text" ng-model="two.answers.quest" class="form-control">
   <ul class="pager">
-    <li><a router-link="one">Previous</a></li>
-    <li><a router-link="three">Next</a></li>
+    <li><a ng-link="one">Previous</a></li>
+    <li><a ng-link="three">Next</a></li>
   </ul>
 </section>
diff --git a/examples/angular-1/wizard/index.html b/examples/angular-1/wizard/index.html
@@ -14,7 +14,7 @@
 <body ng-app="myApp" ng-controller="AppController">
 
   <h1>hello</h1>
-  <router-view-port></router-view-port>
+  <ng-viewport></ng-viewport>
 
   <script src="/node_modules/angular/angular.js"></script>
   <script src="/dist/router.es5.js"></script>

diff --git a/src/router-directive.es5.js b/src/router-directive.es5.js
@@ -6,27 +6,27 @@
 angular.module('ngNewRouter', ['ngNewRouter.generated']).
   value('$routeParams', {}).
   provider('$componentLoader', $componentLoaderProvider).
-  directive('routerViewPort', routerViewPortDirective).
-  directive('routerViewPort', routerViewPortFillContentDirective).
-  directive('routerLink', routerLinkDirective);
+  directive('ngViewport', ngViewportDirective).
+  directive('ngViewport', ngViewportFillContentDirective).
+  directive('ngLink', ngLinkDirective);
 
 
 
 /**
- * @name routerViewPort
+ * @name ngViewport
  *
  * @description
- * A routerViewPort is where resolved content goes.
+ * An ngViewport is where resolved content goes.
  *
  * ## Use
  *
  * ```html
- * <div router-view-port="name"></div>
+ * <div router-viewport="name"></div>
  * ```
  *
- * The value for the `routerViewPort` attribute is optional.
+ * The value for the `ngViewport` attribute is optional.
  */
-function routerViewPortDirective($animate, $compile, $controller, $templateRequest, $rootScope, $location, $componentLoader, $router) {
+function ngViewportDirective($animate, $compile, $controller, $templateRequest, $rootScope, $location, $componentLoader, $router) {
   var rootRouter = $router;
 
   $rootScope.$watch(function () {
@@ -49,14 +49,14 @@ function routerViewPortDirective($animate, $compile, $controller, $templateReque
     transclude: 'element',
     terminal: true,
     priority: 400,
-    require: ['?^^routerViewPort', 'routerViewPort'],
-    link: viewPortLink,
+    require: ['?^^ngViewport', 'ngViewport'],
+    link: viewportLink,
     controller: function() {},
-    controllerAs: '$$routerViewPort'
+    controllerAs: '$$ngViewport'
   };
 
-  function viewPortLink(scope, $element, attrs, ctrls, $transclude) {
-    var viewPortName = attrs.routerViewPort || 'default',
+  function viewportLink(scope, $element, attrs, ctrls, $transclude) {
+    var viewportName = attrs.ngViewport || 'default',
         ctrl = ctrls[0],
         myCtrl = ctrls[1],
         router = (ctrl && ctrl.$$router) || rootRouter;
@@ -88,10 +88,10 @@ function routerViewPortDirective($animate, $compile, $controller, $templateReque
 
     function getComponentFromInstruction(instruction) {
       var component = instruction[0].handler.component;
-      var componentName = typeof component === 'string' ? component : component[viewPortName];
+      var componentName = typeof component === 'string' ? component : component[viewportName];
       return $componentLoader(componentName);
     }
-    router.registerViewPort({
+    router.registerViewport({
       canDeactivate: function (instruction) {
         return !ctrl || !ctrl.canDeactivate || ctrl.canDeactivate();
       },
@@ -102,14 +102,14 @@ function routerViewPortDirective($animate, $compile, $controller, $templateReque
       instantiate: function (instruction) {
         var controllerName = getComponentFromInstruction(instruction).controllerName;
         var component = instruction[0].handler.component;
-        var componentName = typeof component === 'string' ? component : component[viewPortName];
+        var componentName = typeof component === 'string' ? component : component[viewportName];
 
         // build up locals for controller
         newScope = scope.$new();
 
         var locals = {
           $scope: newScope,
-          $router: scope.$$routerViewPort.$$router = router.childRouter()
+          $router: scope.$$ngViewport.$$router = router.childRouter()
         };
 
         if (router.context) {
@@ -129,7 +129,7 @@ function routerViewPortDirective($animate, $compile, $controller, $templateReque
       },
       activate: function (instruction) {
         var component = instruction[0].handler.component;
-        var componentName = typeof component === 'string' ? component : component[viewPortName];
+        var componentName = typeof component === 'string' ? component : component[viewportName];
 
         var clone = $transclude(newScope, function(clone) {
           $animate.enter(clone, null, currentElement || $element);
@@ -145,15 +145,15 @@ function routerViewPortDirective($animate, $compile, $controller, $templateReque
         }
         previousInstruction = JSON.stringify(instruction);
       }
-    }, viewPortName);
+    }, viewportName);
   }
 }
 
-function routerViewPortFillContentDirective($compile) {
+function ngViewportFillContentDirective($compile) {
   return {
     restrict: 'EA',
     priority: -400,
-    require: 'routerViewPort',
+    require: 'ngViewport',
     link: function(scope, $element, attrs, ctrl) {
       var template = ctrl.$$template;
       $element.html(template);
@@ -173,7 +173,7 @@ function makeComponentString(name) {
 
 var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/;
 /**
- * @name routerLink
+ * @name ngLink
  * @description
  * Lets you link to different parts of the app, and automatically generates hrefs.
  *
@@ -196,31 +196,31 @@ var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/;
  * </div>
  * ```
  */
-function routerLinkDirective($router, $location, $parse) {
+function ngLinkDirective($router, $location, $parse) {
   var rootRouter = $router;
 
   angular.element(document.body).on('click', function (ev) {
     var target = ev.target;
-    if (target.attributes['router-link']) {
+    if (target.attributes['ng-link']) {
       ev.preventDefault();
       var url = target.attributes.href.value;
       rootRouter.navigate(url);
     }
   });
 
   return {
-    require: '?^^routerViewPort',
+    require: '?^^ngViewport',
     restrict: 'A',
-    link: routerLinkDirectiveLinkFn
+    link: ngLinkDirectiveLinkFn
   };
 
-  function routerLinkDirectiveLinkFn(scope, elt, attrs, ctrl) {
+  function ngLinkDirectiveLinkFn(scope, elt, attrs, ctrl) {
     var router = (ctrl && ctrl.$$router) || rootRouter;
     if (!router) {
       return;
     }
 
-    var link = attrs.routerLink || '';
+    var link = attrs.ngLink || '';
     var parts = link.match(LINK_MICROSYNTAX_RE);
     var routeName = parts[1];
     var routeParams = parts[2];

diff --git a/src/router.ats b/src/router.ats
@@ -38,7 +38,7 @@ export class Router {
    * Register an object to notify of route changes.
    * You probably don't need to use this unless you're writing a reusable component.
    */
-  registerViewPort(view, name = 'default') {
+  registerViewport(view, name = 'default') {
     this.ports[name] = view;
     return this.renavigate();
   }