angularjs實際工程目錄結構

angularjs是一個優秀的前端框架,主要核心有雙向綁定、依賴注入、MVC等,不再贅述。


下面是實際開發項目中的目錄結構示例:

wKiom1ZuNc6AO7NZAAAgIzJawpU631.png

我的項目根目錄是helloangular,下面所使用的各層級目錄均創建在根目錄下,實際上也可以在根目錄下創建名爲“app”的目錄,各層級目錄放在“app”目錄下,根目錄下再放置其他公共文件、配置文件等。


index.html是項目的入口文件,代碼如下:

wKioL1ZuN0CCgRSYAAB_HPZXwQQ523.png


入口html中引入需要的js、css等資源,並聲明應用(ng-app),在需要插入視圖的標籤上聲明ng-view,這樣路由中的視圖將都插入至此標籤下。


app.js是angular項目的主js,代碼如下:

wKioL1ZuOAqhRbB7AAAn8kaZJAI684.png

主js中創建主模塊,引入所有依賴的模塊,以“ng”打頭的模塊是angular的內置模塊,需要引入相應的js文件,如示例代碼中依賴了“ngRoute”,則需要引入angular.route.js,另外,配置了訪問路由,示例中的路由只創建了一個路徑即“hello”,訪問“項目路徑/index.html/hello”即會使用“helloController”控制器來控制“views/hello.html”視圖。這裏需要注意的是“templateUrl”屬性後所寫的路徑不要以“/”開頭,否則將找不到路徑,如果直接訪問"項目路徑/index.html",因爲不符合任何路由,按照市裏代碼中的otherwise部分,也會自動跳轉至hello路由。

按照以上配置,當項目訪問hello路由時,實際是將hello.html插入到了入口html的ng-view中。


hello.html是一個示例視圖文件,代碼如下:

wKiom1ZuRTKjWk4BAAAIPcMfV5w713.png

示例視圖中只是顯示了控制器中的一個屬性值。


路由中用來控制hello.html視圖的是helloController,所有的控制器被定義在script目錄下的controllers.js中,當然實際開發中,團隊中多人協作開發,可以將controllers.js進一步細分。


controllers.js中代碼如下:

wKioL1ZuRf6zrhOZAAAiCZxLekI514.png


訪問index.html效果如下:

wKiom1ZuRzLjXvv1AAA4Fn_hnL0623.png

wKiom1ZuRzOQKRwIAAA3IqT4vwM030.png

其他文件:

script/directives.js 用來盛放angular中自定義組件

script/filters.js 用來盛放angular的過濾器

script/services.js 用來盛放angular的服務


framework中當然可能不是隻有angularjs,還可能有bootstrap等框架。


  總之,實際項目中,創建一個入口文件(相當於java中的main函數),在入口文件中聲明好應用主模塊、依賴模塊,利用angularjs提供的路由,分模塊匹配控制器和視圖,其實這樣配置,與struts的MVC是不是就挺類似了。另外,angularjs以“模塊”爲基礎,script目錄下的五個文件,都是先申明成爲模塊,再進行操作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章