Angular-material project from scratch

I would like to use yeoman(The web’s scaffolding tool for modern webapps) and nodejs to generate webapp and setup a proper environment for your project.

Prerequisites:

Nodejs

Git

Once after installation of nodejs and git(command prompt) check those version in command prompt by

node –version && npm –version && git –version && bower –version && yo –version && grunt-cli –version && grunt –version

you can update npm by npm update -g npm/npm install -g npm

First install all necessary dependencies globally by

npm install -g bower

npm install -g yo

npm install -g grunt / gulp

npm install -g grunt-cli

or simply all above in one line

npm install -g bower yo grunt-cli

Once this is done..you have to install

npm install -g generator-webapp //To scaffold a web application, you'll need to install the generator-webapp generator.

This is the default web application generator that will scaffold out a project containing HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap.

Once this is done you can install your own required generator(say angular generator) using yo angular-generator

Now that the generator is installed, create a directory for your new project in c:/workspace

mkdir project
cd project

Scaffolding an AngularJS app

As always, before using a new generator, you must install it from npm first:

npm install -g generator-angular
(or)

npm install –global generator-angular

Hoping you are in your project folder say c:/workspace/project/

Now run all commands like npm install bower, npm install yo, npm install grunt to create all dependencies in local project folder.

If at any time any command throws error like ‘yo’ is not an internal/external command like that..you have to install those in locally..that is c:/workspace/project/. you can do that by using npm install yo (or) npm install yo –save-dev

c:/workspace/project/> yo angular

This generates an app folder in your directory where you will have all views/controllers/style etc etc

Now grunt serve will allow to run the application in localhost:9000

Question??

You may be thinking why we installed globally i.e., -g like npm install -g bower etc. This allows to install bower globally. You can check that in c:/users/username/appdata/roaming/npm

Note: appdata will be in hidden default. you have to make it visible in folder options.

With this we are done with setting environment and run your default application in localhost:9000.

If you want you can upload this repository to git and clone it anywhere. Refer this tutorial to enable git for your project.

 Angular-Material

Now lets move in working with angular material. Before you start working with..kindly refer this

Tutorials:

https://github.com/angular/material-start/tree/es5-tutorial

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

use bower search angular-material to search for libraries.

Now install angular material using following command

bower install angular-material

Now you installed angular-material in your project folder. you can cross check by exploring bower_components folder. Now include this angular-material.css file in index.html.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s