Merge pull request #2 from artch/support-1.2.0

Support of angular 1.2.0rc1

README.md

@@ -111,6 +111,15 @@ Section 1 contents.
 
 ...etc. You can reach any nesting level here. Every view will be handled independently, keeping the state of top-level views.
 
+Difference from UI-Router
+-------------------------
+
+While it seems that this library has very similar goal to what [UI-Router](https://github.com/angular-ui/ui-router/) provides, there are some important differences between their implementations, though.
+
+*UI-Router* implements its own URL routing mechanics with its own "state" concept on top of it. *angular-route-segment* doesn't try to replace something in AngularJS. It is based on built-in `$route` engine, so that it tries to extend it rather than to replace. `$routeSegmentProvider.when` method is just a shorthand to `$routeProvider.when` with the simplified syntax. Inner segment-handling logic is built on top of events propagated by `$route` service, with internal usage of some route params from it.
+
+Such approach makes it possible to accomplish the desirable nested routing task in more simpler manner, which produces less code, less complexity and potential bugs, provides better cohesion with Angular core engine and is easier to understand, use and debug.
+
 Documentation
 -------------
 

build/angular-route-segment.js

@@ -1,5 +1,5 @@
 /**
- * angular-route-segment v1.0.1
+ * angular-route-segment v1.0.2
  * https://angular-route-segment.com
  * @author Artem Chivchalov
  * @license MIT License http://opensource.org/licenses/MIT
@@ -8,7 +8,7 @@
 
 (function(angular) {
 
-angular.module( 'route-segment', [] ).provider( '$routeSegment', 
+angular.module( 'route-segment', [] ).provider( '$routeSegment',
         ['$routeProvider', function($routeProvider) {
 
     var $routeSegmentProvider = this;
@@ -382,82 +382,91 @@ angular.module( 'view-segment', [ 'route-segment' ] ).directive( 'appViewSegment
 
     return {
         restrict : 'ECA',
-        compile : function(tElement) {
+        priority: 500,
+        compile : function(tElement, tAttrs) {
 
-            var oldContent = tElement.clone();
+            var defaultContent = tElement.html(), isDefault = true,
+                anchor = angular.element(document.createComment(' view-segment '));
+
+            tElement.prepend(anchor);
 
-            return function($scope, element, attrs) {
+            return function($scope) {
 
-                var lastScope, onloadExp = attrs.onload || '', animate,
-                    viewSegmentIndex = parseInt(attrs.appViewSegment);
+                var currentScope, currentElement, onloadExp = tAttrs.onload || '', animate,
+                    viewSegmentIndex = parseInt(tAttrs.appViewSegment);
 
                 try {
-                    // Trying to inject $animator which may be absent in 1.0.x branch
+                    // angular 1.1.x
                     var $animator = $injector.get('$animator')
-                    animate = $animator($scope, attrs);
+                    animate = $animator($scope, tAttrs);
+                }
+                catch(e) {}
+                try {
+                    // angular 1.2.x
+                    animate = $injector.get('$animate');
                 }
-                catch(e) {                
-                }                
+                catch(e) {}
 
-                update($routeSegment.chain[viewSegmentIndex]);
-
                 // Watching for the specified route segment and updating contents
                 $scope.$on('routeSegmentChange', function(event, args) {
                     if(args.index == viewSegmentIndex)
                         update(args.segment);
                 });
-
-                function destroyLastScope() {
-                    if (lastScope) {
-                        lastScope.$destroy();
-                        lastScope = null;
-                    }
-                }
-
+
                 function clearContent() {
 
-                    if(animate)
-                        animate.leave(element.contents(), element);
-                    else
-                        element.html('');
-                    destroyLastScope();
+                    if(currentElement) {
+                        animate.leave(currentElement);
+                        currentElement = null;
+                    }
+
+                    if (currentScope) {
+                        currentScope.$destroy();
+                        currentScope = null;
+                    }
                 }
+
 
-               function update(segment) {
+                function update(segment) {
 
                    if(!segment) {
-                       element.html(oldContent.html());
-                       destroyLastScope();
-                       $compile(element.contents())($scope);
+                       clearContent();
+                       currentElement = tElement.clone();
+                       currentElement.html(defaultContent);
+                       animate.enter( currentElement, null, anchor );
+                       $compile(currentElement, false, 499)($scope);
                        return;
                    }
+
+                    if(isDefault) {
+                        isDefault = false;
+                        tElement.replaceWith(anchor);
+                    }
 
                     var locals = angular.extend({}, segment.locals),
                         template = locals && locals.$template;
 
                     if (template) {
 
-                            clearContent();
-
-                            if(animate)
-                                animate.enter( angular.element('<div></div>').html(template).contents(), element );
-                            else
-                                element.html(template);
-
-                            destroyLastScope();
-
-                            var link = $compile(element.contents()), controller; 
-
-                            lastScope = $scope.$new();
-                            if (segment.params.controller) {
-                                locals.$scope = lastScope;
-                                controller = $controller(segment.params.controller, locals);
-                                element.children().data('$ngControllerController', controller);
-                            }
-
-                            link(lastScope);
-                            lastScope.$emit('$viewContentLoaded');
-                            lastScope.$eval(onloadExp);
+                        clearContent();
+
+                        currentElement = tElement.clone();
+                        currentElement.html(template);
+                        animate.enter( currentElement, null, anchor );
+
+                        var link = $compile(currentElement, false, 499), controller;
+
+                        currentScope = $scope.$new();
+                        if (segment.params.controller) {
+                            locals.$scope = currentScope;
+                            controller = $controller(segment.params.controller, locals);
+                            currentElement.data('$ngControllerController', controller);
+                            currentElement.children().data('$ngControllerController', controller);
+                        }
+
+                        link(currentScope);
+                        currentScope.$emit('$viewContentLoaded');
+                        currentScope.$eval(onloadExp);
                     } else {
                         clearContent();
                     }

example/app.js

@@ -1,4 +1,4 @@
-var app = angular.module('app', ['route-segment', 'view-segment']);
+var app = angular.module('app', ['ngRoute', 'ngAnimate', 'route-segment', 'view-segment']);
 
 app.config(function($routeSegmentProvider, $routeProvider) {
 

example/css/app.css

@@ -17,14 +17,17 @@
 	line-height: 12px;
 }
 
-.anim-opacity-enter-setup {
+.anim.ng-enter {
 	transition: opacity 1s;
 	opacity: 0.0;
 }
 
-.anim-opacity-enter-start {
+.anim.ng-enter-active {
 	opacity: 1.0;
 }
+.anim.ng-leave {
+    display: none;
+}
 
 #loading {
     position: absolute;

example/index.html

@@ -25,15 +25,17 @@
         </div>
 
         <div class="container" id="content">
-            <div class="row" app-view-segment="0" ng-animate="{enter: 'anim-opacity-enter'}"></div>
+            <div class="row anim" app-view-segment="0"></div>
         </div>
 
         <div id=loading class=alert ng-show="loader.show">Loading...</div>
 
     </div>
 
-
-    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
+
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.js"></script>
     <script src="../build/angular-route-segment.min.js"></script>
     <script src="app.js"></script>
 

example/templates/section1.html

@@ -52,5 +52,5 @@
 
     </div>
 
-    <div class="span9" app-view-segment="1" ng-animate="{enter: 'anim-opacity-enter'}"></div>
+    <div class="span9 anim" app-view-segment="1"></div>
 </div>

example/templates/section1/item.html

@@ -22,4 +22,4 @@ <h2>Item {{item.id}}</h2>
     </li>
 </ul>
 
-<div app-view-segment="2" ng-animate="{enter: 'anim-opacity-enter'}">No tab selected.</div>
+<div app-view-segment="2" class="anim">No tab selected.</div>

example/templates/section2.html

@@ -15,7 +15,7 @@ <h2>Section 2</h2>
             </li>        
         </ul>
 
-        <div app-view-segment="1" ng-animate="{enter: 'anim-opacity-enter'}">No item selected.</div>
+        <div app-view-segment="1" class="anim">No item selected.</div>
     </div>
 
     Type something:<br>

karma.conf.js → karma-angular-1.1.5.conf.js

@@ -7,11 +7,11 @@ module.exports = function(config) {
 
         files: [
             'test/lib/jquery.min.js',
-            'test/lib/angular.js',
-            'test/lib/angular-mocks.js',
-            'test/lib/**/*.js',
+            'test/lib/helpers.js',
+            'test/lib/angular-1.1.5/angular.js',
+            'test/lib/angular-1.1.5/angular-*.js',
             'src/**/*.js',
-            'test/unit/**/*.js',
+            'test/unit/**/*.js'
         ],
 
         autoWatch: true,

karma-angular-1.2.0rc1.conf.js

@@ -0,0 +1,23 @@
+module.exports = function(config) {
+    config.set({
+
+        basePath: './',
+
+        frameworks: ["jasmine"],
+
+        files: [
+            'test/lib/jquery.min.js',
+            'test/lib/helpers.js',
+            'test/lib/angular-1.2.0rc1/angular.js',
+            'test/lib/angular-1.2.0rc1/angular-*.js',
+            'test/lib/angular-1.2.0rc1/init.js',
+            'src/**/*.js',
+            'test/unit/**/*.js'
+        ],
+
+        autoWatch: true,
+
+        browsers: ['PhantomJS']
+
+    });
+};

src/route-segment.js

@@ -2,7 +2,7 @@
 
 (function(angular) {
 
-angular.module( 'route-segment', [] ).provider( '$routeSegment', 
+angular.module( 'route-segment', [] ).provider( '$routeSegment',
         ['$routeProvider', function($routeProvider) {
 
     var $routeSegmentProvider = this;