From 8e2675029f5ca404a7c649cc161df3ea642d941f Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Sat, 28 Apr 2012 22:45:28 -0700 Subject: chore(docs): re-skin main documentation --- src/bootstrap/bootstrap-prettify.js | 22 ++--- src/bootstrap/bootstrap.js | 4 +- src/ng/cacheFactory.js | 10 +++ src/ng/directive/ngClass.js | 76 ++++++++++------ src/ng/directive/ngController.js | 2 +- src/ng/directive/ngInclude.js | 76 ++++++++-------- src/ng/directive/ngStyle.js | 17 ++-- src/ng/directive/ngView.js | 99 ++++++++++----------- src/ng/directive/select.js | 2 +- src/ng/http.js | 135 +++++++++++++++-------------- src/ng/route.js | 153 +++++++++++++++++---------------- src/ngSanitize/directive/ngBindHtml.js | 3 +- 12 files changed, 325 insertions(+), 274 deletions(-) (limited to 'src') diff --git a/src/bootstrap/bootstrap-prettify.js b/src/bootstrap/bootstrap-prettify.js index 4d29199f..93bed809 100644 --- a/src/bootstrap/bootstrap-prettify.js +++ b/src/bootstrap/bootstrap-prettify.js @@ -21,7 +21,7 @@ function escape(text) { -directive.jsFiddle = function(getEmbededTemplate, escape, script) { +directive.jsFiddle = function(getEmbeddedTemplate, escape, script) { return { terminal: true, link: function(scope, element, attr) { @@ -40,15 +40,15 @@ directive.jsFiddle = function(getEmbededTemplate, escape, script) { if (index == 0) { fields[fileType] += '
\n' + - getEmbededTemplate(file, 2); + getEmbeddedTemplate(file, 2); } else { fields[fileType] += '\n\n\n \n' + ' \n'; } } else { - fields[fileType] += getEmbededTemplate(file) + '\n'; + fields[fileType] += getEmbeddedTemplate(file) + '\n'; } }); @@ -92,12 +92,12 @@ directive.prettyprint = ['reindentCode', function(reindentCode) { }]; -directive.ngSetText = ['getEmbededTemplate', function(getEmbededTemplate) { +directive.ngSetText = ['getEmbeddedTemplate', function(getEmbeddedTemplate) { return { restrict: 'CA', priority: 10, compile: function(element, attr) { - element.text(getEmbededTemplate(attr.ngSetText)); + element.text(getEmbeddedTemplate(attr.ngSetText)); } } }] @@ -134,21 +134,21 @@ directive.ngHtmlWrap = ['reindentCode', 'templateMerge', function(reindentCode, }]; -directive.ngSetHtml = ['getEmbededTemplate', function(getEmbededTemplate) { +directive.ngSetHtml = ['getEmbeddedTemplate', function(getEmbeddedTemplate) { return { restrict: 'CA', priority: 10, compile: function(element, attr) { - element.html(getEmbededTemplate(attr.ngSetHtml)); + element.html(getEmbeddedTemplate(attr.ngSetHtml)); } } }]; -directive.ngEvalJavascript = ['getEmbededTemplate', function(getEmbededTemplate) { +directive.ngEvalJavascript = ['getEmbeddedTemplate', function(getEmbeddedTemplate) { return { compile: function (element, attr) { - var script = getEmbededTemplate(attr.ngEvalJavascript); + var script = getEmbeddedTemplate(attr.ngEvalJavascript); try { if (window.execScript) { // IE @@ -254,7 +254,7 @@ service.templateMerge = ['reindentCode', function(indentCode) { }; }]; -service.getEmbededTemplate = ['reindentCode', function(reindentCode) { +service.getEmbeddedTemplate = ['reindentCode', function(reindentCode) { return function (id) { return reindentCode(angular.element(document.getElementById(id)).html(), 0); } diff --git a/src/bootstrap/bootstrap.js b/src/bootstrap/bootstrap.js index 831998fc..8a398ad3 100644 --- a/src/bootstrap/bootstrap.js +++ b/src/bootstrap/bootstrap.js @@ -19,7 +19,7 @@ directive.dropdownToggle = element.bind('click', function(event) { event.preventDefault(); - event.stopImmediatePropagation(); + event.stopPropagation(); var iWasOpen = false; @@ -34,7 +34,7 @@ directive.dropdownToggle = close = function (event) { event && event.preventDefault(); - event && event.stopImmediatePropagation(); + event && event.stopPropagation(); $document.unbind('click', close); element.parent().removeClass('open'); close = null; diff --git a/src/ng/cacheFactory.js b/src/ng/cacheFactory.js index 82c939cc..c91ffce7 100644 --- a/src/ng/cacheFactory.js +++ b/src/ng/cacheFactory.js @@ -151,6 +151,16 @@ function $CacheFactoryProvider() { }; } +/** + * @ngdoc object + * @name angular.module.ng.$templateCache + * + * @description + * Cache used for storing html templates. + * + * See {@link angular.module.ng.$cacheFactory $cacheFactory}. + * + */ function $TemplateCacheProvider() { this.$get = ['$cacheFactory', function($cacheFactory) { return $cacheFactory('templates'); diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 1e9a260b..7e0d5dba 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -36,30 +36,35 @@ function classDirective(name, selector) { * names, an array, or a map of class names to boolean values. * * @example - - - + + +
- Sample Text      - - + Sample Text + + + .my-class { + color: red; + } + + it('should check ng-class', function() { expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); + toMatch(/my-class/); using('.doc-example-live').element(':button:first').click(); expect(element('.doc-example-live span').prop('className')). - toMatch(/ng-invalid/); + toMatch(/my-class/); using('.doc-example-live').element(':button:last').click(); expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); + toMatch(/my-class/); }); - - + + */ var ngClassDirective = classDirective('', true); @@ -80,26 +85,33 @@ var ngClassDirective = classDirective('', true); * of the evaluation can be a string representing space delimited class names or an array. * * @example - - + +
  1. - - {{name}}       + + {{name}}
- - + + + .odd { + color: red; + } + .even { + color: blue; + } + + it('should check ng-class-odd and ng-class-even', function() { expect(element('.doc-example-live li:first span').prop('className')). - toMatch(/ng-format-negative/); + toMatch(/odd/); expect(element('.doc-example-live li:last span').prop('className')). - toMatch(/ng-invalid/); + toMatch(/even/); }); - - + + */ var ngClassOddDirective = classDirective('Odd', 0); @@ -120,8 +132,8 @@ var ngClassOddDirective = classDirective('Odd', 0); * result of the evaluation can be a string representing space delimited class names or an array. * * @example - - + +
  1. @@ -129,15 +141,23 @@ var ngClassOddDirective = classDirective('Odd', 0);
- - + + + .odd { + color: red; + } + .even { + color: blue; + } + + it('should check ng-class-odd and ng-class-even', function() { expect(element('.doc-example-live li:first span').prop('className')). toMatch(/odd/); expect(element('.doc-example-live li:last span').prop('className')). toMatch(/even/); }); - - + + */ var ngClassEvenDirective = classDirective('Even', 1); diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js index 55da78cd..72bd3c00 100644 --- a/src/ng/directive/ngController.js +++ b/src/ng/directive/ngController.js @@ -33,7 +33,7 @@ * for a manual update. - -
- - url of the template: {{template.url}} -
-
-
- - - it('should load template1.html', function() { - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template1.html\n'); - }); - it('should load template2.html', function() { - select('template').option('1'); - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template2.html\n'); - }); - it('should change to blank', function() { - select('template').option(''); - expect(element('.doc-example-live [ng-include]').text()).toEqual(''); - }); - - + + +
+ + url of the template: {{template.url}} +
+
+
+ + + function Ctrl($scope) { + $scope.templates = + [ { name: 'template1.html', url: 'template1.html'} + , { name: 'template2.html', url: 'template2.html'} ]; + $scope.template = $scope.templates[0]; + } + + + Content of template1.html + + + Content of template2.html + + + it('should load template1.html', function() { + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template1.html/); + }); + it('should load template2.html', function() { + select('template').option('1'); + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template2.html/); + }); + it('should change to blank', function() { + select('template').option(''); + expect(element('.doc-example-live [ng-include]').text()).toEqual(''); + }); + + */ diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index c24c1b6d..30a266cd 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -13,15 +13,20 @@ * keys. * * @example - - + +
Sample Text 
myStyle={{myStyle}}
- - + + + span { + color: black; + } + + it('should check ng-style', function() { expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); element('.doc-example-live :button[value=set]').click(); @@ -29,8 +34,8 @@ element('.doc-example-live :button[value=clear]').click(); expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); }); - - + + */ var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watch(attr.ngStyle, function(newStyles, oldStyles) { diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js index 16ae792e..7c737765 100644 --- a/src/ng/directive/ngView.js +++ b/src/ng/directive/ngView.js @@ -14,51 +14,8 @@ * * @scope * @example - - - - - - - - + +
Choose: Moby | @@ -76,8 +33,52 @@ 
$route.current.scope.name = {{$route.current.scope.name}}
$routeParams = {{$routeParams}}
- - + + + + controller: {{name}}
+ Book Id: {{params.bookId}}
+ + + + controller: {{name}}
+ Book Id: {{params.bookId}}
+ Chapter Id: {{params.chapterId}} + + + + angular.module('ngView', [], function($routeProvider, $locationProvider) { + $routeProvider.when('/Book/:bookId', { + template: 'book.html', + controller: BookCntl + }); + $routeProvider.when('/Book/:bookId/ch/:chapterId', { + template: 'chapter.html', + controller: ChapterCntl + }); + + // configure html5 to get links working on jsfiddle + $locationProvider.html5Mode(true); + }); + + function MainCntl($scope, $route, $routeParams, $location) { + $scope.$route = $route; + $scope.$location = $location; + $scope.$routeParams = $routeParams; + } + + function BookCntl($scope, $routeParams) { + $scope.name = "BookCntl"; + $scope.params = $routeParams; + } + + function ChapterCntl($scope, $routeParams) { + $scope.name = "ChapterCntl"; + $scope.params = $routeParams; + } + + + it('should load and compile correct template', function() { element('a:contains("Moby: Ch1")').click(); var content = element('.doc-example-live [ng-view]').text(); @@ -90,8 +91,8 @@ expect(content).toMatch(/controller\: BookCntl/); expect(content).toMatch(/Book Id\: Scarlet/); }); - - + + */ diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js index dda59375..b269973f 100644 --- a/src/ng/directive/select.js +++ b/src/ng/directive/select.js @@ -75,7 +75,7 @@