ANGULARJS Actual Engineering directory structure

Angularjs is a good front-end framework, the main core has two-way binding, Dependency injection, MVC, etc., no longer repeat.

The following is an example of a directory structure in a real-world development project:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/77/C6/wKiom1ZuNc6AO7NZAAAgIzJawpU631.png "title=" Mulu.png "alt=" Wkiom1zunc6ao7nzaaagizjawpu631.png "/>

My project root directory is helloangular, the following use of the various levels of the directory are created under the root directory, you can actually create a directory named "app" under the root directory, each level of directories in the "app" directory, the root directory and other public files, configuration files and so on.

Index.html is the entry file for the project and the code is as follows:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/77/C5/wKioL1ZuN0CCgRSYAAB_HPZXwQQ523.png "title=" 1.png " alt= "Wkiol1zun0ccgrsyaab_hpzxwqq523.png"/>

The portal HTML introduces the required resources such as JS, CSS, and declares the application (Ng-app), declaring Ng-view on the label on which the view is to be inserted, so that the views in the route are inserted under this tab.

App.js is the main JS of the angular project, the code is as follows:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/77/C5/wKioL1ZuOAqhRbB7AAAn8kaZJAI684.png "title=" 2.png " alt= "Wkiol1zuoaqhrbb7aaan8kazjai684.png"/>

Main JS in the creation of the main module, the introduction of all dependent modules, "NG" the beginning of the module is angular built-in module, the need to introduce the corresponding JS file, such as the example code relies on "Ngroute", You need to introduce angular.route.js, and in addition, access routing is configured, the route in the example creates only one path, "Hello", and access to "project path/index.html/hello" uses the "Hellocontroller" Controller to control " Views/hello.html "view. It is important to note that the "Templateurl" attribute is written after the path does not start with "/", otherwise the path will not be found, if the direct access to "project path/index.html", because does not conform to any route, according to the city code in the otherwise section, will also automatically jump to the hello route.

With the above configuration, when the project accesses the Hello route, the hello.html is actually inserted into the Ng-view of the portal HTML.

Hello.html is an example view file with the following code:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/77/C7/wKiom1ZuRTKjWk4BAAAIPcMfV5w713.png "title=" 4.png " alt= "Wkiom1zurtkjwk4baaaipcmfv5w713.png"/>

Only one property value in the controller is shown in the example view.

In the route to control the hello.html view is the Hellocontroller, all the controller is defined in the script directory under the Controllers.js, of course, in actual development, the team of multi-person collaborative development, can be further subdivided controllers.js.

The code in Controllers.js is as follows:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/77/C6/wKioL1ZuRf6zrhOZAAAiCZxLekI514.png "title=" 3.png " alt= "Wkiol1zurf6zrhozaaaiczxleki514.png"/>

Access the index.html effect as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/77/C7/wKiom1ZuRzLjXvv1AAA4Fn_hnL0623.png "style=" float: none; "title=" 5.png "alt=" Wkiom1zurzljxvv1aaa4fn_hnl0623.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/77/C7/wKiom1ZuRzOQKRwIAAA3IqT4vwM030.png "style=" float: none; "title=" 6.png "alt=" Wkiom1zurzoqkrwiaaa3iqt4vwm030.png "/>

Other files:

Script/directives.js used to put angular custom components in

Script/filters.js used to put angular in the filter

Script/services.js is used to put angular service

The framework may of course not be only angularjs, but may also have frameworks such as Bootstrap.

Anyway, in the actual project, create a portal file (equivalent to the main function in Java), declare the application Master module in the portal file, the dependent module, take advantage of the route provided by ANGULARJS, sub-module matching controller and view, in fact, this configuration, and struts is not quite similar to the MVC. In addition, Angularjs the "module" as the basis, the script directory of five files, are first declared to become a module, and then to operate.

This article is from the "Thatway" blog, make sure to keep this source http://thatway.blog.51cto.com/4815281/1722768

ANGULARJS Actual Engineering directory structure