angularjs是一個優秀的前端框架,主要核心有雙向綁定、依賴注入、MVC等,不再贅述。
下面是實際開發項目中的目錄結構示例:
我的項目根目錄是helloangular,下面所使用的各層級目錄均創建在根目錄下,實際上也可以在根目錄下創建名爲“app”的目錄,各層級目錄放在“app”目錄下,根目錄下再放置其他公共文件、配置文件等。
index.html是項目的入口文件,代碼如下:
入口html中引入需要的js、css等資源,並聲明應用(ng-app),在需要插入視圖的標籤上聲明ng-view,這樣路由中的視圖將都插入至此標籤下。
app.js是angular項目的主js,代碼如下:
主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是一個示例視圖文件,代碼如下:
示例視圖中只是顯示了控制器中的一個屬性值。
路由中用來控制hello.html視圖的是helloController,所有的控制器被定義在script目錄下的controllers.js中,當然實際開發中,團隊中多人協作開發,可以將controllers.js進一步細分。
controllers.js中代碼如下:
訪問index.html效果如下:
其他文件:
script/directives.js 用來盛放angular中自定義組件
script/filters.js 用來盛放angular的過濾器
script/services.js 用來盛放angular的服務
framework中當然可能不是隻有angularjs,還可能有bootstrap等框架。
總之,實際項目中,創建一個入口文件(相當於java中的main函數),在入口文件中聲明好應用主模塊、依賴模塊,利用angularjs提供的路由,分模塊匹配控制器和視圖,其實這樣配置,與struts的MVC是不是就挺類似了。另外,angularjs以“模塊”爲基礎,script目錄下的五個文件,都是先申明成爲模塊,再進行操作。