From 33f835584d0995d1bb1796d17e73566b69e97e20 Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Wed, 19 Aug 2015 23:33:18 -0400 Subject: [PATCH 1/7] POSTS: update to Ang.2 CMS post -- using typescript now --- ...ar2-CMS-with-Material-Design-Lite.markdown | 152 +++++++++++------- 1 file changed, 95 insertions(+), 57 deletions(-) diff --git a/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown b/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown index 35c1f98..cd75e5a 100644 --- a/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown +++ b/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown @@ -1,29 +1,39 @@ --- layout: post -title: "Angular2 CMS with Material Design Lite" +title: "Angular2 CMS with Material Design Lite and ES6" date: 2015-08-09 18:50:15 categories: [programming] -tags: [angular.js, angular2, javascript, javascript frameworks, es6, ecma2015, cms, material design, material design lite] +tags: [angular.js, angular2, javascript, javascript frameworks, es6, ecma2015, cms, material design, material design lite, typescript, traceur] published: false --- Building a system to manage content using latest web technology is what it's all about, right? Angular2 and Material Design Lite bring new life to this routine task. Let's explore! ### Installing dependencies +I wrote about [installing Angular2]({% post_url 2015-08-09-npm-install-angular2 %}). We compiled traceur.js from source and setup a header for an Angular2 app using ES6. Turns out, most people seem to be using Typescript. This is simply javascript with typing, and lets us get at ES6 features pretty nicely. -#### Angular2 (ES6 Style) -I wrote about [installing Angular2]({% post_url 2015-08-09-npm-install-angular2 %}). We compiled traveur.js from source and setup a header for an Angular2 app using ES6. We're just going to use [es6-shim](https://www.npmjs.com/package/es6-shim) this time around. +Might as well enter into the strictly typed land, yeah? Then we'll be able to stick with the [Angular2 5-min quickstart](https://angular.io/docs/js/latest/quickstart.html) this time around without much hassel. + +Let's install [typescript's package manager](https://www.npmjs.com/package/tsd) and other dependencies. ----- {% highlight console %} +$ npm install -g tsd # typescript dependency manager +$ npm install -g typescript # typescript compiler $ mkdir cms-frontend $ cd cms-frontend +$ tsd init +$ tsd install angular2 es6-promise rx rx-lite --save # from the quickstart $ npm init -$ npm install angular2 --save -$ npm install es6-shim --save +$ npm install --save angular2 +$ npm install --save systemjs # for es6 module loading +$ npm install --save material-design-lite +$ bower init +$ bower install --save traceur-runtime # runs our es6 code in the browser {% endhighlight %} ----- -We'll want to include this in our header, of course. Below is what your HTML should look like, roughly: +### Touching the index +To start, we want just index.html to include all of our dependencies. ----- {% highlight javascript %} @@ -31,76 +41,104 @@ We'll want to include this in our header, of course. Below is what your HTML sh My first Angular2 CMS! - - - - + + + + + + + + - - + + {% endhighlight %} ----- -#### Material Design Lite -We will be styling our CMS with Google's MDL because it's pretty and new. Let's install it with NPM because that gives us control of the SASS variables. If we want. +After we set the title, we include Material Design Lite css. We're not worried about bringing in the sass files here. -------- -{% highlight console %} -$ npm install material-design-lite --save -{% endhighlight %} -------- +We also load our own style.css before any javascript to get the page to render correctly while the js loads in the bg. + +Loading material.js first is good imho because there's a weird bug (currently?) where the [page jumps to the top](https://github.com/google/material-design-lite/issues/1224) and this allows the material.js layout rendering to happen fastest. + +Traceur is going to let our ES6 magic happen. Even though Typescript is compiling it, apparently we still need traceur. This, I gathered from the quickstart. If I'm wrong, please correct me. + +### Angular2 -- The Beginning + +> System is a third-party open-source library that adds +> ES6 module loading functionality to browsers. -For now, let's just use the pre-compiled stylesheet. I'm not going to setup Gulp etc. in this post. +[ES6 modules](http://www.2ality.com/2014/09/es6-modules-final.html) are not [AMD](http://requirejs.org/docs/whyamd.html) or [CommonJS](http://requirejs.org/docs/commonjs.html). Instead, ES6 has built-in support for modules and as such requires its own loader. Looks like the quickstart guide picked System. We did too. ----- {% highlight javascript %} - - My first Angular2 CMS! - - - - - - - - - + + + + + {% endhighlight %} ----- -#### YMMV -When done, your package.json should look like the following: +Note that we're loading in a "cms-app" module. Let's create cms-app.ts -- this is the file we'll compile down into our actual module in a bit. ------- +----- {% highlight javascript %} -{ - "name": "cms-frontend", - "version": "1.0.0", - "description": "An Angular2 CMS Frontend", - "main": "index.html", - "scripts": { - "test": "I love you" - }, - "keywords": [ - "Angular2", - "love" - ], - "author": "The universal self", - "license": "ISC", - "dependencies": { - "angular2": "^2.0.0-alpha.34", - "es6-shim": "^0.33.0", - "material-design-lite": "^1.0.3" - } +/* cms-frontend/cms-app.ts */ +/// + +import {Component, View, bootstrap} from 'angular2/angular2'; + +// Annotation section +@Component({ + selector: 'cms-app' +}) +@View({ + template: '

This is {{ name }}

' +}) + +// Component controller +class CmsAppComponent { + name: string; + + constructor() { + this.name = 'Angular2: CMS'; + } } +bootstrap(CmsAppComponent); +{% endhighlight %} +----- + +Here we start by including the typescript definitions for angular2, allowing us to import the Component, View, and bootstrap functionality. + +Decorators are an Angular2 thing which describe how the whole component is placed into the page. We've got the @Component decorator defining our tag name, and we have the @View decorator describing what goes into the tag. + +An ES6 class. I've aligned it with the tag name and the filename. Consistency is king, at the very least. + +Our class can have a property and a constructor. ECMA2015 for the win! Our constructor just asigns a string to the name property. And that's our CMS... for now. So we bootstrap() the component by classname and we're off to the races. + +### Typescript compiling +Let's start typescript compiler watching our new code for changes. + +----- +{% highlight console %} +tsc --watch -m commonjs -t es5 --emitDecoratorMetadata cms-app.ts {% endhighlight %} ------- +---- + +### The first viewing +Quickly installing a local http server and booting it up... -### Scaffolding the Angular2 App -I'm not shy to say I don't even know how to make a [module](https://docs.angularjs.org/guide/module) in Angular2. Are there modules in Angular2? Our [guide](http://www.sitepoint.com/writing-angularjs-apps-using-es6/) from the [previous post]({% post_url 2015-08-09-npm-install-angular2 %}) is definitely for Angular1. The guide is dead. Long live the... wait... we need a new guide! +----- +{% highlight console %} +$ npm install -g http-server +$ http-server +{% endhighlight %} +----- +Navigate to http://localhost:8080 and From e547b6e14c8de9d82465fa5edc7577faf3f639a0 Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sun, 23 Aug 2015 09:36:40 -0400 Subject: [PATCH 2/7] updated angular cms post, not done yet, included google tracking code --- _includes/head.html | 9 +++ ...ar2-CMS-with-Material-Design-Lite.markdown | 74 +++++++++++++------ 2 files changed, 60 insertions(+), 23 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index fad1164..a335cbb 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -49,5 +49,14 @@ hashAddressBar: true }); + diff --git a/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown b/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown index cd75e5a..54a8cc1 100644 --- a/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown +++ b/_posts/2015-08-13-Angular2-CMS-with-Material-Design-Lite.markdown @@ -9,11 +9,9 @@ published: false Building a system to manage content using latest web technology is what it's all about, right? Angular2 and Material Design Lite bring new life to this routine task. Let's explore! ### Installing dependencies -I wrote about [installing Angular2]({% post_url 2015-08-09-npm-install-angular2 %}). We compiled traceur.js from source and setup a header for an Angular2 app using ES6. Turns out, most people seem to be using Typescript. This is simply javascript with typing, and lets us get at ES6 features pretty nicely. +I wrote about [installing Angular2]({% post_url 2015-08-09-npm-install-angular2 %}). We compiled traceur.js from source and setup a header for an Angular2 app using ES6. -Might as well enter into the strictly typed land, yeah? Then we'll be able to stick with the [Angular2 5-min quickstart](https://angular.io/docs/js/latest/quickstart.html) this time around without much hassel. - -Let's install [typescript's package manager](https://www.npmjs.com/package/tsd) and other dependencies. +This time through, we'll grab down Typescript et al. and include our libs from CDNs. Let's install [typescript's package manager](https://www.npmjs.com/package/tsd) and other dependencies. ----- {% highlight console %} @@ -23,12 +21,6 @@ $ mkdir cms-frontend $ cd cms-frontend $ tsd init $ tsd install angular2 es6-promise rx rx-lite --save # from the quickstart -$ npm init -$ npm install --save angular2 -$ npm install --save systemjs # for es6 module loading -$ npm install --save material-design-lite -$ bower init -$ bower install --save traceur-runtime # runs our es6 code in the browser {% endhighlight %} ----- @@ -41,24 +33,26 @@ To start, we want just index.html to include all of our dependencies. My first Angular2 CMS! - - - - - - - - + + + + + + + + - + {% endhighlight %} ----- -After we set the title, we include Material Design Lite css. We're not worried about bringing in the sass files here. +After we set the title, we include our stylesheets and scripts. Pretty straight-forward so far. I'm sure you can handle creating the style.css file :) + +If you are brave enough to be trying to install these dependencies via node, note that you'll need to configure paths for System.js We also load our own style.css before any javascript to get the page to render correctly while the js loads in the bg. @@ -77,8 +71,7 @@ Traceur is going to let our ES6 magic happen. Even though Typescript is compili {% highlight javascript %} - - + {% endhighlight %} ----- @@ -140,5 +133,40 @@ $ http-server {% endhighlight %} ----- -Navigate to http://localhost:8080 and +Navigate to http://localhost:8080 and... wait there's nothing there! What? + +Just kidding. You should actually see the text "This is Angular2: CMS" in beautiful Roboto Sans, 56px font size. Yes? Okay. No?! Check for console/network errors and make sure your header paths are correct. + +Moving on. + +### Skipping Login +This CMS will be wide-open. Locally, that is. + +If you remember, we skipped auth when building our [REST API with Sails]({% post_url 2015-08-12-Sails-Javascript-REST-API-and-CRUD %}), also. It's easy enough to implement oauth using passport and track auth tokens along with other user information (like, for example, an admin flag). Maybe I'll do another article on adding oauth to an existing CMS and REST Api... + +### Material Design Staffer Admin +We just want some basic MDL classes to give us a nice little starter-form. We're gonna put them right into our cms-app.ts view. + +Our [API]({% post_url 2015-08-12-Sails-Javascript-REST-API-and-CRUD %}) has support for Staffers (aka `localhost:1337/staff`) and even has a convenient way for adding more during development (aka `localhost:1337/staff/create?name='any'&otherprop='more'`). Note that there is no schema -- a staffer is just a JSON object. + +Let's setup a basic form. Just a [textfield](http://www.getmdl.io/components/#textfields-section) with a label and a [submit button](http://www.getmdl.io/components/#buttons-section). + +----- +{% highlight javascript %} +/* cms-frontend/cms-app.ts */ +@View({ + template: ` +
+
+ + +
+ +
+ ` +}) +{% endhighlight %} +----- From ce70d60a49f81a3e46f21a539b2be76facea6390 Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sun, 23 Aug 2015 09:41:39 -0400 Subject: [PATCH 3/7] tracking coded added, indent fixed --- _includes/head.html | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index a335cbb..9a5c7da 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -38,25 +38,25 @@ - - - - + + + + From 5898ac763ecbf50c3ca7fc1c28c4fbffbfd886e1 Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sun, 23 Aug 2015 09:45:58 -0400 Subject: [PATCH 4/7] added verification code for webmaster tools --- _includes/head.html | 1 + 1 file changed, 1 insertion(+) diff --git a/_includes/head.html b/_includes/head.html index 9a5c7da..39f3ef5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -3,6 +3,7 @@ + {{ site.title }}{% if page.title %} - {{ page.title }}{% endif %} From a04cd8b1acd49461c6a07fd84072ddcfbea382fd Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sun, 23 Aug 2015 09:48:39 -0400 Subject: [PATCH 5/7] fixed include paths --- _includes/head.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 39f3ef5..4a53529 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -16,24 +16,30 @@ - + - + + - - + + From 3db20b5b113971e6561fc70b2215c2fa4d04cc82 Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sun, 23 Aug 2015 09:51:41 -0400 Subject: [PATCH 6/7] updated head on blog --- _includes/head.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 4a53529..8470744 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -38,8 +38,6 @@ - - From 39ecad6d2b10a6b0a830910d800966e6a33558fe Mon Sep 17 00:00:00 2001 From: Chad Furman Date: Sat, 29 Aug 2015 21:57:46 -0400 Subject: [PATCH 7/7] POST: ionic isn't it? --- _posts/2015-08-29-ionic-isnt-it.markdown | 55 ++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 _posts/2015-08-29-ionic-isnt-it.markdown diff --git a/_posts/2015-08-29-ionic-isnt-it.markdown b/_posts/2015-08-29-ionic-isnt-it.markdown new file mode 100644 index 0000000..9e4c94e --- /dev/null +++ b/_posts/2015-08-29-ionic-isnt-it.markdown @@ -0,0 +1,55 @@ +--- +layout: post +title: "Ionic, isn't it?" +date: 2015-08-29 21:57:00 +categories: [programming] +tags: [angular.js, ionic, html5, hybrid apps, yeoman generators, cordova, javascript, javascript frameworks] +--- + +Making mobile apps is pretty fun if all you have to do is write css and javascript. [Angular](https://angularjs.org/) makes it more fun, and [Generator M](https://github.com/mwaylabs/generator-m) gets us off the ground [pdq](http://www.merriam-webster.com/dictionary/pdq). + +## Setting up + +1) Install Generator M +2) Make a new directory and generate app scaffolding within that. I like 'tabs' personally. +3) Tada! *note* we aren't stopping here... + +Just run `gulp watch` and it will even pop open a local browser for you to see your new app in development (resize your browser to phone-size for best experience :) + +## Change things + +I'll give you a brief overview of where stuff is and you can change it a little before building your app. + +`app/*` and the main module `app/main/*` are where all the cool stuff is. Assets, controllers, templates, styles, etc. + +The main index (i.e. app/index.html) loads in our javascript dependencies, application module, and lays out the header and tab based navigation. + +Tab templates are in `app/main/templates` -- you start out with list, list details, debug, and tabs. + +List is the homepage -- this and other routing is specififed by the angular ui config in main.js. Note the 'otherwise' route. + +More details about [where stuff is](https://github.com/mwaylabs/generator-m#file-structure) can be found in the Generator M docs. + +## More Options + +When making changes, note that there is a [grid system](http://ionicframework.com/docs/components/#grid) (and many other cool [components](http://ionicframework.com/docs/components/)) provided by Ionic. You can also just use [Flexbox](http://www.smashingmagazine.com/2015/03/harnessing-flexbox-for-todays-web-apps/) to lay out your elements -- who really needs a grid system anymore? + +Also, I highly encourage exploring the [testing integration](https://github.com/mwaylabs/generator-m#testing) and adding in [protractor](http://angular.github.io/protractor/#/) tests.. + +## Compiling and Installing + +Add the platform of your choice to ionic, build for it, emulate it, and install it on your phone. We're done :) + +Here's some helpful commands: +``` +gulp build +ionic platform add android +ionic build android +ionic emulate android +``` + +## Summary + +AngularJS can power a mobile app, as well as a web page. Ionic integrates Angular and Cordova quite nicely. Yeoman generators are what you want for speed of setup. + +testing is your friend.