ANGULARJS Study notes 2-run Phonecat project

If you go to the ANGULARJS Chinese web to see its tutorial, you will find that at first it provides a PHONECAT boot project, this project is a demo-like tutorial project angular the official, with the corresponding documentation, Follow this project and cooperate with the document study I think it may be very good results, and the project itself has a good reference, basically covers the use of ANGULARJS to develop the spa in every aspect, the operation is very good. Here to share with you how to download and run this project:

My operating system is win7 64-bit SP1, for other such as Linux and Mac OS may have a lot of tutorials, and installation run relatively smooth, windows but more problems, the following is a Windows environment as an example to illustrate this step

To install the download, run the following steps:

1. Need to install node JS and its package management module NPM, specific installation configuration steps please refer to this blog: http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html

2. Install git for Windows, register your GitHub account, configure Sshkey and initialize the Code warehouse, and refer to this blog post for more details: http://blog.csdn.net/wh_19910525/article/details/8128916

3. After the above steps are complete, use your account password to enter the Phonecat project on GitHub, Https://github.com/angular/angular-phonecat, and then click Fork to copy this code to your repository. can also not fork, directly use the HTTPS address to copy code, but in order to facilitate management, it is best to fork a copy in their own warehouse, so easy to follow later, here to say GitHub provides three ways to get the code, the first is through the HTTPS protocol, This is the simplest way, the GIT bash console directly into the git clone https://xxx.xxxx.xx.git can be copied code and the corresponding git file, this is also the official recommendation of a way, the second way is through the SSH protocol to obtain the code, the address is git:/ /github.com/ Xxxx.git this form, in this way need to configure Sshkey and register to your account, the specific way to see step 2, the third way is to get through SVN, this step is not introduced, originally git is more advanced than SVN, estimated that not many people back to use this bar. Add the above code address using Git bash in git clone https://github.com/angular/ Angular-phonecat.git command Clone to your local (preferably in the second step of the configuration of the designated place, do not randomly put, so easy to manage);

4. Import the project using Webstrom to download it to, (this is developed with WEBSTROM8 because WEBSTROM8 has a good angularjs plug-in): http://www.33lc.com/soft/33842.html , note that WEBSTROM8 must be used. x version, the previous version does not support ANGULARJS plug-ins, download requires the installation of angular plug-ins, specific installation steps can refer to this blog: http://blog.fens.me/tag/webstorm/

5. After initializing the import, the project structure is as follows:

Where the app directory is the project code storage directory, Node_modules is the project depends on the node module directory, the script directory is the external script of the project directory (seems to be less than the development of its own), Bower.json is a file that the package management needs tool Bower to obtain information, in order to indicate that we need to install those files in our project, such as jquery, Bootstrap, etc., the information about Bower can be found in: http://blog.fens.me/ nodejs-bower-intro/, Package.json is to tell node of the NPM module in our project need to rely on which (install) other modules, such as bower,jasmine,http-server, they are dependent on node module, all have their own role, about this file can be referred to: HTTPS ://GITHUB.COM/ERICDUM/MUJIANG.INFO/ISSUES/6,

6. Follow the Https://github.com/angular/angular-phonecat steps given in the PHONECAT project documentation to first switch to your project directory under the node CLI, run NPM install, NPM will then follow the configuration in Package.json to download the other node modules to your project, and launch bower to download Bower.json configuration of the files in our project (such as Jquery,bootstrap, etc.), It is possible to report a no versions found in git://github.com/components/ Jquery.git Similar error, this is due to github default download code mode is through SSH, this situation is prone to problems in the country, you can run  git config --global url."https://".insteadOf git:// the switch download code mode, the problem of the original address is:

https://github.com/bower/bower/issues/852, after this step is complete, the code structure is as follows:

You will find that there are a number of modules in the Node_modules folder and the app under the Bower_components folder, this is just through NPM and Bower downloaded to our project;

7. Run NPM start According to the official document HTTPS://GITHUB.COM/ANGULAR/ANGULAR-PHONECAT, at which point it will start http-server, monitor localhost's 8000 port,

Enter http://localhost:8000/app/index.htmlin the browser to see how the project works,

As shown below:

Enter the information in the left search field, the right side of the rapid change, the effect is very dazzling, so a study of the demo project development environment has been set up, you can cooperate with this document Http://docs.angularjs.org/tutorial. To learn in a step.

ANGULARJS Study notes 2-run Phonecat project