Skip to content

Instantly share code, notes, and snippets.

@afknapping

afknapping/app.js

Last active December 24, 2015 12:49
Show Gist options
  • Save afknapping/6800588 to your computer and use it in GitHub Desktop.
Save afknapping/6800588 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
'use strict';
angular.module('tempApp', ['ui'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Raw
gistfile1.js
TypeError: Object [object Object] has no method 'sortable'
at link (http://localhost:9000/bower_components/angular-ui/build/angular-ui.js:1188:17)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4582:13)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4191:15)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4194:13)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:4096:30)
at update (http://localhost:9000/bower_components/angular/angular.js:14513:11)
at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
at http://localhost:9000/bower_components/angular/angular.js:7614:26
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) <div ui-sortable="">
Raw
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.css">
<!-- endbuild -->
</head>
<body ng-app="tempApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui/build/angular-ui.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
Raw
main.html
<div class="hero-unit">
<h2>My Todos</h2>
<div ui-sortable>
<p ng-repeat="todo in todos">
<input type="text" ng-model="todo">
<a class="btn" ng-click="removeTodo($index)">X</a>
</p>
</div>
<form ng-submit="addTodo()">
<div class="controls form-inline">
<input type="text" ng-model="todo" size="20">
<input type="submit" class="btn btn-primary" value="Add">
</div>
</form>
</div>
Raw
main.js
'use strict';
angular.module('tempApp')
.controller('MainCtrl', function ($scope) {
$scope.todos = [
'Item1',
'Item2',
'Item3'
];
$scope.addTodo = function() {
$scope.todos.push($scope.todo);
$scope.todo = '';
}
$scope.removeTodo = function(index) {
$scope.todos.splice(index, 1);
}
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'and whoa'
];
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment