Posts

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