Skip to content

Instantly share code, notes, and snippets.

@yitsushi
Last active August 29, 2015 13:57
Show Gist options
  • Save yitsushi/9507496 to your computer and use it in GitHub Desktop.
Save yitsushi/9507496 to your computer and use it in GitHub Desktop.
var Application = {
angular: null,
Controllers: {}
};
Application.angular = angular.module('SampleGruntProject', []);
@import "base.less";
@import "libs/main.less";
@import "modules/main.less";
html, body {
font: 12px Arial;
}
(function(C) {
var addSite = function(url) {
};
C.DialerController = function($scope) {
$scope.items = [
{ id: 1, title: "Contacts", target: "https://www.google.com/contacts/" },
{ id: 2, title: "Emails", target: "https://mail.google.com/" },
{ id: 3, title: "Google+", target: "https://plus.google.com/" },
{ id: 4, title: "Google Play", target: "https://play.google.com/store" },
{ id: 4, title: "Chrome Store", target: "https://chrome.google.com/webstore" }
];
}
C.DialerController.$inject = ["$scope"];
})(Application.Controllers);
var grunt = require('grunt');
grunt.loadNpmTasks('grunt-devtools');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:MM:ss") %> */\n'
},
build: {
src: ['src/js/vendors/*.js', 'src/js/*.js', 'src/js/controllers/*.js'],
dest: 'static/js/<%= pkg.name %>App.min.js'
}
},
copy: {
main: {
files: [
{expand: true, cwd: 'src/templates/', src: ['**'], dest: 'static/templates/'}
]
}
},
less: {
development: {
options: {
compress: true
},
files: {
'static/css/app.css': 'src/less/app.less'
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less', 'uglify', 'copy']);
<!DOCTYPE HTML>
<html lang="en" ng-app="SampleGruntProject">
<head>
<meta charset="UTF-8">
<title>SampleGruntProject</title>
<link rel="stylesheet" href="/static/css/app.css">
</head>
<body>
<div ng-view></div>
<script type="text/javascript"
charset="utf-8"
src="/static/js/SampleGruntProjectApp.min.js"></script>
</body>
</html>
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
@import "helpers.less";
.dialer {
width: 50%;
border: 1px solid #ddd;
padding: 10px;
margin: 0 auto;
.rounded-corners(5px);
ul {
list-style: none;
margin: 0;
padding: 0;
li {
width: 300px;
border-left: 3px solid transparent;
padding: 3px;
cursor: pointer;
&:hover {
border-left-color: #a00;
}
}
}
}
@import "dialer/main.less";
{
"name": "SampleGruntProject",
"version": "0.0.1",
"description": "Sample Grunt Project",
"dependencies": {},
"devDependencies": {
"grunt-devtools": "~0.1.0-7",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-less": "~0.5.1"
},
"author": "Balazs Nadasdi <[email protected]>",
"license": "BSD"
}
(function(Angular) {
var templatePrefix = "static/templates";
Angular.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { templateUrl: templatePrefix + "/Dialer.html",
controller: Application.Controllers.DialerController
})
.otherwise({redirectTo: '/'});
}]);
})(Application.angular);
<div class="dialer">
<ul>
<li ng-repeat="item in items" data-id="{{item.id}}">{{item.title}}</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment