Netbeans 8.1, Angular 1.3 ja Angular-Material

No niin, nyt on mehukas pläjäys päivityksiä. Netbeans 8.1 päivitys tipahti muutama viikko sitten, ja se paransi huomattavasti tukea Angular projektien ja Angular Seedin suhteen. Aiemmat bower pulmat ovat poistuneet – ainakin hetkeksi. Sillä pystyy tekemään hyvän Angular projektirungon siis nyt.

Angular frameworkistä vuorostaan on tullut ulos juuri tuoreeltaan odotettu 1.3 versio. Jatkossa toki luvassa vielä odotetumpi 2.0 versio joka järisyttää kaiken uusiksi. Mutta tämä 1.3 on mukava vakaa pikkupäivitys. Sen saa käyttöön vaikka heti, ja aika monet kirjastot sitä jo vaativatkin.

Lopulta angular-material. Olen kovasti itse ollut kiinnostunut Googlen Polymer/Material kirjastosta muutamasta syystä: Sitä saa niin Androidiin kuin webiinkin, se on selkeästi tablet/phablet/mobile first ui framework, se suuntaa tulevaisuuden selaimiin, ja se on aika siisti. Siinä on selkeä filosofia takana ui-kehitykseen. Ja nyt sitä saa Angulariinkin.

Kun kaikki nämä kolme lyö yksiin, tulee taas aika metka alusta kehitellä tai prototypoida. Se onnistuu esim. näin:

Lataa Netbeans 8.1 tai päivittele se tuoreimpaan versioon:

https://netbeans.org/

Tee sinne Uusi HTML 5 projekti tyyppiä Angular seed:

HTML 5 projektityyppi

Angular Seed pohja

Angular Seed antaa mukavat pohjat kehitykselle: Siellä on jo npm, ja bower mukana.

Seuraava tempaus on mennä Important Files-kansioon, editoimaan bower.json tiedostoa. Ideana on muutella siellä Angular-versiot 1.2.x versiosta versioon 1.3.x. Samalla lisää sinne myös angular-material 0.4.x, sekä angular-animate 1.3.x. Voit myös muokata projektin nimen, kuvauksen, version ja kotisivulinkin makusi mukaan. Esim- näin:

{
 "name": "Material Design Demo",
 "description": "Angular Material Design demo",
 "version": "0.0.1",
 "homepage": "https://spagettikoodi.wordpress.com",
 "license": "MIT",
 "private": true,
 "dependencies": {
 "angular": "1.3.x",
 "angular-route": "1.3.x",
 "angular-loader": "1.3.x",
 "angular-mocks": "~1.3.x",
 "angular-animate": "~1.3.x",
 "html5-boilerplate": "~4.3.0",
 "angular-material": "~0.5.x"
 },
 "resolutions": {
 "angular": "1.3.x",
 "angular-animate": "1.3.x",
 "angular-aria": "1.3.x"
 }
 
}

Huomaa tuossa myös resolutions-osa, ilman sitä saat mehukkaan angular not found errorin aikaiseksi, kun bowerille jää epäselväksi mitä versiota Angularista tulisi käytellä.

Nyt kun koko roska on valmis, aja npm install ja bower install, ja haluamasi kirjastot lataillaan interwebistä koneelle. Jos Javascriptin jumalat suovat. Taisin aiemmin kirjaillakin metkoista ongelmista npm työkalusta windows 2012 koneissa suhteessa npm central registryyn. Tätä kirjoittaessa ne ovat edelleen olemassa, täältä suomen kamaralta suunnattuna.

Npm and Bower run tools

Angular-Material kirjasto vaatii index-sivulle muutaman linkin toimiakseen: tarvitset linkit javascript-tiedostoihin ja tyylisivuihin. Ne kannattaa laittaa olemassaolevien kaveriksi, ja huomioida myös miten aiempien linkkien polut bower-components kansioon toimivat. Mutta tähän tapaan:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>My AngularJS App</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
 <link rel="stylesheet" href="/bower_components/angular-material/themes/default-theme.css">
 <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
 <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
 <link rel="stylesheet" href="app.css">
 <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>
 <body>
 <ul class="menu">
 <li><a href="#/view1">view1</a></li>
 <li><a href="#/view2">view2</a></li>
 </ul>

<!--[if lt IE 9]>

 <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]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
 -->
 <script src="bower_components/angular/angular.js"></script>
 <script src="/bower_components/angular-aria/angular-aria.js"></script>
 <script src="/bower_components/angular-animate/angular-animate.js"></script>
 <script src="/bower_components/hammerjs/hammer.js"></script>
 <script src="/bower_components/angular-material/angular-material.js"></script> 
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="app.js"></script>
 <script src="view1/view1.js"></script>
 <script src="view2/view2.js"></script>
 <script src="components/version/version.js"></script>
 <script src="components/version/version-directive.js"></script>
 <script src="components/version/interpolate-filter.js"></script>
 </body>
</html>

Editoi app.js tiedostoa, lisää sinne material design moduuli niin saat myös funktiot esim. modaali-ikkunoille käyttöön:

’use strict’;

// Declare app level module which depends on views, and components
angular.module('myApp', [
 'ngRoute',
 'ngMaterial',
 'myApp.view1',
 'myApp.view2',
 'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
 $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Lopuksi, jos haluat heti nähdä toimivatko linkit suht oikein, avaa view1/view1.html tiedosto, ja lisää sinne material-design nappi.

<p>This is the partial for view 1.</p>
<md-button class="md-fab md-raised">PUSH ME</md-button>

Huomaa pari seikkaa:

– Paketissa tulee mukana myös angular-aria ja hammerjs, nekin mielenkiintoisia kirjastoja tabsujen ja kämmyköiden kanssa.

– Näissä linkeissä on viittaus angular/material kansion alla olevaan themes/default-theme.css tiedostoon, se tulee angular-material 0.5:sta alkaen mukana.

Jos haluat, voit nyt ajaa sovelluksen ja tarkistaa että virheilmoituksia ei tule ja nappi tulee näkyviin. Se tapahtuu Netbeansissä yksinkertaisesti oikealla hiirennapilla projektin päällä:

Run app

 

First material design button

 

Huomaa material design napin onhover efekti ja onclick ripple-efekti. Siinä esimakua mitä on luvassa.

No niin, se siitä. Nyt sinulla on Netbeans 8.1, AngularJS 1.3, sekä angular-material asennettuna, ja hupi voi alkaa. Mitäpä tällä kombolla voi tehdä? Kirjoitan siitä toisen artikkelin myöhemmin.

Tässä muutama asiaan liittyvä linkkivinkki:

https://github.com/angular/angular.js/blob/master/CHANGELOG.md

https://material.angularjs.org/#/

https://github.com/angular/bower-material

 

Advertisements

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s