Posts

Showing posts from 2019

Tutorial 22.1 Browser In HTML5 Mode

-
Browser in HTML5 mode ******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-location-html5-mode-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="app.js"></script>   <script src="fakeBrowser.js"></script>   <script src="addressBar.js"></script>     </head> <body ng-app="html5-mode">   <div ng-controller="LocationController">   <div ng-address-bar></div><br><br>   <div>     $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>     $location.host() = <span ng-bind="$location.host()"></span> ...
Post a Comment
Read more

Tutorial 22.3 Two-way binding to $location

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-location-hashbang-mode-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="app.js"></script>   <script src="fakeBrowser.js"></script>   <script src="addressBar.js"></script>     </head> <body ng-app="hashbang-mode">   <div ng-controller="LocationController">   <div ng-address-bar></div><br><br>   <div>     $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>     $location.host() = <span ng-bind="$location.host()"></span> <br>     $l...
Post a Comment
Read more

Tutorial 22.2 Browser In HTML5 Fallback Mode (Hashbang Mode)

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-location-html5-mode-production</title>   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="app.js"></script>   <script src="fakeBrowser.js"></script>   <script src="addressBar.js"></script> </head> <body ng-app="html5-mode">   <div ng-controller="LocationController">   <div ng-address-bar></div><br><br>   <div>     $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>     $location.host() = <span ng-bind="$location.host()"></span> <br>     $location.port...
Post a Comment
Read more

Tutorial 26.2 Disabling attributes

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-accessibility-ng-click-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="//code.angularjs.org/snapshot/angular-aria.js"></script>     </head> <body ng-app="ngAria_ngClickExample">    <div ng-click="someFunction" show-attrs>    &lt;div&gt; with ng-click and bindRoleForClick, tabindex set to false  </div> <script>  angular.module('ngAria_ngClickExample', ['ngAria'], function config($ariaProvider) {    $ariaProvider.config({      bindRoleForClick: false,      tabindex: false    });  })  .directi...
Post a Comment
Read more

Tutorial 26.1 ngModel

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-accessibility-ng-model-production</title>   <link href="style.css" rel="stylesheet" type="text/css">     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="//code.angularjs.org/snapshot/angular-aria.js"></script>   <script src="script.js"></script>     </head> <body ng-app="ngAria_ngModelExample">   <form>   <custom-checkbox role="checkbox" ng-model="checked" required       aria-label="Custom checkbox" show-attrs>     Custom checkbox   </custom-checkbox> </form> <hr /> <b>Is checked:</b>...
Post a Comment
Read more

Tutorial 24.1 Basic Example

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-message-format-example-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="//code.angularjs.org/snapshot/angular-message-format.js"></script>   <script src="app.js"></script>     </head> <body ng-app="messageFormatExample">   <div ng-controller="ckCtrl">   <b>Set number of recipients</b>   <button ng-click="setNumRecipients(0)">None</button>   <button ng-click="setNumRecipients(1)">One</button>   <button ng-click="setNumRecipients(2)">Two</button>   <button ng-click="setNumR...
Post a Comment
Read more

Tutorial 18.3 Filter Decorator Example

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-filter-decorator-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="filterDecorator">   <div ng-controller="Ctrl">   <div id="genesis">Initial Commit default to short date: {{ genesis | date }}</div>   <div>ng-conf 2016 default short date: {{ ngConf | date }}</div>   <div id="ngConf">ng-conf 2016 with full date format: {{ ngConf | date:'fullDate' }}</div> </div> </body> </html> ******************************************INDEX.HTML*********************...
Post a Comment
Read more

Tutorial 18.2 Directive Decorator Example

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-decorator-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="urlDecorator">   <div ng-controller="Ctrl">   <a ng-href="/products/{{ id }}/view" id="id3">View Product {{ id }}</a>   - <strong>id === 3</strong>, so no warning<br>   <a ng-href="/products/{{ id + 5 }}/view" id="id8">View Product {{ id + 5 }}</a>   - <strong>id + 5 === 8</strong>, so no warning<br>   <a ng-href="/products/{{ someOtherId }}/view" id=...
Post a Comment
Read more

Tutorial 18.1 Service Decorator Example

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-service-decorator-production</title>   <link href="style.css" rel="stylesheet" type="text/css">     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="myServiceDecorator">   <div ng-controller="Ctrl">   <h1>Logs</h1>   <my-log></my-log> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (functio...
Post a Comment
Read more

Tutorial 16.1 HTML Compiler example

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-draggable-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="drag">   <span draggable>Drag ME</span> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; angular.module('drag', []).   directive('draggable', function($document) {     return function(scope, element, attr) {       var startX ...
Post a Comment
Read more

Tutorial 15.2 Sample Design

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-module-suggested-layout-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="xmpl">   <div ng-controller="XmplController">   {{ greeting }} </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; angular.module('xmpl.service', [])   .value('greeter', {     salutation: 'Hel...
Post a Comment
Read more

Tutorial 15.1 Basic Module

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-module-hello-world-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body >   <div ng-app="myApp">   <div>     {{ 'World' | greet }}   </div> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; // declare a module var myAppModule = angular.module('myApp', []); // configure the ...
Post a Comment
Read more

Tutorial 14.2 Class and Ngclass Animation Hooks

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-animate-css-class-production</title>   <link href="style.css" rel="stylesheet" type="text/css">     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>     </head> <body ng-app="ngAnimate">   <p>   <button ng-click="myCssVar='css-class'">Set</button>   <button ng-click="myCssVar=''">Clear</button>   <br>   <span ng-class="myCssVar">CSS-Animated Text</span> </p> </body> </html> *********************************...
Post a Comment
Read more

Tutorial 14.1 Basic Example of Animation

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-animate-ng-show-production</title>   <link href="animations.css" rel="stylesheet" type="text/css">     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>     </head> <body ng-app="ngAnimate">   <div ng-init="checked = true">   <label>     <input type="checkbox" ng-model="checked" />     Is visible   </label>   <div class="content-area sample-show-hide" ng-show="checked">     Content...   </div> </div> </body> </html>...
Post a Comment
Read more

Tutorial 13.3 Components as route templates

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-component-tabs-pane-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsTabsExample">   <my-tabs>   <my-pane title="Hello">     <h4>Hello</h4>     <p>Lorem ipsum dolor sit amet</p>   </my-pane>   <my-pane title="World">     <h4>World</h4>     <em>Mauris elementum elementum enim at suscipit.</em>     <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>   </my-pane> </my-tabs...
Post a Comment
Read more

Tutorial 13.2 Component Tree

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-heroComponentTree-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="index.js"></script>   <script src="heroList.js"></script>   <script src="heroDetail.js"></script>   <script src="editableField.js"></script>     </head> <body ng-app="heroApp">   <hero-list></hero-list> </body> </html> ********************************************index.js*************************************************** (function(angular) {   'use strict'; angular.module('heroApp', []); })(window.angular); *********...
Post a Comment
Read more

Tutorial 13.1 Creating and Configuring component

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-heroComponentSimple-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="index.js"></script>   <script src="heroDetail.js"></script>     </head> <body ng-app="heroApp">   <!-- components match only elements --> <div ng-controller="MainCtrl as ctrl">   <b>Hero</b><br>   <hero-detail hero="ctrl.hero"></hero-detail> </div> </body> </html> ********************************************index.js*************************************************** (function(angular) {   'use strict'; angular.m...
Post a Comment
Read more

Tutorial 12.12 Creating a Directive that Wraps Other Elements 3

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclusion-scope-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsIsoFnBindExample">   <div ng-controller="Controller">   {{message}}   <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">     Check out the contents, {{name}}!   </my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*****************************...
Post a Comment
Read more

Tutorial 12.14 Creating Directives that Communicate

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-tabs-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsTabsExample">   <my-tabs>   <my-pane title="Hello">     <p>Lorem ipsum dolor sit amet</p>   </my-pane>   <my-pane title="World">     <em>Mauris elementum elementum enim at suscipit.</em>     <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>   </my-pane> </my-tabs> </body> </html> ******************************************INDEX.HTML**...
Post a Comment
Read more

Tutorial 12.13 Creating a Directive that Adds Event Listeners

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-drag-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="dragModule">   <span my-draggable>Drag Me</span> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; angular.module('dragModule', [])   .directive('myDraggable', ['$document', function($document) {     return {      ...
Post a Comment
Read more

Tutorial 12.11 Creating a Directive that Wraps Other Elements 2

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclusion-production</title>   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script> </head> <body ng-app="docsTransclusionExample">   <div ng-controller="Controller">   <my-dialog>Check out the contents, {{name}}!</my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; angular.module('docsTransclusionEx...
Post a Comment
Read more

Tutorial 12.10 Creating a Directive that Wraps Other Elements 1

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclude-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsTransclusionDirective">   <div ng-controller="Controller">   <my-dialog>Check out the contents, {{name}}!</my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*************************************************** (function(angular) {   'use strict'; angular.module('docsTransclus...
Post a Comment
Read more