From 6cf723eabead00bc8095f88f1b211f555e4b0730 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Sat, 30 May 2015 14:06:40 +0900 Subject: [PATCH] add edit modal & fix some features --- build.config.js | 5 + package.json | 1 + src/app.js | 2 + src/config/ace.js | 740 +------------------------ src/directives/btn-edit-snippet.js | 18 + src/directives/btn-new-snippet.js | 1 + src/directives/side-nav.tpl.html | 2 +- src/filters/from-now.js | 7 + src/index.html | 1 + src/modals/edit-snippet-modal.js | 63 +++ src/modals/edit-snippet-modal.tpl.html | 47 ++ src/modals/new-snippet-modal.js | 3 +- src/modals/new-snippet-modal.tpl.html | 8 +- src/services/snippet.js | 9 +- src/states/snippets/detail.js | 1 - src/states/snippets/detail.tpl.html | 15 +- src/states/snippets/list.js | 32 +- src/states/snippets/list.tpl.html | 14 +- src/states/snippets/snippets.scss | 36 +- src/states/states.js | 6 +- 20 files changed, 241 insertions(+), 770 deletions(-) create mode 100644 src/directives/btn-edit-snippet.js create mode 100644 src/filters/from-now.js create mode 100644 src/modals/edit-snippet-modal.js create mode 100644 src/modals/edit-snippet-modal.tpl.html diff --git a/build.config.js b/build.config.js index 7357c923..4d42660a 100644 --- a/build.config.js +++ b/build.config.js @@ -39,6 +39,11 @@ module.exports = { name:'angular-md5', src:'node_modules/angular-md5/angular-md5.js', cdn:'https://raw.githubusercontent.com/gdi2290/angular-md5/v0.1.7/angular-md5.min.js' + }, + { + name:'moment', + src:'node_modules/moment/moment.js', + cdn:'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js' } ] } diff --git a/package.json b/package.json index 0e44d29e..4d343b01 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "angular-sanitize": "^1.3.15", "angular-ui-router": "^0.2.15", "font-awesome": "^4.3.0", + "moment": "^2.10.3", "satellizer": "^0.10.1", "ui-select": "^0.11.2" }, diff --git a/src/app.js b/src/app.js index 79fc485a..41a5cdb8 100644 --- a/src/app.js +++ b/src/app.js @@ -10,12 +10,14 @@ angular.module('codexen', [ 'templates', 'codexen.config', 'codexen.directives', + 'codexen.filters', 'codexen.modals', 'codexen.services', 'codexen.states']) angular.module('templates', []) angular.module('codexen.config', []) angular.module('codexen.directives', []) +angular.module('codexen.filters', []) angular.module('codexen.modals', []) angular.module('codexen.services', []) angular.module('codexen.states', []) diff --git a/src/config/ace.js b/src/config/ace.js index d2f6ff6c..49cab275 100644 --- a/src/config/ace.js +++ b/src/config/ace.js @@ -1,740 +1,2 @@ angular.module('codexen.config') - .constant('aceModes', [{ - "name": "ABAP", - "mode": [ - "abap" - ] - }, - { - "name": "ABC", - "mode": [ - "abc" - ] - }, - { - "name": "ActionScript", - "mode": [ - "as" - ] - }, - { - "name": "ADA", - "mode": [ - "ada|adb" - ] - }, - { - "name": "Apache_Conf", - "mode": [ - "^htaccess|^htgroups|^htpasswd|^conf|htaccess|htgroups|htpasswd" - ] - }, - { - "name": "AsciiDoc", - "mode": [ - "asciidoc|adoc" - ] - }, - { - "name": "Assembly_x86", - "mode": [ - "asm" - ] - }, - { - "name": "AutoHotKey", - "mode": [ - "ahk" - ] - }, - { - "name": "BatchFile", - "mode": [ - "bat|cmd" - ] - }, - { - "name": "C9Search", - "mode": [ - "c9search_results" - ] - }, - { - "name": "C_Cpp", - "mode": [ - "cpp|c|cc|cxx|h|hh|hpp" - ] - }, - { - "name": "Cirru", - "mode": [ - "cirru|cr" - ] - }, - { - "name": "Clojure", - "mode": [ - "clj|cljs" - ] - }, - { - "name": "Cobol", - "mode": [ - "CBL|COB" - ] - }, - { - "name": "coffee", - "mode": [ - "coffee|cf|cson|^Cakefile" - ] - }, - { - "name": "ColdFusion", - "mode": [ - "cfm" - ] - }, - { - "name": "CSharp", - "mode": [ - "cs" - ] - }, - { - "name": "CSS", - "mode": [ - "css" - ] - }, - { - "name": "Curly", - "mode": [ - "curly" - ] - }, - { - "name": "D", - "mode": [ - "d|di" - ] - }, - { - "name": "Dart", - "mode": [ - "dart" - ] - }, - { - "name": "Diff", - "mode": [ - "diff|patch" - ] - }, - { - "name": "Dockerfile", - "mode": [ - "^Dockerfile" - ] - }, - { - "name": "Dot", - "mode": [ - "dot" - ] - }, - { - "name": "Dummy", - "mode": [ - "dummy" - ] - }, - { - "name": "DummySyntax", - "mode": [ - "dummy" - ] - }, - { - "name": "Eiffel", - "mode": [ - "e" - ] - }, - { - "name": "EJS", - "mode": [ - "ejs" - ] - }, - { - "name": "Elixir", - "mode": [ - "ex|exs" - ] - }, - { - "name": "Elm", - "mode": [ - "elm" - ] - }, - { - "name": "Erlang", - "mode": [ - "erl|hrl" - ] - }, - { - "name": "Forth", - "mode": [ - "frt|fs|ldr" - ] - }, - { - "name": "FTL", - "mode": [ - "ftl" - ] - }, - { - "name": "Gcode", - "mode": [ - "gcode" - ] - }, - { - "name": "Gherkin", - "mode": [ - "feature" - ] - }, - { - "name": "Gitignore", - "mode": [ - "^.gitignore" - ] - }, - { - "name": "Glsl", - "mode": [ - "glsl|frag|vert" - ] - }, - { - "name": "golang", - "mode": [ - "go" - ] - }, - { - "name": "Groovy", - "mode": [ - "groovy" - ] - }, - { - "name": "HAML", - "mode": [ - "haml" - ] - }, - { - "name": "Handlebars", - "mode": [ - "hbs|handlebars|tpl|mustache" - ] - }, - { - "name": "Haskell", - "mode": [ - "hs" - ] - }, - { - "name": "haXe", - "mode": [ - "hx" - ] - }, - { - "name": "HTML", - "mode": [ - "html|htm|xhtml" - ] - }, - { - "name": "HTML_Ruby", - "mode": [ - "erb|rhtml|html.erb" - ] - }, - { - "name": "INI", - "mode": [ - "ini|conf|cfg|prefs" - ] - }, - { - "name": "Io", - "mode": [ - "io" - ] - }, - { - "name": "Jack", - "mode": [ - "jack" - ] - }, - { - "name": "Jade", - "mode": [ - "jade" - ] - }, - { - "name": "Java", - "mode": [ - "java" - ] - }, - { - "name": "JavaScript", - "mode": [ - "js|jsm" - ] - }, - { - "name": "JSON", - "mode": [ - "json" - ] - }, - { - "name": "JSONiq", - "mode": [ - "jq" - ] - }, - { - "name": "JSP", - "mode": [ - "jsp" - ] - }, - { - "name": "JSX", - "mode": [ - "jsx" - ] - }, - { - "name": "Julia", - "mode": [ - "jl" - ] - }, - { - "name": "LaTeX", - "mode": [ - "tex|latex|ltx|bib" - ] - }, - { - "name": "Lean", - "mode": [ - "lean|hlean" - ] - }, - { - "name": "LESS", - "mode": [ - "less" - ] - }, - { - "name": "Liquid", - "mode": [ - "liquid" - ] - }, - { - "name": "Lisp", - "mode": [ - "lisp" - ] - }, - { - "name": "LiveScript", - "mode": [ - "ls" - ] - }, - { - "name": "LogiQL", - "mode": [ - "logic|lql" - ] - }, - { - "name": "LSL", - "mode": [ - "lsl" - ] - }, - { - "name": "Lua", - "mode": [ - "lua" - ] - }, - { - "name": "LuaPage", - "mode": [ - "lp" - ] - }, - { - "name": "Lucene", - "mode": [ - "lucene" - ] - }, - { - "name": "Makefile", - "mode": [ - "^Makefile|^GNUmakefile|^makefile|^OCamlMakefile|make" - ] - }, - { - "name": "Markdown", - "mode": [ - "md|markdown" - ] - }, - { - "name": "Mask", - "mode": [ - "mask" - ] - }, - { - "name": "MATLAB", - "mode": [ - "matlab" - ] - }, - { - "name": "MEL", - "mode": [ - "mel" - ] - }, - { - "name": "MUSHCode", - "mode": [ - "mc|mush" - ] - }, - { - "name": "MySQL", - "mode": [ - "mysql" - ] - }, - { - "name": "Nix", - "mode": [ - "nix" - ] - }, - { - "name": "ObjectiveC", - "mode": [ - "m|mm" - ] - }, - { - "name": "OCaml", - "mode": [ - "ml|mli" - ] - }, - { - "name": "Pascal", - "mode": [ - "pas|p" - ] - }, - { - "name": "Perl", - "mode": [ - "pl|pm" - ] - }, - { - "name": "pgSQL", - "mode": [ - "pgsql" - ] - }, - { - "name": "PHP", - "mode": [ - "php|phtml" - ] - }, - { - "name": "Powershell", - "mode": [ - "ps1" - ] - }, - { - "name": "Praat", - "mode": [ - "praat|praatscript|psc|proc" - ] - }, - { - "name": "Prolog", - "mode": [ - "plg|prolog" - ] - }, - { - "name": "Properties", - "mode": [ - "properties" - ] - }, - { - "name": "Protobuf", - "mode": [ - "proto" - ] - }, - { - "name": "Python", - "mode": [ - "py" - ] - }, - { - "name": "R", - "mode": [ - "r" - ] - }, - { - "name": "RDoc", - "mode": [ - "Rd" - ] - }, - { - "name": "RHTML", - "mode": [ - "Rhtml" - ] - }, - { - "name": "Ruby", - "mode": [ - "rb|ru|gemspec|rake|^Guardfile|^Rakefile|^Gemfile" - ] - }, - { - "name": "Rust", - "mode": [ - "rs" - ] - }, - { - "name": "SASS", - "mode": [ - "sass" - ] - }, - { - "name": "SCAD", - "mode": [ - "scad" - ] - }, - { - "name": "Scala", - "mode": [ - "scala" - ] - }, - { - "name": "Scheme", - "mode": [ - "scm|rkt" - ] - }, - { - "name": "SCSS", - "mode": [ - "scss" - ] - }, - { - "name": "SH", - "mode": [ - "sh|bash|^.bashrc" - ] - }, - { - "name": "SJS", - "mode": [ - "sjs" - ] - }, - { - "name": "Smarty", - "mode": [ - "smarty|tpl" - ] - }, - { - "name": "snippets", - "mode": [ - "snippets" - ] - }, - { - "name": "Soy_Template", - "mode": [ - "soy" - ] - }, - { - "name": "Space", - "mode": [ - "space" - ] - }, - { - "name": "SQL", - "mode": [ - "sql" - ] - }, - { - "name": "SQLServer", - "mode": [ - "sqlserver" - ] - }, - { - "name": "Stylus", - "mode": [ - "styl|stylus" - ] - }, - { - "name": "SVG", - "mode": [ - "svg" - ] - }, - { - "name": "Tcl", - "mode": [ - "tcl" - ] - }, - { - "name": "Tex", - "mode": [ - "tex" - ] - }, - { - "name": "Text", - "mode": [ - "txt" - ] - }, - { - "name": "Textile", - "mode": [ - "textile" - ] - }, - { - "name": "Toml", - "mode": [ - "toml" - ] - }, - { - "name": "Twig", - "mode": [ - "twig" - ] - }, - { - "name": "Typescript", - "mode": [ - "ts|typescript|str" - ] - }, - { - "name": "Vala", - "mode": [ - "vala" - ] - }, - { - "name": "VBScript", - "mode": [ - "vbs|vb" - ] - }, - { - "name": "Velocity", - "mode": [ - "vm" - ] - }, - { - "name": "Verilog", - "mode": [ - "v|vh|sv|svh" - ] - }, - { - "name": "VHDL", - "mode": [ - "vhd|vhdl" - ] - }, - { - "name": "XML", - "mode": [ - "xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl|xaml" - ] - }, - { - "name": "XQuery", - "mode": [ - "xq" - ] - }, - { - "name": "YAML", - "mode": [ - "yaml|yml" - ] - }, - { - "name": "Django", - "mode": [ - "html" - ] - } -]) +.constant('aceModes', ["ABAP","ABC","ActionScript","ADA","Apache_Conf","AsciiDoc","Assembly_x86","AutoHotKey","BatchFile","C9Search","C_Cpp","Cirru","Clojure","Cobol","coffee","ColdFusion","CSharp","CSS","Curly","D","Dart","Diff","Dockerfile","Dot","Dummy","DummySyntax","Eiffel","EJS","Elixir","Elm","Erlang","Forth","FTL","Gcode","Gherkin","Gitignore","Glsl","golang","Groovy","HAML","Handlebars","Haskell","haXe","HTML","HTML_Ruby","INI","Io","Jack","Jade","Java","JavaScript","JSON","JSONiq","JSP","JSX","Julia","LaTeX","Lean","LESS","Liquid","Lisp","LiveScript","LogiQL","LSL","Lua","LuaPage","Lucene","Makefile","Markdown","Mask","MATLAB","MEL","MUSHCode","MySQL","Nix","ObjectiveC","OCaml","Pascal","Perl","pgSQL","PHP","Powershell","Praat","Prolog","Properties","Protobuf","Python","R","RDoc","RHTML","Ruby","Rust","SASS","SCAD","Scala","Scheme","SCSS","SH","SJS","Smarty","snippets","Soy_Template","Space","SQL","SQLServer","Stylus","SVG","Tcl","Tex","Text","Textile","Toml","Twig","Typescript","Vala","VBScript","Velocity","Verilog","VHDL","XML","XQuery","YAML","Django"]) diff --git a/src/directives/btn-edit-snippet.js b/src/directives/btn-edit-snippet.js new file mode 100644 index 00000000..597bc13e --- /dev/null +++ b/src/directives/btn-edit-snippet.js @@ -0,0 +1,18 @@ +angular.module('codexen.directives') + .directive('btnEditSnippet', function (editSnippetModal, $rootScope) { + return { + scope:{ + snippet: '=btnEditSnippet' + }, + link: function (scope, el) { + el.on('click', function () { + editSnippetModal.open(scope.snippet) + .result.then(function (snippet) { + $rootScope.$broadcast('snippetUpdated', snippet) + }, function () { + console.log('edit snippet modal dismissed') + }) + }) + } + } + }) diff --git a/src/directives/btn-new-snippet.js b/src/directives/btn-new-snippet.js index 1ac90b84..347d5482 100644 --- a/src/directives/btn-new-snippet.js +++ b/src/directives/btn-new-snippet.js @@ -5,6 +5,7 @@ angular.module('codexen.directives') el.on('click', function () { newSnippetModal.open() .result.then(function (snippet) { + console.log('event fire', snippet) $rootScope.$broadcast('snippetUpdated', snippet) }, function () { console.log('new snippet modal dismissed') diff --git a/src/directives/side-nav.tpl.html b/src/directives/side-nav.tpl.html index 4763d15a..1adaa2a9 100644 --- a/src/directives/side-nav.tpl.html +++ b/src/directives/side-nav.tpl.html @@ -32,7 +32,7 @@ Snippets
  • - Clips + Clips(ready)
  • diff --git a/src/filters/from-now.js b/src/filters/from-now.js new file mode 100644 index 00000000..a0d9b890 --- /dev/null +++ b/src/filters/from-now.js @@ -0,0 +1,7 @@ +/* global angular */ +angular.module('codexen.filters') +.filter('fromNow', function() { + return function(input) { + return moment(input).fromNow() + } +}) diff --git a/src/index.html b/src/index.html index 73b43295..98617a69 100644 --- a/src/index.html +++ b/src/index.html @@ -30,6 +30,7 @@ + <% scripts.forEach(function(script){ %> diff --git a/src/modals/edit-snippet-modal.js b/src/modals/edit-snippet-modal.js new file mode 100644 index 00000000..54665290 --- /dev/null +++ b/src/modals/edit-snippet-modal.js @@ -0,0 +1,63 @@ +angular.module('codexen.modals') + .factory('editSnippetModal', function ($modal) { + var open = function (snippet) { + return $modal.open({ + resolve:{ + snippet: function () { + return snippet + } + }, + templateUrl:'modals/edit-snippet-modal.tpl.html', + controller:'EditSnippetModalController as vm' + }) + } + + return { + open: open + } + }) + .controller('EditSnippetModalController', function ($modalInstance, aceModes, $log, Snippet, $rootScope, Tag, snippet){ + var vm = this + + vm.aceModes = aceModes + vm.snippet = snippet + console.log(snippet) + + vm.submit = function () { + console.log('mode: ',vm.snippet.mode) + var params = { + description: vm.snippet.description, + callSign: vm.snippet.callSign, + mode: vm.snippet.mode==null?null:vm.snippet.mode.toLowerCase(), + content: vm.snippet.content, + tags: angular.isArray(vm.snippet.tags)?vm.snippet.tags.map(function (tag) { return {_id: tag._id, name: tag.name} }):[] + } + + Snippet.update(vm.snippet._id, params) + .success(function (data) { + $modalInstance.close(data.snippet) + console.log('snippet created!', data) + }) + } + + // vm.tags = [] + vm.tagCandidates = [] + vm.refreshTagCandidates = function (tagName) { + if (tagName == null || tagName == '') return null + return Tag.findByName(tagName) + .success(function (data) { + console.log('tags fetched!!', data) + vm.tagCandidates = data.tags + }) + } + vm.transform = function (tagName) { + return { + _id:0, + name:tagName + } + } + + vm.cancel = function () { + $modalInstance.dismiss() + } + }) diff --git a/src/modals/edit-snippet-modal.tpl.html b/src/modals/edit-snippet-modal.tpl.html new file mode 100644 index 00000000..288734ec --- /dev/null +++ b/src/modals/edit-snippet-modal.tpl.html @@ -0,0 +1,47 @@ +
    +
    + New Snippet +
    + +
    +
    + +
    +
    + + + + {{$select.selected}} + +
    +     +     +
    + +
    +
    +
    + +
    + + {{$item.name}} + +
    (new)
    +     +     +
    + +
    + +
    + + +
    +
    diff --git a/src/modals/new-snippet-modal.js b/src/modals/new-snippet-modal.js index 28b18bb6..8387e1cf 100644 --- a/src/modals/new-snippet-modal.js +++ b/src/modals/new-snippet-modal.js @@ -20,7 +20,7 @@ angular.module('codexen.modals') var params = { description: vm.description, callSign: vm.callSign, - mode: vm.mode==null?null:vm.mode.name.toLowerCase(), + mode: vm.mode==null?null:vm.mode.toLowerCase(), content: vm.content, tags: angular.isArray(vm.tags)?vm.tags.map(function (tag) { return {_id: tag._id, name: tag.name} }):[] } @@ -28,7 +28,6 @@ angular.module('codexen.modals') Snippet.create(params) .success(function(data){ $modalInstance.close(data.snippet) - console.log('snippet created!', data) }) } diff --git a/src/modals/new-snippet-modal.tpl.html b/src/modals/new-snippet-modal.tpl.html index aa810d8b..4f8df397 100644 --- a/src/modals/new-snippet-modal.tpl.html +++ b/src/modals/new-snippet-modal.tpl.html @@ -11,9 +11,9 @@ - {{$select.selected.name}} - -
    + {{$select.selected}} + +
    @@ -21,7 +21,7 @@
    - call sign : + + + + - +
    @@ -18,17 +21,17 @@

    -
    + }" + readonly + ng-model="vm.snippet.content">
    diff --git a/src/states/snippets/list.js b/src/states/snippets/list.js index 5b650332..c184d033 100644 --- a/src/states/snippets/list.js +++ b/src/states/snippets/list.js @@ -1,11 +1,11 @@ /* global angular */ angular.module('codexen.states') - .controller('SnippetsListController', function ($auth, Snippet, $scope) { + .controller('SnippetsListController', function ($auth, Snippet, $scope, $state) { var vm = this vm.isLoaded = false - var laodSnippets = function () { + var loadSnippets = function () { if ($auth.isAuthenticated) { console.log($auth.getPayload()) var userId = $auth.getPayload().sub @@ -23,22 +23,38 @@ angular.module('codexen.states') } } - laodSnippets() + loadSnippets() $scope.$on('userSignIn', function () { - laodSnippets() + loadSnippets() }) $scope.$on('userSignOut', function () { - laodSnippets() + loadSnippets() }) - $scope.$on('snippetUpdated', function () { - laodSnippets() + $scope.$on('snippetUpdated', function (e, snippet) { + $state.go('snippets.detail', {id: snippet._id}) + loadSnippets() }) $scope.$on('snippetDeleted', function () { - laodSnippets() + if ($state.is('snippets.detail')) { + var currentSnippetId = $state.params.id + for (var i = 0; i < vm.snippets.length; i++) { + if (vm.snippets[i]._id === currentSnippetId) { + var targetSnippet = null + + if (i === 0) targetSnippet = vm.snippets[i+1] + else targetSnippet = vm.snippets[i-1] + + console.log('target', targetSnippet) + $state.go('snippets.detail', {id: targetSnippet._id}) + break + } + } + } + loadSnippets() }) }) diff --git a/src/states/snippets/list.tpl.html b/src/states/snippets/list.tpl.html index 1cfdad65..2b995019 100644 --- a/src/states/snippets/list.tpl.html +++ b/src/states/snippets/list.tpl.html @@ -1,6 +1,9 @@
    +
    + +
    • @@ -23,14 +26,19 @@ Sign In
      • -
    • +
    • -

      -

      created at

      +

      +

      +

      +

      +

      + +

      diff --git a/src/states/snippets/snippets.scss b/src/states/snippets/snippets.scss index 62754ad3..6a640539 100644 --- a/src/states/snippets/snippets.scss +++ b/src/states/snippets/snippets.scss @@ -7,6 +7,8 @@ $left-pane-width: 275px; $pane-border-color: $border-color; $snippet-list-border-color: $border-color; $snippet-list-item-hover-bg: #EEE; +$snippet-list-active-color: white; +$snippet-list-active-bg: $brand-primary; .snippets-list-state{ position: absolute; @@ -20,13 +22,29 @@ $snippet-list-item-hover-bg: #EEE; bottom: 0; left: 0; width: $left-pane-width; - overflow-x: hidden; - overflow-y: auto; + overflow:hidden; border-right: solid 1px $pane-border-color; + .snippet-search{ + position: absolute; + top: 0; + height: 50px; + left: 0; + right: 0; + border-bottom: solid 1px $snippet-list-border-color; + padding: 7px 5px; + } .snippet-list{ + position: absolute; + top: 50px; + bottom: 0; + left: 0; + right: 0; + overflow-x: hidden; + overflow-y: auto; list-style: none; padding: 0; li{ + cursor: pointer; padding: 5px; border-bottom: solid 1px $snippet-list-border-color; h4{ @@ -38,6 +56,20 @@ $snippet-list-item-hover-bg: #EEE; p{ margin:0; } + p.call-sign{ + font-size:0.8em; + } + p.created-at{ + font-size:0.8em; + opacity: 0.8; + } + &.active{ + color: $snippet-list-active-color; + background-color: $snippet-list-active-bg; + a{ + color: white; + } + } } } } diff --git a/src/states/states.js b/src/states/states.js index 43819466..c10db336 100644 --- a/src/states/states.js +++ b/src/states/states.js @@ -1,6 +1,6 @@ /* global angular */ angular.module('codexen.states') - .config(function($stateProvider, $urlRouterProvider){ + .config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider .when('/auth', '/auth/register') .when('/auth/', '/auth/register') @@ -10,7 +10,7 @@ angular.module('codexen.states') /* Auth */ .state('auth', { url: '/auth', - views:{ + views: { 'main-view': { templateUrl: 'states/auth/auth.tpl.html' } @@ -30,7 +30,7 @@ angular.module('codexen.states') /* Snippets */ .state('snippets', { url: '/snippets', - views:{ + views: { 'main-view': { templateUrl: 'states/snippets/list.tpl.html', controller: 'SnippetsListController as vm'