diff options
Diffstat (limited to 'docs/content')
29 files changed, 244 insertions, 265 deletions
diff --git a/docs/content/api/index.ngdoc b/docs/content/api/index.ngdoc index 9f1bb398..88e354f5 100644 --- a/docs/content/api/index.ngdoc +++ b/docs/content/api/index.ngdoc @@ -2,62 +2,6 @@ @name API Reference @description -## Angular Compiler API - -* {@link angular.module.ng.$compileProvider.directive Directives} - Angular DOM element attributes -* {@link angular.module.ng.$filter Filters} - Angular output filters -* {@link angular.module.ng.$compile $compile} - Template compiler - -## Angular Scope API - -* {@link angular.module.ng.$rootScope.Scope Scope Object} - Angular scope object - - -## Angular Services & Dependency Injection API - -* {@link angular.module.ng Angular Services} -* {@link angular.injector angular.injector() } - - -## Angular Testing API - -* {@link angular.module.ngMock Testing Mocks API} - Mock objects for testing -* {@link guide/dev_guide.e2e-testing Angular Scenario Runner} - Automated scenario testing -documentation - - -## Angular Utility Functions - -### HTML & DOM Manipulation - -* {@link angular.element angular.element()} - -### Misc - -* {@link angular.bind angular.bind() } -* {@link angular.extend angular.extend() } -* {@link angular.forEach angular.forEach() } -* {@link angular.identity angular.identity() } -* {@link angular.noop angular.noop() } - - -## Type Identification - -* {@link angular.isArray angular.isArray() } -* {@link angular.isDate angular.isDate() } -* {@link angular.isDefined angular.isDefined() } -* {@link angular.isFunction angular.isFunction() } -* {@link angular.isNumber angular.isNumber() } -* {@link angular.isObject angular.isObject() } -* {@link angular.isString angular.isString() } -* {@link angular.isUndefined angular.isUndefined() } - -## Strings - -* {@link angular.lowercase angular.lowercase() } -* {@link angular.uppercase angular.uppercase() } - -### JSON - -* {@link angular.fromJson angular.fromJson() } -* {@link angular.toJson angular.toJson() } +Use the API Refference documentation when you need more information about a specific feature. Check out +{@link guide/ Developer Guide} for AngularJS concepts. If you are new to AngularJS we recomend the +{@link tutorial/ Tutorial}. diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc index f242f82e..491e3b79 100644 --- a/docs/content/cookbook/deeplinking.ngdoc +++ b/docs/content/cookbook/deeplinking.ngdoc @@ -30,72 +30,111 @@ In this example we have a simple app which consist of two screens: * Welcome: url `welcome` Show the user contact information. * Settings: url `settings` Show an edit screen for user contact information. - -The two partials are defined in the following URLs: - -* <a href="examples/settings.html" target="_self">./examples/settings.html</a> -* <a href="examples/welcome.html" target="_self">./examples/welcome.html</a> - -<doc:example module="deepLinking"> - <doc:source jsfiddle="false"> - <script> - angular.module('deepLinking', ['ngSanitize']) - .config(function($routeProvider) { - $routeProvider.when("/welcome", {template:'./examples/welcome.html', controller:WelcomeCntl}); - $routeProvider.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl}); - }); - - AppCntl.$inject = ['$scope', '$route'] - function AppCntl($scope, $route) { - // initialize the model to something useful - $scope.person = { - name:'anonymous', - contacts:[{type:'email', url:'anonymous@example.com'}] - }; - } - - function WelcomeCntl($scope) { - $scope.greet = function() { - alert("Hello " + $scope.person.name); - }; - } - - function SettingsCntl($scope, $location) { - $scope.cancel = function() { - $scope.form = angular.copy($scope.person); - }; - - $scope.save = function() { - angular.copy($scope.form, $scope.person); - $location.path('/welcome'); - }; - - $scope.cancel(); - } - </script> +<example module="deepLinking" deps="angular-sanitize.js"> + <file name="script.js"> + angular.module('deepLinking', ['ngSanitize']) + .config(function($routeProvider) { + $routeProvider. + when("/welcome", {template:'welcome.html', controller:WelcomeCntl}). + when("/settings", {template:'settings.html', controller:SettingsCntl}); + }); + + AppCntl.$inject = ['$scope', '$route'] + function AppCntl($scope, $route) { + $scope.$route = $route; + + // initialize the model to something useful + $scope.person = { + name:'anonymous', + contacts:[{type:'email', url:'anonymous@example.com'}] + }; + } + + function WelcomeCntl($scope) { + $scope.greet = function() { + alert("Hello " + $scope.person.name); + }; + } + + function SettingsCntl($scope, $location) { + $scope.cancel = function() { + $scope.form = angular.copy($scope.person); + }; + + $scope.save = function() { + angular.copy($scope.form, $scope.person); + $location.path('/welcome'); + }; + + $scope.cancel(); + } + </file> + <file name="style.css"> + [ng-view] { + border: 1px solid blue; + margin: 0; + padding:1em; + } + + .partial-info { + background-color: blue; + color: white; + padding: 3px; + } + </file> + <file name="index.html"> <div ng-controller="AppCntl"> <h1>Your App Chrome</h1> [ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ] <hr/> - <span style="background-color: blue; color: white; padding: 3px;"> + <span class="partial-info"> Partial: {{$route.current.template}} </span> - <ng:view style="border: 1px solid blue; margin: 0; display:block; padding:1em;"></ng:view> + <div ng-view></div> <small>Your app footer </small> </div> - </doc:source> - <doc:scenario> + </file> + <file name="settings.html"> + <label>Name:</label> + <input type="text" ng:model="form.name" required> + + <div ng:repeat="contact in form.contacts"> + <select ng:model="contact.type"> + <option>url</option> + <option>email</option> + <option>phone</option> + </select> + <input type="text" ng:model="contact.url"> + [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ] + </div> + <div> + [ <a href="" ng:click="form.contacts.$add()">add</a> ] + </div> + + <button ng:click="cancel()">Cancel</button> + <button ng:click="save()">Save</button> + </file> + <file name="welcome.html"> + Hello {{person.name}}, + <div> + Your contact information: + <div ng:repeat="contact in person.contacts">{{contact.type}}: + <span ng-bind-html="contact.url|linky"></span> + </div> + </div> + </file> + <file name="scenario.js"> it('should navigate to URL', function() { - element('a:contains(Welcome)').click(); - expect(element('ng\\:view').text()).toMatch(/Hello anonymous/); - element('a:contains(Settings)').click(); - input('form.name').enter('yourname'); - element(':button:contains(Save)').click(); - element('a:contains(Welcome)').click(); - expect(element('ng\\:view').text()).toMatch(/Hello yourname/); + element('a:contains(Welcome)').click(); + expect(element('[ng-view]').text()).toMatch(/Hello anonymous/); + element('a:contains(Settings)').click(); + input('form.name').enter('yourname'); + element(':button:contains(Save)').click(); + element('a:contains(Welcome)').click(); + expect(element('[ng-view]').text()).toMatch(/Hello yourname/); }); - </doc:scenario> -</doc:example> + </file> +</example> diff --git a/docs/content/guide/dev_guide.bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.ngdoc index 02351ede..391475ca 100644 --- a/docs/content/guide/dev_guide.bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.ngdoc @@ -38,7 +38,7 @@ Compatibility} doc. ## Creating Your Own Namespaces -When you are ready to define your own {@link api/angular.module.ng.$compileProvider.directive +When you are ready to define your own {@link guide/directive directive}, you may chose to create your own namespace in addition to specifying the Angular namespace. You use your own namespace to form the fully qualified name for directives that you create. diff --git a/docs/content/guide/dev_guide.compiler.ngdoc b/docs/content/guide/dev_guide.compiler.ngdoc index d979f309..f52928a6 100644 --- a/docs/content/guide/dev_guide.compiler.ngdoc +++ b/docs/content/guide/dev_guide.compiler.ngdoc @@ -3,7 +3,7 @@ @description The core of Angular is its HTML compiler. The compiler processes Angular -{@link api/angular.module.ng.$compileProvider.directive directives} allowing them to transform a +{@link guide/directive directives} allowing them to transform a static HTML page into a dynamic web application. The default HTML transformations that the Angular compiler provides are useful for building generic @@ -21,4 +21,4 @@ All compilation takes place in the web browser; no server is involved. ## Related API * {@link api/angular.module.ng.$compile Angular Compiler API} -* {@link api/angular.module.ng.$compileProvider.directive Directives API} +* {@link guide/directive Directives API} diff --git a/docs/content/guide/dev_guide.compiler.understanding_compiler.ngdoc b/docs/content/guide/dev_guide.compiler.understanding_compiler.ngdoc index 96c89d32..ea433cc5 100644 --- a/docs/content/guide/dev_guide.compiler.understanding_compiler.ngdoc +++ b/docs/content/guide/dev_guide.compiler.understanding_compiler.ngdoc @@ -3,7 +3,7 @@ @description The {@link api/angular.module.ng.$compile compiler} is responsible for applying -{@link api/angular.module.ng.$compileProvider.directive directives} to the HTML. The directives +{@link guide/directive directives} to the HTML. The directives extend the behavior of HTML elements and can effect the DOM structure, presentation, and behavior. This allows Angular to teach the browser new tricks. @@ -21,7 +21,7 @@ Since directives allow attachment of behavior to the HTML, the angular philosoph HTML as Domain Specific Language (DSL) when building an application. For example it may be useful to declare `TabPanel` directive, or `KeyboardShortcut` directive when for an application. -For details on how directives are created see {@link api/angular.module.ng.$compileProvider.directive +For details on how directives are created see {@link guide/directive directives} ## Related Topics diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index fe668ddf..6621e231 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -31,7 +31,7 @@ In addition it provides {@link api/angular.module.ng.$compileProvider.directive. <pre>master = {{master | json}}</pre> </div> -<script type="text/javascript"> +<script> function Controller($scope) { $scope.master= {}; @@ -91,7 +91,7 @@ This ensures that the user is not distracted with an error until after interacti } </style> -<script type="text/javascript"> +<script> function Controller($scope) { $scope.master= {}; @@ -152,7 +152,7 @@ This allows us to extend the above example with these features: </form> </div> -<script type="text/javascript"> +<script> function Controller($scope) { $scope.master= {}; @@ -227,7 +227,7 @@ In the following example we create two directives. </form> </div> -<script type="text/javascript"> +<script> var app = angular.module('form-example1', []); var INTEGER_REGEXP = /^\-?\d*$/; @@ -281,13 +281,13 @@ In order for custom control to work with `ngModel` and to achieve two-way data-b - implement `render` method, which is responsible for rendering the data after it passed the {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$formatters NgModelController#$formatters}, - call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener. -See {@link api/angular.module.ng.$compileProvider.directive $compileProvider.directive} for more info. +See {@link guide/directive $compileProvider.directive} for more info. The following example shows how to add two-way data-binding to contentEditable elements. <doc:example module="form-example2"> <doc:source> -<script type="text/javascript"> +<script> angular.module('form-example2', []).directive('contenteditable', function() { return { require: 'ngModel', diff --git a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc index 162bfbce..b95bdf5b 100644 --- a/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc +++ b/docs/content/guide/dev_guide.mvc.understanding_controller.ngdoc @@ -57,7 +57,7 @@ manipulation—the presentation logic of an application—is well known for bein Putting any presentation logic into controllers significantly affects testability of the business logic. Angular offers {@link dev_guide.templates.databinding} for automatic DOM manipulation. If you have to perform your own manual DOM manipulation, encapsulate the presentation logic in -{@link api/angular.module.ng.$compileProvider.directive directives}. +{@link guide/directive directives}. - Input formatting — Use {@link dev_guide.forms angular form controls} instead. - Output filtering — Use {@link dev_guide.templates.filters angular filters} instead. - Run stateless or stateful code shared across controllers — Use {@link dev_guide.services angular diff --git a/docs/content/guide/dev_guide.scopes.internals.ngdoc b/docs/content/guide/dev_guide.scopes.internals.ngdoc index 1cc2b2a8..090d5261 100644 --- a/docs/content/guide/dev_guide.scopes.internals.ngdoc +++ b/docs/content/guide/dev_guide.scopes.internals.ngdoc @@ -46,7 +46,7 @@ reside on a child scope, if a property read does not find the property on a scop recursively check the parent scope, grandparent scope, etc. all the way to the root scope before defaulting to undefined. -{@link api/angular.module.ng.$compileProvider.directive directives} associated with elements +{@link guide/directive directives} associated with elements (ngController, ngRepeat, ngInclude, etc.) create new child scopes that inherit properties from the current parent scope. Any code in Angular is free to create a new scope. Whether or not your code does so is an implementation detail of the directive, that is, you can decide when or if this @@ -117,9 +117,9 @@ scopes come into play throughout and get a sense of their interactions. 1. At application compile time, a root scope is created and is attached to the root `<HTML>` DOM element. 2. During the compilation phase, the {@link dev_guide.compiler compiler} matches {@link -api/angular.module.ng.$compileProvider.directive directives} against the DOM template. The directives +guide/directive directives} against the DOM template. The directives usually fall into one of two categories: - - Observing {@link api/angular.module.ng.$compileProvider.directive directives}, such as double-curly + - Observing {@link guide/directive directives}, such as double-curly expressions `{{expression}}`, register listeners using the {@link api/angular.module.ng.$rootScope.Scope#$watch $watch()} method. This type of directive needs to be notified whenever the expression changes so that it can update the view. @@ -133,7 +133,7 @@ api/angular.module.ng.$rootScope.Scope#$apply $apply()} method so that all liste ### Directives that create scopes -In most cases, {@link api/angular.module.ng.$compileProvider.directive directives} and scopes interact but do not create new +In most cases, {@link guide/directive directives} and scopes interact but do not create new instances of scope. However, some directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngController ngController} and {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}, create new child scopes using the {@link api/angular.module.ng.$rootScope.Scope#$new $new()} method and then attach the child scope to the diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc index f7ca5dbe..7668b60a 100644 --- a/docs/content/guide/dev_guide.services.$location.ngdoc +++ b/docs/content/guide/dev_guide.services.$location.ngdoc @@ -402,7 +402,7 @@ In this examples we use `<base href="/base/index.html" />` </div> </div> -<script type="text/javascript"> +<script> function FakeBrowser(initUrl, baseHref) { this.onUrlChange = function(fn) { this.urlChange = fn; diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc index f8034c79..ff674369 100644 --- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc +++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc @@ -30,7 +30,7 @@ myController.$inject = ['$location', '$log']; <doc:example module="MyServiceModule"> <doc:source> -<script type="text/javascript"> +<script> angular. module('MyServiceModule', []). factory('notify', ['$window', function(win) { @@ -74,7 +74,7 @@ Let's rewrite the above example to show the use of this implicit dependency inje <doc:example module="MyServiceModuleDI"> <doc:source> -<script type="text/javascript"> +<script> angular. module('MyServiceModuleDI', []). factory('notify', function($window) { diff --git a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc index bcc991ea..1a389e3c 100644 --- a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc @@ -18,7 +18,7 @@ text upper-case and assigns color. <doc:example module="MyReverseModule"> <doc:source> -<script type="text/javascript"> +<script> angular.module('MyReverseModule', []). filter('reverse', function() { return function(input, uppercase) { diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc index 54d582ca..b5f6dade 100644 --- a/docs/content/guide/dev_guide.templates.ngdoc +++ b/docs/content/guide/dev_guide.templates.ngdoc @@ -10,7 +10,7 @@ the dynamic view DOM. These are the types of angular elements and element attributes you can use in a template: -* {@link api/angular.module.ng.$compileProvider.directive Directive} — An attribute or element that +* {@link guide/directive Directive} — An attribute or element that augments an existing DOM element or represents a reusable DOM component - a widget. * {@link api/angular.module.ng.$interpolate Markup} — The double curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup. @@ -21,7 +21,7 @@ Note: In addition to declaring the elements above in templates, you can also ac in JavaScript code. The following code snippet shows a simple angular template made up of standard HTML tags along with -angular {@link api/angular.module.ng.$compileProvider.directive directives} and curly-brace bindings +angular {@link guide/directive directives} and curly-brace bindings with {@link dev_guide.expressions expressions}: <pre> diff --git a/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc b/docs/content/guide/directive.ngdoc index a79bd9ba..5e50dca5 100644 --- a/docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc +++ b/docs/content/guide/directive.ngdoc @@ -1,5 +1,5 @@ @ngdoc overview -@name angular.module.ng.$compileProvider.directive +@name directive @description Directives are a way to teach HTML new tricks. During DOM compilation directives are matched @@ -47,7 +47,7 @@ the following example. </div> </doc:source> <doc:scenario> - it('should load template1.html', function() { + it('should show off bindings', function() { expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text()).toBe('angular'); }); </doc:scenario> @@ -55,11 +55,11 @@ the following example. # String interpolation -During the compilation process the {@link angular.module.ng.$compile compiler} matches text and -attributes using the {@link angular.module.ng.$interpolate $interpolate} service to see if they +During the compilation process the {@link api/angular.module.ng.$compile compiler} matches text and +attributes using the {@link api/angular.module.ng.$interpolate $interpolate} service to see if they contain embedded expressions. These expressions are registered as {@link -angular.module.ng.$rootScope.Scope#$watch watches} and will update as part of normal {@link -angular.module.ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is shown +api/angular.module.ng.$rootScope.Scope#$watch watches} and will update as part of normal {@link +api/angular.module.ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is shown here: <pre> @@ -74,21 +74,21 @@ Compilation of HTML happens in three phases: realize because the templates must be parsable HTML. This is in contrast to most templating systems that operate on strings, rather then on DOM elements. - 2. The compilation of the DOM is performed by the call to {@link angular.module.ng.$compile + 2. The compilation of the DOM is performed by the call to {@link api/angular.module.ng.$compile $compile()} method. The method traverses the DOM and matches the directives. If a match is found it is added to the list of directives associated with the given DOM element. Once all directives for a given DOM element have been identified they are sorted by priority and their `compile()` functions are executed. The directive compile function has a chance to modify the DOM structure and is responsible for producing a `link()` function explained next. The {@link - angular.module.ng.$compile $compile()} method returns a combined linking function, which is a + api/angular.module.ng.$compile $compile()} method returns a combined linking function, which is a collection of all of the linking functions returned from the individual directive compile functions. 3. Link the template with scope by calling the linking function returned from the previous step. This in turn will call the linking function of the individual directives allowing them to register any listeners on the elements and set up any {@link - angular.module.ng.$rootScope.Scope#$watch watches} with the {@link - angular.module.ng.$rootScope.Scope scope}. The result of this is a live binding between the + api/angular.module.ng.$rootScope.Scope#$watch watches} with the {@link + api/angular.module.ng.$rootScope.Scope scope}. The result of this is a live binding between the scope and the DOM. A change in the scope is reflected in the DOM. <pre> @@ -125,14 +125,14 @@ The short answer is that compile and link separation is needed any time a change a change in DOM structure such as in repeaters. When the above example is compiled, the compiler visits every node and looks for directives. The -`{{user}}` is an example of {@link angular.module.ng.$interpolate interpolation} directive. {@link -angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} is another directive. But {@link -angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} has a dilemma. It needs to be +`{{user}}` is an example of {@link api/angular.module.ng.$interpolate interpolation} directive. {@link +api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} is another directive. But {@link +api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} has a dilemma. It needs to be able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted, the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element is not enough. It also needs to compile the `li` so that its directives such as -`{{action.descriptions}}` evaluate against the right {@link angular.module.ng.$rootScope.Scope +`{{action.descriptions}}` evaluate against the right {@link api/angular.module.ng.$rootScope.Scope scope}. A naive method would be to simply insert a copy of the `li` elemnt and then compile it. But compiling on every `li` element clone would be slow, since the compilation requires that we traverse the DOM tree and look for directives and execute them. If we put the compilation inside a @@ -140,17 +140,17 @@ repeater which needs to unroll 100 items we would quickly run into performance p The solution is to break the compilation process into two phases the compile phase where all of the directives are identified and sorted by priority, and a linking phase where any work which -links a specific instance of the {@link angular.module.ng.$rootScope.Scope scope} and the specific +links a specific instance of the {@link api/angular.module.ng.$rootScope.Scope scope} and the specific instance of an `li` is performed. -{@link angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} works by preventing the +{@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} works by preventing the compilation process form descending into `li` element. Instead the {@link -angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive compiles `li` +api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive compiles `li` seperatly. The result of of the `li` element compilation is a linking function which contains all of the directives contained in the `li` element ready to be attached to a specific clone of `li` -element. At runtime the {@link angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} +element. At runtime the {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} watches the expression and as items are added to the array it clones the `li` element, creates a -new {@link angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the +new {@link api/angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the link function on the cloned `li`. Summary: @@ -288,14 +288,14 @@ further simplification: ## Factory method The factory method is responsible for creating the directive. It is invoked only once, when the -{@link angular.module.ng.$compile compiler} matches the directive for the first time. You can +{@link api/angular.module.ng.$compile compiler} matches the directive for the first time. You can perform any initialization work here. The method is invoked using the {@link http://localhost:8000/build/docs/api/angular.module.AUTO.$injector#invoke $injector.invoke} which makes it injectable following all of the rules of injection annotation. ## Directive Definition Object -The directive definition object provides instructions to the {@link angular.module.ng.$compile +The directive definition object provides instructions to the {@link api/angular.module.ng.$compile compiler}. The attributes are: * `name` - Name of the current scope. Optional defaults to the name at registration. @@ -440,8 +440,8 @@ compiler}. The attributes are: Compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often. Examples which require compile functions are directives which transform template DOM such as {@link -angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} or load the contents -asynchronously such as {@link angular.module.ng.$compileProvider.directive.ngView ngView}. The +api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} or load the contents +asynchronously such as {@link api/angular.module.ng.$compileProvider.directive.ngView ngView}. The compile functions takes the following arguments. * `tElement` - template element - The element where the directive has been declared. It is @@ -478,8 +478,8 @@ Link function is responsible for registering DOM listeners as well as updating t executed after the template has been cloned. This is where most of the directive logic will be put. - * `scope` - {@link angular.module.ng.$rootScope.Scope Scope} - The scope to be used by the - directive for registering {@link angular.module.ng.$rootScope.Scope#$watch watches}. + * `scope` - {@link api/angular.module.ng.$rootScope.Scope Scope} - The scope to be used by the + directive for registering {@link api/angular.module.ng.$rootScope.Scope#$watch watches}. * `iElement` - instance element - The element where the directive is to be used. It is safe to manipulate the children of the element only in `postLink` function since the children have diff --git a/docs/content/guide/index.ngdoc b/docs/content/guide/index.ngdoc index 1870d1cc..77a16354 100644 --- a/docs/content/guide/index.ngdoc +++ b/docs/content/guide/index.ngdoc @@ -33,7 +33,7 @@ of the following documents before returning here to the Developer Guide: ## {@link dev_guide.compiler Angular HTML Compiler} -* {@link api/angular.module.ng.$compileProvider.directive Understanding Angular Directives} +* {@link guide/directive Understanding Angular Directives} ## {@link dev_guide.templates Angular Templates} diff --git a/docs/content/guide/type.ngdoc b/docs/content/guide/type.ngdoc new file mode 100644 index 00000000..7d576f28 --- /dev/null +++ b/docs/content/guide/type.ngdoc @@ -0,0 +1,3 @@ +@ngdoc overview +@name Developer Guide: Type +@description diff --git a/docs/content/misc/started.ngdoc b/docs/content/misc/started.ngdoc index 76bff181..e8110fdc 100644 --- a/docs/content/misc/started.ngdoc +++ b/docs/content/misc/started.ngdoc @@ -77,7 +77,7 @@ After the refresh, the page should look something like this: These are some of the important points to note from this example: -* The text input {@link api/angular.module.ng.$compileProvider.directive directive} +* The text input {@link guide/directive directive} is bound to a model variable called `yourname`. * The double curly braces notation binds the `yourname` model to the greeting text. diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 1190aaf2..9bbe9e2f 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -7,7 +7,7 @@ the construction of an AngularJS web app. The app you will build is a catalog th of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device. -<img src="img/tutorial/catalog_screen.png" width="488" height="413"> +<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413"> Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions or plug-ins. As you work through the tutorial, you will: @@ -52,22 +52,22 @@ code management or to use scripts that copy snapshots of project files into your (`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your computer for your preferred option. -<doc:tutorial-instructions show="true"> - <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux"> +<div class="tabbable" show="true"> + <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux"> <ol> <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the following command in a terminal window:</p> - <pre><code>java -version</code></pre> + <pre>java -version</pre> <p>You will need Java to run unit tests.</p></li> <li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p> <p>You can build Git from source or use the pre-compiled package.</p></li> <li><p>Clone the angular-phonecat repository located at <a href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p> - <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre> + <pre>git clone git://github.com/angular/angular-phonecat.git</pre> <p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li> <li><p>Change your current directory to <code>angular-phonecat</code>:</p> - <pre><code>cd angular-phonecat</code></pre> + <pre>cd angular-phonecat</pre> <p>The tutorial instructions assume you are running all commands from the angular-phonecat directory.</p></li> <li><p>You will need an http server running on your system. Mac and Linux machines typically @@ -75,22 +75,22 @@ have Apache pre-installed, but If you don't already have one installed, you can href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="git-win" title="Git on Windows"> + <div class="tab-pane well" id="git-win" title="Git on Windows"> <ol> <li><p>You will need Java to run unit tests, so run the following command to verify that you have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on your <code>PATH</code>.</p> - <pre><code>java -version</code></pre> + <pre>java -version</pre> <p></p></li> <li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li> <li><p>Open msysGit bash and clone the angular-phonecat repository located at <a href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p> - <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre> + <pre>git clone git://github.com/angular/angular-phonecat.git</pre> <p>This command creates the angular-phonecat directory in your current directory.</p></li> <li><p>Change your current directory to angular-phonecat.</p> - <pre><code>cd angular-phonecat</code></pre> + <pre>cd angular-phonecat</pre> <p>The tutorial instructions assume you are running all commands from the angular-phonecat directory.</p> <p>You should run all <code>git</code> commands from msysGit bash.</p> @@ -101,18 +101,18 @@ already installed, you can install <a href="http://nodejs.org/#download">node.js <code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run <code>scripts\web-server.js</code>, a simple bundled http server.</p></li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux"> + <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux"> <ol> <li><p>You need Java to run unit tests, so verify that you have <a href="http://java.com/">Java</a> installed by running the following command in a terminal window:</p> - <pre><code>java -version</code></pre> + <pre>java -version</pre> <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a> containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li> <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p> - <pre><code>cd [tutorial-dir]/sandbox</code></pre> + <pre>cd [tutorial-dir]/sandbox</pre> <p>The tutorial instructions assume you are running all commands from your <code>sandbox</code> directory.</p></li> <li><p>You need an http server running on your system and Mac and Linux machines typically @@ -120,29 +120,29 @@ have Apache pre-installed. If you don't have an http server installed, you can < href="http://nodejs.org/#download">install node.js</a> and use it to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows"> + <div class="tab-pane well" id="ss-win" title="Snapshots on Windows"> <ol> <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on your <code>PATH</code> by running the following command in the Windows command line:</p> - <pre><code>java -version</code></pre> + <pre>java -version</pre> <p>You need Java to run unit tests, so download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files and unzip the files into the [tutorial-dir] directory</p></li> <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p> - <pre><code>cd [tutorial-dir]/sandbox</code></pre> + <pre>cd [tutorial-dir]/sandbox</pre> <p>The tutorial instructions assume you are running all commands from this directory.</p></li> <li><p>You need an http server running on your system, but if you don't already have one already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that <code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run <code>scripts\web-server.js</code>, a simple bundled http server.</p></li> </ol> - </doc:tutorial-instruction> -</doc:tutorial-instructions> + </div> +</divs> The last thing to do is to make sure your computer has a web browser and a good text editor installed. Now, let's get some cool stuff done! -{@link step_00 <span class="tutorial-start">Get Started!</span>} +{@link step_00 <span class="btn btn-primary">Get Started!</span>} diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 3cf1c172..714f983e 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 0 - Bootstrapping @description -<ul doc:tutorial-nav="0"></ul> +<ul doc-tutorial-nav="0"></ul> You are now ready to build the AngularJS phonecat app. In this step, you will become familiar @@ -10,11 +10,11 @@ with the most important source code files, learn how to start the development se angular-seed, and run the application in the browser. -<doc:tutorial-instructions show="true"> - <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux"> +<div class="tabbable" show="true" ng-model="$cookies.platformPreference"> + <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix"> <ol> <li><p>In angular-phonecat directory, run this command:</p> - <pre><code>git checkout -f step-0</code></pre> + <pre>git checkout -f step-0</pre> <p>This resets your workspace to step 0 of the tutorial app.</p> <p>You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within @@ -41,13 +41,13 @@ directory.</li> </ul> </li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="git-win" title="Git on Windows"> + <div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin"> <ol> <li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p> - <pre><code>git checkout -f step-0</code></pre> + <pre>git checkout -f step-0</pre> <p>This resets your workspace to step 0 of the tutorial app.</p> <p>You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within @@ -73,13 +73,13 @@ directory.</li> </ul> </li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux"> + <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix"> <ol> <li><p>In the angular-phonecat directory, run this command:</p> - <pre><code>./goto_step.sh 0</code></pre> + <pre>./goto_step.sh 0</pre> <p>This resets your workspace to step 0 of the tutorial app.</p> <p>You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within @@ -105,13 +105,13 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html </ul> </li> </ol> - </doc:tutorial-instruction> + </div> - <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows"> + <div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin"> <ol> <li><p>Open windows command line and run this command (in the angular-phonecat directory):</p> - <pre><code>goto_step.bat 0</code></pre> + <pre>goto_step.bat 0</pre> <p>This resets your workspace to step 0 of the tutorial app.</p> <p>You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within @@ -137,8 +137,8 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html </ul> </li> </ol> - </doc:tutorial-instruction> -</doc:tutorial-instructions> + </div> +</div> You can now see the page in your browser. It's not very exciting, but that's OK. @@ -233,7 +233,7 @@ in the view by updating all of the affected bindings. The structure of our application is currently very simple. The template contains just one directive and one static binding, and our model is empty. That will soon change! -<img src="img/tutorial/tutorial_00.png"> +<img class="diagram" src="img/tutorial/tutorial_00.png"> ## What are all these files in my working directory? @@ -265,7 +265,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi Now let's go to {@link step_01 step 1} and add some content to the web app. -<ul doc:tutorial-nav="0"></ul> +<ul doc-tutorial-nav="0"></ul> <div style="display: none"> Note: During the bootstrap the injector and the root scope will then be associated with the diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index 11725031..a664c951 100644 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 1 - Static Template @description -<ul doc:tutorial-nav="1"></ul> +<ul doc-tutorial-nav="1"></ul> In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML @@ -12,7 +12,7 @@ dynamically display the same result with any set of data. In this step you will add some basic information about two cell phones to an HTML page. -<doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions> +<div doc-tutorial-reset="1"></div> The page now contains a list with information about two phones. @@ -22,7 +22,6 @@ https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}: __`app/index.html`:__ <pre> -... <ul> <li> <span>Nexus S</span> @@ -37,7 +36,6 @@ __`app/index.html`:__ </p> </li> </ul> -... </pre> @@ -54,4 +52,4 @@ This addition to your app uses static HTML to display the list. Now, let's go to step 2} to learn how to use AngularJS to dynamically generate the same list. -<ul doc:tutorial-nav="1"></ul> +<ul doc-tutorial-nav="1"></ul> diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index d7e6a93f..bf7dc661 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 2 - Angular Templates @description -<ul doc:tutorial-nav="2"></ul> +<ul doc-tutorial-nav="2"></ul> Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the @@ -14,7 +14,7 @@ design pattern} to decouple the code and to separate concerns. With that in mind little Angular and JavaScript to add model, view, and controller components to our app. -<doc:tutorial-instructions step="2"></doc:tutorial-instructions> +<div doc-tutorial-reset="2"></div> The app now contains a list with three phones. @@ -64,7 +64,7 @@ tag as the template. bindings. As opposed to evaluating constants, these expression are refering to our application model, which was set up in our `PhoneListCtrl` controller. - <img src="img/tutorial/tutorial_02.png"> + <img class="diagram" src="img/tutorial/tutorial_02.png"> ## Model and Controller @@ -209,4 +209,4 @@ are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to a to the app. -<ul doc:tutorial-nav="2"></ul> +<ul doc-tutorial-nav="2"></ul> diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 60b4173b..26bb9d5f 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 3 - Filtering Repeaters @description -<ul doc:tutorial-nav="3"></ul> +<ul doc-tutorial-nav="3"></ul> We did a lot of work in laying a foundation for the app in the last step, so now we'll do something @@ -11,7 +11,7 @@ test, because a good end-to-end test is a good friend. It stays with your app, k and quickly detects regressions. -<doc:tutorial-instructions step="3"></doc:tutorial-instructions> +<div doc-tutorial-reset="3"></div> The app now has a search box. Notice that the phone list on the page changes depending on what a @@ -31,7 +31,6 @@ We made no changes to the controller. __`app/index.html`:__ <pre> -... <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> @@ -53,7 +52,6 @@ __`app/index.html`:__ </div> </div> </div> -... </pre> We added a standard HTML `<input>` tag and used angular's @@ -71,7 +69,7 @@ available as a filter input in the list repeater (`phone in phones | filter:`__` changes to the data model cause the repeater's input to change, the repeater efficiently updates the DOM to reflect the current state of the model. - <img src="img/tutorial/tutorial_03.png"> + <img class="diagram" src="img/tutorial/tutorial_03.png"> * Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the `query` value to create a new array that contains only those records that match the `query`. @@ -192,5 +190,5 @@ We have now added full text search and included a test to verify that search wor to {@link step_04 step 4} to learn how to add sorting capability to the phone app. -<ul doc:tutorial-nav="3"></ul> +<ul doc-tutorial-nav="3"></ul> diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 900a0340..ca452b59 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 4 - Two-way Data Binding @description -<ul doc:tutorial-nav="4"></ul> +<ul doc-tutorial-nav="4"></ul> In this step, you will add a feature to let your users control the order of the items in the phone @@ -10,7 +10,7 @@ list. The dynamic ordering is implemented by creating a new model property, wiri the repeater, and letting the data binding magic do the rest of the work. -<doc:tutorial-instructions step="4"></doc:tutorial-instructions> +<div doc-tutorial-reset="4"></div> You should see that in addition to the search box, the app displays a drop down menu that allows @@ -24,23 +24,20 @@ The most important differences between Steps 3 and 4 are listed below. You can s __`app/index.html`:__ <pre> -... - Search: <input ng-model="query"> - Sort by: - <select ng-model="orderProp"> - <option value="name">Alphabetical</option> - <option value="age">Newest</option> - </select> - -... - - <ul class="phones"> - <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> - {{phone.name}} - <p>{{phone.snippet}}</p> - </li> - </ul> -... + Search: <input ng-model="query"> + Sort by: + <select ng-model="orderProp"> + <option value="name">Alphabetical</option> + <option value="age">Newest</option> + </select> + + + <ul class="phones"> + <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> + {{phone.name}} + <p>{{phone.snippet}}</p> + </li> + </ul> </pre> We made the following changes to the `index.html` template: @@ -48,7 +45,7 @@ We made the following changes to the `index.html` template: * First, we added a `<select>` html element named `orderProp`, so that our users can pick from the two provided sorting options. - <img src="img/tutorial/tutorial_04.png"> + <img class="diagram" src="img/tutorial/tutorial_04.png"> * We then chained the `filter` filter with {@link api/angular.module.ng.$filter.orderBy `orderBy`} filter to further process the input into the repeater. `orderBy` is a filter that takes an input @@ -191,4 +188,4 @@ Now that you have added list sorting and tested the app, go to {@link step_05 st about Angular services and how Angular uses dependency injection. -<ul doc:tutorial-nav="4"></ul> +<ul doc-tutorial-nav="4"></ul> diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index d485e8bc..321f60c3 100644 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 5 - XHRs & Dependency Injection @description -<ul doc:tutorial-nav="5"></ul> +<ul doc-tutorial-nav="5"></ul> Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset @@ -11,7 +11,7 @@ api/angular.module.ng.$http $http}. We will use angular's {@link guide/dev_guide injection (DI)} to provide the service to the `PhoneListCtrl` controller. -<doc:tutorial-instructions step="5"></doc:tutorial-instructions> +<div doc-tutorial-reset="5"></div> You should now see a list of 20 phones. @@ -89,7 +89,7 @@ Note that the names of arguments are significant, because the injector uses thes dependencies. -<img src="img/tutorial/xhr_service_final.png"> +<img class="diagram" src="img/tutorial/xhr_service_final.png"> ### '$' Prefix Naming Convention @@ -235,4 +235,4 @@ injection), go to {@link step_06 step 6}, where you will add some thumbnail images of phones and some links. -<ul doc:tutorial-nav="5"></ul> +<ul doc-tutorial-nav="5"></ul> diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index 770a47de..524b6a01 100644 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 6 - Templating Links & Images @description -<ul doc:tutorial-nav="6"></ul> +<ul doc-tutorial-nav="6"></ul> In this step, you will add thumbnail images for the phones in the phone list, and links that, for @@ -10,7 +10,7 @@ now, will go nowhere. In subsequent steps you will use the links to display addi about the phones in the catalog. -<doc:tutorial-instructions step="6"></doc:tutorial-instructions> +<div doc-tutorial-reset="6"></div> You should now see links and images of the phones in the list. @@ -64,7 +64,7 @@ We also added phone images next to each record using an image tag with the {@lin api/angular.module.ng.$compileProvider.directive.ngSrc ngSrc} directive. That directive prevents the browser from treating the angular `{{ expression }}` markup literally, and initiating a request to invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only -specified an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). +specified an attribute binding in a regular `src` attribute (`<img class="diagram" src="{{phone.imageUrl}}">`). Using `ngSrc` (`ng-src`) prevents the browser from making an http request to an invalid location. @@ -103,4 +103,4 @@ Now that you have added phone images and links, go to {@link step_07 step 7} to layout templates and how angular makes it easy to create applications that have multiple views. -<ul doc:tutorial-nav="6"></ul> +<ul doc-tutorial-nav="6"></ul> diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index dbbf010d..f8b5cf52 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/docs/content/tutorial/step_07.ngdoc @@ -2,14 +2,14 @@ @name Tutorial: 7 - Routing & Multiple Views @description -<ul doc:tutorial-nav="7"></ul> +<ul doc-tutorial-nav="7"></ul> In this step, you will learn how to create a layout template and how to build an app that has multiple views by adding routing. -<doc:tutorial-instructions step="7"></doc:tutorial-instructions> +<div doc-tutorial-reset="7"></div> Note that when you now navigate to `app/index.html`, you are redirected to `app/index.html#/phones` @@ -191,7 +191,7 @@ __`app/partials/phone-list.html`:__ <div style="display:none"> TODO! -<img src="img/tutorial/tutorial_07_final.png"> +<img class="diagram" src="img/tutorial/tutorial_07_final.png"> </div> We also added a placeholder template for the phone details view: @@ -258,4 +258,4 @@ With the routing set up and the phone list view implemented, we're ready to go t step 8} to implement the phone details view. -<ul doc:tutorial-nav="7"></ul> +<ul doc-tutorial-nav="7"></ul> diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 9ccaf9b4..3892abdf 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -2,14 +2,14 @@ @name Tutorial: 8 - More Templating @description -<ul doc:tutorial-nav="8"></ul> +<ul doc-tutorial-nav="8"></ul> In this step, you will implement the phone details view, which is displayed when a user clicks on a phone in the phone list. -<doc:tutorial-instructions step="8"></doc:tutorial-instructions> +<div doc-tutorial-reset="8"></div> Now when you click on a phone on the list, the phone details page with phone-specific information @@ -113,7 +113,7 @@ __`app/partials/phone-details.html`:__ <div style="display: none"> TODO! -<img src="img/tutorial/tutorial_08-09_final.png"> +<img class="diagram" src="img/tutorial/tutorial_08-09_final.png"> </div> ## Test @@ -194,4 +194,4 @@ Now that the phone details view is in place, proceed to {@link step_09 step 9} t write your own custom display filter. -<ul doc:tutorial-nav="8"></ul> +<ul doc-tutorial-nav="8"></ul> diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index 45418cec..86e4ffc6 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -2,13 +2,13 @@ @name Tutorial: 9 - Filters @description -<ul doc:tutorial-nav="9"></ul> +<ul doc-tutorial-nav="9"></ul> In this step you will learn how to create your own custom display filter. -<doc:tutorial-instructions step="9"></doc:tutorial-instructions> +<div doc-tutorial-reset="9"></div> Navigate to one of the detail pages. @@ -140,4 +140,4 @@ Now that you have learned how to write and test a custom filter, go to {@link st learn how we can use angular to enhance the phone details page further. -<ul doc:tutorial-nav="9"></ul> +<ul doc-tutorial-nav="9"></ul> diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 1d60de06..85c14072 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -2,13 +2,13 @@ @name Tutorial: 10 - Event Handlers @description -<ul doc:tutorial-nav="10"></ul> +<ul doc-tutorial-nav="10"></ul> In this step, you will add a clickable phone image swapper to the phone details page. -<doc:tutorial-instructions step="10"></doc:tutorial-instructions> +<div doc-tutorial-reset="10"></div> The phone details view displays one large image of the current phone and several smaller thumbnail @@ -70,7 +70,7 @@ url of the thumbnail image. <div style="display: none"> TODO! -<img src="img/tutorial/tutorial_10-11_final.png"> +<img class="diagram" src="img/tutorial/tutorial_10-11_final.png"> </div> ## Test @@ -138,4 +138,4 @@ With the phone image swapper in place, we're ready for {@link step_11 step 11} ( learn an even better way to fetch data. -<ul doc:tutorial-nav="10"></ul> +<ul doc-tutorial-nav="10"></ul> diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc index acad5467..0efc5bfb 100644 --- a/docs/content/tutorial/step_11.ngdoc +++ b/docs/content/tutorial/step_11.ngdoc @@ -2,13 +2,13 @@ @name Tutorial: 11 - REST and Custom Services @description -<ul doc:tutorial-nav="11"></ul> +<ul doc-tutorial-nav="11"></ul> In this step, you will improve the way our app fetches data. -<doc:tutorial-instructions step="11"></doc:tutorial-instructions> +<div doc-tutorial-reset="11"></div> The last improvement we will make to our app is to define a custom service that represents a {@link @@ -220,4 +220,4 @@ There you have it! We have created a web app in a relatively short amount of ti the_end closing notes} we'll cover were to go from here. -<ul doc:tutorial-nav="11"></ul> +<ul doc-tutorial-nav="11"></ul> |