angularjs的一个通用模板

Angle ===== Overview -------- This document aims to explain the best way to work with the product and its components. __All the best and enjoy coding.__ ### Support In case you have questions [Contact Support >](https://wrapbootstrap.com/user/themicon) Getting started --------------- ### Tips - Do not start from scratch, use an existing asset and modify it to learn how it works. - Explore the sources for ideas and sample code. - Use Firebug or Chrome Developer Tools to find bugs on your website. Using one of those tools will help you to save time analyzing the site and finding elements structure, like classes, id or tags - Quick tip: open your site with Chrome, press F12 and go to console tab, reload your page and if something goes wrong you will see your page errors in red text. - In case of error messages, someone might have seen it too, so you can try a Google search for a quick fix. ### Starting the app Since this is AngularJS based application you need a server (Apache, IIS, xampp, etc)to serve the html files and perform http request to load all views. **Important!** Opening the index.html with a double click (i.e. using file:// protocol) will show you only a blank page because there's no server that response to the requests made for each view in order to display the app interface. Customizing ----------- ### Structure Before starting to customize the template, here are the project files organization structure: ``` +-- app/ | +-- css/ | +-- documentation/ | +-- img/ | +-- js/ | +-- i18n/ | +-- pages/ | +-- vendor/ | +-- views/ +-- master/ | +-- jade/ | | +-- pages/ | | +-- views/ | +-- js/ | | +-- modules/ | | | +-- controllers/ | | | +-- directives/ | | | +-- services/ | | +-- custom/ | +-- less/ | | +-- app/ | | +-- bootstrap/ | | +-- themes/ | +-- gulpfile.js | +-- package.json | +-- bower.json +-- server/ | +-- *.json +-- vendor/ +-- index.html ``` --- #### Main folders explanation __app/__ folder This folder contains the compiled files. __This files are ready to deploy on your server.__ - pages/ This folder contains the compiled html files for the single pages (out of the app). - views/ This folder contains the compiled html files for the views and partials used for the app. - i18n/ This folder contains the json files use for translation. - vendor/ This folder contains vendor files not managed via bower __master/__ folder This folder contains the source files. You will find the following folders inside - jade/ This folder contains JADE files. This files need to be compiled into html files to be displayed by a browser - less/ This folder contains the LESS files for the core styles and bootstrap styles. - js/ Here you will find pure JS files. All this files are concatenated into the file app.js. __vendor/__ folder This folder contains the vendor files used to include plugins and other components. This folder is handled via bower so optionally you can remove or upgrade the vendor components using such tool. __server/__ folder This folder contains server side files used for demonstration and guide for the flot chart and file upload components. - __sidebar-menu.json__ This file is __important and required__ because it contains the sidebar menu definition. ### Custom code To add your own code you can follow this instructions: __Working with css and js__ - Create a file app/css/custom.css and add your own styles - Create a file app/js/custom.js and add your own javascript - Edit the file index.html and include custom.css after all other css files and custom.js after all other js files. __Working with source files__ - For JS, go to folder master/js/custom and start editing the file custom.js. After compile the source again with gulp, your own code will included at th bottom of file app/js/app.js. - For LESS, go to folder master/less and create a folder called custom and add your won less files. Then edit file app.less and @import all your stylesheets at the bottom (overrides all app default styles) __A note on updating__ > The premise is, the less you change the downloaded code, the easier will be to apply any updates. Try always to keep your own code the most separated as possible from the package code to easily apply new updates when necessary. Build ----- **Important!** You only need to follow this instructions in case you want to work with JADE, LESS and concatenate all JS modules. __Node.js__ is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. __Gulp__ is a task manager, you can define different tasks to run certain commands. Those commands does the compilation job for JADE and LESS, and concatenates the JS files. __Bower__ is a dependency manager, it works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you're looking for. Bower keeps track of these packages in a manifest file, bower.json. The package includes under the master/ folder the file __gulpfile.js__, __package.json__ and __bower.json__ to install the required components to compile the source files. #### Installing tools The following steps are intended to be an orientation guide, if you are not experienced with this you will need to learn more about it from Google :) - To install node and npm, go to http://nodejs.org/ - Run __npm install -g bower__ to install bower to manage dependencies - Download and install GIT for your platform http://git-scm.com/downloads Once you have all tools installed - Open a terminal, go the package __master/__ folder, then run the command __npm install__. This command will install gulp and all project dependencies. - Then, to install vendor dependencies, run __bower install__ - Finally run __gulp__ to start the task manager If everything goes fine, you should see the messages in the terminal telling you that most the task are done ok. The task will watch for files to compile them automatically all files when change. To enable the automatic page reload there is also included a LiveReload task that requires the Chrome plugin [Livereload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) ### Javascript The Javascript source is divided in two main files that controls the app __base.js__: contains the scripts to start the application __app.js__: contains the modules used in the application (controllers, directive, etc) __Note__ The edit the scripts included in base.js open the file vendor.base.json located under the master folder The app.js script build (concatenation) order is ``` 'js/app.init.js' 'js/modules/*.js' 'js/modules/controllers/*.js' 'js/modules/directives/*.js' 'js/modules/services/*.js' 'js/modules/filters/*.js' ``` ### LESS The LESS files compiles into the file __app.css__. This file contains the bootstrap styles and the application custom styles. Also the __app-rtl.css__ is automatically generated with the same styles but inverted for RTL layout. To convert styles the node script css-flip is used. ### Vendor Vendor script dependencies are managed by bower. Just run __bower install__ in folder master/ and all dependencies will be installed. After installing all dependencies is necessary to install them in the locations the app expects them. To do that, run gulp task with the command `gulp scripts:vendor` in the master folder. This task will run automatically the tasks `scripts:vendor:app` and `scripts:vendor:base` #### Vendor folder To avoid not necessary files that bower downloads there's a task `scripts:vendor:app` that will copy all files required by the app from the __bower_components__ folder to the main __/vendor__ folder. This files are listed in __vendor.json__ file which contains the path of all necessary files required by the app components. Those files are usually required via the lazy load module and you c