Today we shall see on how to create and fasten the development of angular js using available Angular tools. Here we discuss more on tools like yo, grunt and bower.
Yo handles the scaffolding of the application. creates the structure of the application.
Grunt Concentrates on the build process. grunt helps in automating the tasks. the less work you have to do when performing the repetetive tasks like minification, uglyfing, watching files.
Bower mainly used in managing the application dependencies. Bower works by fetching and installing packages all over and saves the dependencies you are looking for..
By using these tools the user can concentrate more on feature development. So using these tools creates the development structure, runs the code in localhost, reloading the page when code changes. There are thousands of grunt plugins available which can make our tasks simple. Same for the bower which make development simple by adding the required dependencies and keeping track of them.
Install NPM
Before installing yo, grunt and bower, As we install all these tools using npm, this needs to be there in your system. npm is the node package manager. you need to download and install the node. If you dont have it your system. you can download it from here.
After installing node just type 'npm -v' in the command prompt to see the version installed. if you don't see any version then there might be some problem in installing node.
Install Yo
Yo is nothing but yeoman which will scaffold the application for us. we need to install yo globally which will allow us to run yeoman from any directory. Run below command to install yo globallay.
Install Grunt and Bower
Yo handles the scaffolding of the application. creates the structure of the application.
Grunt Concentrates on the build process. grunt helps in automating the tasks. the less work you have to do when performing the repetetive tasks like minification, uglyfing, watching files.
Bower mainly used in managing the application dependencies. Bower works by fetching and installing packages all over and saves the dependencies you are looking for..
By using these tools the user can concentrate more on feature development. So using these tools creates the development structure, runs the code in localhost, reloading the page when code changes. There are thousands of grunt plugins available which can make our tasks simple. Same for the bower which make development simple by adding the required dependencies and keeping track of them.
Install NPM
Before installing yo, grunt and bower, As we install all these tools using npm, this needs to be there in your system. npm is the node package manager. you need to download and install the node. If you dont have it your system. you can download it from here.
After installing node just type 'npm -v' in the command prompt to see the version installed. if you don't see any version then there might be some problem in installing node.
Install Yo
Yo is nothing but yeoman which will scaffold the application for us. we need to install yo globally which will allow us to run yeoman from any directory. Run below command to install yo globallay.
npm install -g yo
|
Install Grunt and Bower
We need to install the grunt and bower too globally same way as we have done for yo.
npm install -g grunt-cli bower
npm install -g bower
You can install all three of them in a single command using
npm install -g yo grunt-cli bower
Install Angular Generator
To create the structure for angular application we also need to install angular-generator globally.
npm install -g generator-angular
Run Project Generator.
Before running the generator, we shall create a folder/directory and then will run the project generator in to it.
mkdir angularjs-example
cd angularjs-example
yo angular myApp
Here myApp is the angular application name. you can use your own name here.
Now after entering this you will see some configurations asked like what versions due you want to install or what packages you need. Accept all the defaults and then your project is created.
If you go to the folder you can see the project created for you. it has all the controllers, views, routes and app.js files created. you would also some files like
package.json -- all our npm packages are listed
bower,json -- all project dependencies are listed
gruntfile.js -- all build instructions and all the tasks listed here.
Execute/Run Project
You need only one command to execute your project in local host, reload the browser page whenever you change the code. The below command loads our application in the browser.
grunt serve
We mostly work in the app folder. the app folder contains index.html file, app.js, views folder, controllers folder etc for us to concentrate on features
You can install all three of them in a single command using
npm install -g yo grunt-cli bower
Install Angular Generator
To create the structure for angular application we also need to install angular-generator globally.
npm install -g generator-angular
Run Project Generator.
Before running the generator, we shall create a folder/directory and then will run the project generator in to it.
mkdir angularjs-example
cd angularjs-example
yo angular myApp
Here myApp is the angular application name. you can use your own name here.
Now after entering this you will see some configurations asked like what versions due you want to install or what packages you need. Accept all the defaults and then your project is created.
If you go to the folder you can see the project created for you. it has all the controllers, views, routes and app.js files created. you would also some files like
package.json -- all our npm packages are listed
bower,json -- all project dependencies are listed
gruntfile.js -- all build instructions and all the tasks listed here.
Execute/Run Project
You need only one command to execute your project in local host, reload the browser page whenever you change the code. The below command loads our application in the browser.
grunt serve
We mostly work in the app folder. the app folder contains index.html file, app.js, views folder, controllers folder etc for us to concentrate on features
Comments
Post a Comment