2015/07/01

AngularJS 筆記 - 基礎檔案 Overview

目錄最外層通常會有 package.json, bower.json 其他可能會有 gulpfile.js 或是 grunt.js

package.json 通常會拿來裝 gulp 的 plugin
bower.json 則是拿來安裝一些跟 Web 相關的套件 (包含 Angularjs Directive, JQuery...etc)

通常會有個 app 的資料夾,裡頭是放置你的 AngularJS Web App

會有一個 app.js ,這是整個 AngularJS 的核心,要在這邊定義你的 Web App,並幫它掛上需要使用的 Module 以及設定一些 Module 的內容(例如: Routing)

整個 App 的邏輯是由 Controller 負責,你可以定義自己的 Controller 並設定它為一個有名稱的 Module,在 app.js 中掛上它

每個 Controller 有自己的 $scope,看起來它的意思就是像是指向物件本身的 this,你可以給予這個 Controller 自帶方法跟屬性

取得資料或是一些共通行為通常都是透過 Service ,你可以撰寫自己的 Service 註冊在 app.js ,最後在 Controller 進行調用 (參考: https://docs.angularjs.org/guide/services)

例如一個 phoneListService 取得所有清單,在 Controller 裡頭直接以 phoneListService 參數帶入調用

關於 View ,也是使用基礎的 HTML 標籤語法配合一些 AngularJS 的解析語句

你可以用 Directive 自己實作一些自訂標籤或是屬性(看是使用 A, E, C 哪個設定),通常每個 Directive 會包含一個 .js 跟一個 .html 分別用來定義邏輯跟視圖 (參考: https://docs.angularjs.org/guide/directive)

你可以定義 Filter 做基本的過濾操作或是進行格式化輸出


完整的文件可以參考官方開發手冊: https://docs.angularjs.org/guide/

No comments:

Post a Comment