From 1c16084a29dde0b2eea4955ee23d109313e8bc99 Mon Sep 17 00:00:00 2001 From: Weiwei SUN Date: Sun, 8 Mar 2015 22:43:03 +0800 Subject: [PATCH 1/5] using angular-ui-router --- .gitignore | 3 +++ bower.json | 2 +- package.json | 3 +-- public/index.html | 11 +++++---- public/js/app.js | 2 +- public/js/appRoutes.js | 38 +++++++++++++++---------------- public/js/controllers/GeekCtrl.js | 5 ++-- public/js/controllers/MainCtrl.js | 5 ++-- public/js/controllers/NerdCtrl.js | 5 ++-- public/views/geek.html | 2 +- public/views/home.html | 2 +- public/views/nerd.html | 2 +- 12 files changed, 43 insertions(+), 37 deletions(-) diff --git a/.gitignore b/.gitignore index c9b849e4..aff7666d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# Webstorm IDE +.idea/ + lib-cov *.seed *.log diff --git a/bower.json b/bower.json index 20d8769f..1488a5a5 100644 --- a/bower.json +++ b/bower.json @@ -4,6 +4,6 @@ "dependencies": { "bootstrap": "latest", "angular": "latest", - "angular-route": "latest" + "angular-ui-router": "latest" } } diff --git a/package.json b/package.json index 9fdb424f..f53a3a5f 100644 --- a/package.json +++ b/package.json @@ -7,5 +7,4 @@ "body-parser" : "~1.4.2", "method-override" : "~2.0.2" } -} - +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 84970c0c..e2a4d701 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,7 @@ - + @@ -23,7 +23,7 @@ - +
@@ -32,13 +32,14 @@ Stencil: Node and Angular
-
+
diff --git a/public/js/app.js b/public/js/app.js index cccb00a5..a66a2061 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1 +1 @@ -angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService', 'GeekCtrl', 'GeekService']); \ No newline at end of file +angular.module('sampleApp', ['ui.router', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService', 'GeekCtrl', 'GeekService']); \ No newline at end of file diff --git a/public/js/appRoutes.js b/public/js/appRoutes.js index dcec7eb4..8a319518 100644 --- a/public/js/appRoutes.js +++ b/public/js/appRoutes.js @@ -1,23 +1,23 @@ -angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { +angular.module('appRoutes', []).config(function($stateProvider, $urlRouterProvider) { - $routeProvider + $urlRouterProvider.otherwise('/'); - // home page - .when('/', { - templateUrl: 'views/home.html', - controller: 'MainController' - }) + $stateProvider + .state('home', { + url: '/', + templateUrl: 'views/home.html', + controller: 'MainController as mainCtrl' + }) - .when('/nerds', { - templateUrl: 'views/nerd.html', - controller: 'NerdController' - }) + .state('nerds', { + url: '/nerds', + templateUrl: 'views/nerd.html', + controller: 'NerdController as nerdCtrl' + }) - .when('/geeks', { - templateUrl: 'views/geek.html', - controller: 'GeekController' - }); - - $locationProvider.html5Mode(true); - -}]); \ No newline at end of file + .state('geeks', { + url: '/geeks', + templateUrl: 'views/geek.html', + controller: 'GeekController as geekCtrl' + }) +}); \ No newline at end of file diff --git a/public/js/controllers/GeekCtrl.js b/public/js/controllers/GeekCtrl.js index 559220ab..2c48c221 100644 --- a/public/js/controllers/GeekCtrl.js +++ b/public/js/controllers/GeekCtrl.js @@ -1,5 +1,6 @@ -angular.module('GeekCtrl', []).controller('GeekController', function($scope) { +angular.module('GeekCtrl', []).controller('GeekController', function() { - $scope.tagline = 'The square root of life is pi!'; + var vm = this; + vm.tagline = 'The square root of life is pi!'; }); \ No newline at end of file diff --git a/public/js/controllers/MainCtrl.js b/public/js/controllers/MainCtrl.js index 1f9862d8..d4c2cc48 100644 --- a/public/js/controllers/MainCtrl.js +++ b/public/js/controllers/MainCtrl.js @@ -1,5 +1,6 @@ -angular.module('MainCtrl', []).controller('MainController', function($scope) { +angular.module('MainCtrl', []).controller('MainController', function() { - $scope.tagline = 'To the moon and back!'; + var vm = this; + vm.tagline = 'To the moon and back!'; }); \ No newline at end of file diff --git a/public/js/controllers/NerdCtrl.js b/public/js/controllers/NerdCtrl.js index f361522d..f200532c 100644 --- a/public/js/controllers/NerdCtrl.js +++ b/public/js/controllers/NerdCtrl.js @@ -1,5 +1,6 @@ -angular.module('NerdCtrl', []).controller('NerdController', function($scope) { +angular.module('NerdCtrl', []).controller('NerdController', function() { - $scope.tagline = 'Nothing beats a pocket protector!'; + var vm = this; + vm.tagline = 'Nothing beats a pocket protector!'; }); \ No newline at end of file diff --git a/public/views/geek.html b/public/views/geek.html index 995a1fe5..c5e0e783 100644 --- a/public/views/geek.html +++ b/public/views/geek.html @@ -1,5 +1,5 @@

Geek City

-

{{ tagline }}

+

{{ geekCtrl.tagline }}

\ No newline at end of file diff --git a/public/views/home.html b/public/views/home.html index f82fb390..4ff9bf12 100644 --- a/public/views/home.html +++ b/public/views/home.html @@ -1,5 +1,5 @@

Home Page 4 Life

-

{{ tagline }}

+

{{ mainCtrl.tagline }}

\ No newline at end of file diff --git a/public/views/nerd.html b/public/views/nerd.html index 8fccca05..642db2a5 100644 --- a/public/views/nerd.html +++ b/public/views/nerd.html @@ -1,5 +1,5 @@

Nerds and Proud

-

{{ tagline }}

+

{{ nerdCtrl.tagline }}

\ No newline at end of file From 01dcde00ae6d6255f5876add6622d5bcdf075bb4 Mon Sep 17 00:00:00 2001 From: Weiwei SUN Date: Sun, 8 Mar 2015 22:48:39 +0800 Subject: [PATCH 2/5] update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b14f183c..cd07f2de 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,10 @@ This is a repo for a starter appliation for a Single Page MEAN Stack application Use this starter kit to build any MEAN stack application you like. -If you have any questions or requests, email us at [chris@scotch.io](mailto:chris@scotch.io) and we'll keep updating this to make it perfect. - ## Future Additions - CRUD examples - Development and Production Environments - Link examples - Single Page AngularJS Animations +- Using [Angular-ui-router](https://github.com/angular-ui/ui-router) as the routing system +- Using ControllerAs syntax \ No newline at end of file From 713b9c8343baafa4e87d9abdfd87baac6794ba74 Mon Sep 17 00:00:00 2001 From: Weiwei SUN Date: Mon, 16 Mar 2015 15:13:59 +0800 Subject: [PATCH 3/5] update detail --- public/js/appRoutes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/appRoutes.js b/public/js/appRoutes.js index 8a319518..746849b3 100644 --- a/public/js/appRoutes.js +++ b/public/js/appRoutes.js @@ -19,5 +19,5 @@ angular.module('appRoutes', []).config(function($stateProvider, $urlRouterProvid url: '/geeks', templateUrl: 'views/geek.html', controller: 'GeekController as geekCtrl' - }) + }); }); \ No newline at end of file From f80bc4834ce7d427f8e9a0681140d6455ac08ad8 Mon Sep 17 00:00:00 2001 From: Weiwei SUN Date: Mon, 16 Mar 2015 15:14:20 +0800 Subject: [PATCH 4/5] adding grunt for automating --- Gruntfile.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 19 +++++++++++----- 2 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 Gruntfile.js diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 00000000..620167b7 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,62 @@ +module.exports = function(grunt) { + + // ------------------ + // CONFIGURE GRUNT + + grunt.initConfig({ + + // jshint: check all js files for errors + jshint: { + all: ['public/js/**/*.js'] + }, + + // todo: uglify + + // todo: cssmin + + // watch: watch css and js files and process the above tasks + watch: { + css: { + files: ['public/css/**/*.css'], + tasks: [] + }, + + js: { + files: ['public/js/**/*.js'], + tasks: ['jshint'] + } + }, + + // watch our node server for changes + nodemon: { + dev: { + script: 'server.js' + } + }, + + // run watch and nodemon at the same time + concurrent: { + options: { + logConcurrentOutput: true + }, + tasks: ['nodemon', 'watch'] + } + }); + + // ------------------ + // LOAD GRUNT PLUGINS + + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-nodemon'); + grunt.loadNpmTasks('grunt-concurrent'); + + + // ------------------ + // CREATE TASKS + + // register the nodemon task when we runt grunt + grunt.registerTask('default', ['jshint', 'concurrent']); +}; \ No newline at end of file diff --git a/package.json b/package.json index f53a3a5f..6cd3a2fa 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,18 @@ "name": "starter-node-angular", "main": "server.js", "dependencies": { - "express" : "~4.5.1", - "mongoose" : "~3.8.0", - "body-parser" : "~1.4.2", - "method-override" : "~2.0.2" + "express": "~4.5.1", + "mongoose": "~3.8.0", + "body-parser": "~1.4.2", + "method-override": "~2.0.2" + }, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-concurrent": "^1.0.0", + "grunt-contrib-cssmin": "^0.12.2", + "grunt-contrib-jshint": "^0.11.0", + "grunt-contrib-uglify": "^0.8.0", + "grunt-contrib-watch": "^0.6.1", + "grunt-nodemon": "^0.4.0" } -} \ No newline at end of file +} From 1c4d6cb0efb3e8367d5f34319516aa9ec375ba5d Mon Sep 17 00:00:00 2001 From: Weiwei SUN Date: Mon, 16 Mar 2015 15:14:32 +0800 Subject: [PATCH 5/5] update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cd07f2de..8cf81340 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This is a repo for a starter appliation for a Single Page MEAN Stack application 1. Download the repository 2. Install npm modules: `npm install` 3. Install bower dependencies `bower install` -4. Start up the server: `node server.js` +4. Start up the server: `node server.js` or `grunt` 5. View in browser at http://localhost:8080 Use this starter kit to build any MEAN stack application you like. @@ -17,4 +17,5 @@ Use this starter kit to build any MEAN stack application you like. - Link examples - Single Page AngularJS Animations - Using [Angular-ui-router](https://github.com/angular-ui/ui-router) as the routing system -- Using ControllerAs syntax \ No newline at end of file +- Using ControllerAs syntax +- [Using Grunt to automate your development](https://scotch.io/tutorials/using-gruntjs-in-a-mean-stack-application) \ No newline at end of file