AngularJS tutorial app
How do I make an angularjs tutorial app?
Via http://angularjs.de/artikel/angularjs-tutorial-deutsch. What is a angularjs tutorial app? How do you make a angularjs tutorial app? This script and codes were developed by Christian Fleschhut on 11 August 2022, Thursday.
AngularJS tutorial app - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS tutorial app</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div ng-app='tutorialApp'> <div class='page-header'> <h2> AngularJS Demo </h2> </div> <ul class='nav nav-tabs'> <li ng-class='{ active: true }'> <a href='#/'> Order now! </a> </li> <li ng-class='{ active: false }'> <a href='#/about'> About </a> </li> </ul> <div ng-view></div> <h3>Products</h3> <form> <div class='form-group'> <label> Search: </label> <input class='form-control' ng-model='search' type='search'> <span class='help-block' ng-show='search'> Suchbegriff: {{search}} </span> </div> </form> <table class='table' ng-controller='ArticlesCtrl'> <tr ng-repeat='article in articles | filter:search'> <td> {{article.id}} </td> <td> {{article.name}} </td> <td> <price value='article.price'></price> </td> <td> <button class='btn btn-default btn-block btn-sm' ng-click='cart.addArticle(article)'> <i class='glyphicon glyphicon-plus-sign'></i> Add </button> </td> </tr> </table> <div ng-controller='CartCtrl'> <h3> Cart </h3> <div class='alert alert-warning' ng-hide='cart.getItems().length'> Your cart is currently empty. </div> <table class='table table-condensed' ng-show='cart.getItems().length'> <tbody> <tr class='cart-item' ng-repeat='item in cart.getItems() track by $index'> <td> {{item.name}} </td> <td> {{item.price | currency}} </td> <td class='text-right'> <button class='btn btn-default btn-xs' ng-click='cart.removeArticle($index)'> <i class='glyphicon glyphicon-trash'></i> Remove </button> </td> </tr> </tbody> <tfoot> <tr> <th> {{cart.getItems().length}} Product(s) </th> <th> {{cart.sum() | currency}} </th> <th> </th> </tr> </tfoot> </table> </div> </div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js'></script> <script src="js/index.js"></script>
</body>
</html>
AngularJS tutorial app - Script Codes CSS Codes
.cart-item.ng-enter { -webkit-transition: background-color 600ms ease-in-out; -moz-transition: background-color 600ms ease-in-out; transition: background-color 600ms ease-in-out; background: #dfd;
}
.cart-item.ng-enter-active { background: none;
}
AngularJS tutorial app - Script Codes JS Codes
(function() { var app; app = angular.module('tutorialApp', ['ngAnimate', 'ngRoute']); app.config(function($routeProvider) { return $routeProvider.when('/', { template: 'index' }).when('/about', { template: 'about' }).otherwise({ redirectTo: '/' }); }); app.directive('price', function() { return { restrict: 'E', scope: { value: '=' }, template: '<span ng-show="value == 0">kostenlos</span><span ng-show="value > 0">{{value | currency}}</span>' }; }); app.factory('Cart', function() { var items; items = []; return { getItems: function() { return items; }, addArticle: function(article) { return items.push(article); }, removeArticle: function(itemIndex) { return items.splice(itemIndex, 1); }, sum: function() { return items.reduce(function(total, article) { return total + article.price; }, 0); } }; }); app.controller('ArticlesCtrl', function($scope, $http, Cart) { $scope.cart = Cart; return $http.get('http://codepen.io/cfleschhut/pen/FryBG.js').then(function(response) { return $scope.articles = response.data; }); }); app.controller('CartCtrl', function($scope, Cart) { return $scope.cart = Cart; });
}).call(this);
Developer | Christian Fleschhut |
Username | cfleschhut |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 4,565 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS3 loading spinner | 2,950 Kb |
Backbone.js Playground | 2,812 Kb |
Playing with firebase | 3,175 Kb |
Givie.io Logo in CSS | 2,552 Kb |
Hello Backbone.js | 3,017 Kb |
Vertical Tab Component | 3,878 Kb |
Starting out with Ember.JS | 4,808 Kb |
Sass random fn | 4,849 Kb |
CodeSchool Powering Up with React | 7,420 Kb |
AngularJS comments form | 3,280 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Wikipedia API | Coderpilot | 2,802 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Em Test | Rodesco | 1,784 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!