実践総括-見逃せないAnglar応用技術
anglarの核心思想はデータを通してすべてを駆動するので、その他のものはすべてデータの延長です.Javascriptのすべての対象の思想を当てはめて、anglarの中ですべてのデータを言うことができます.
プロジェクト構築について
(1)requirejs及びYeoman
Anglarを接触し始めたばかりの時に、よく似たような問題と疑問に思っています.私が実践している答えはrequirejsやYeomanはいらないです.前者は使わないです.angglar自身はmoduleの実現があります.後者はAnglarの組織構造とプロジェクトの構築がこんなに煩雑になる必要がないからです.手書きやgithub上でseedプロジェクトを作成すればいいです.
(2)プロジェクト構造の整理方法
この問題は廃材があります.完全に人によってプロジェクトによって違います.個人が推奨するのは二つの組織構造です.コードによって機能します.つまりcontrollerは一つのフォルダの下に置いて、servicesは一つのフォルダの下に置いています.もう一つはUserのように対応するtemplate、services、controllerは全部Userフォルダの下に置いています.
両方ともいいです.メンテナンスの観点から第二の方がいいと思います.
(3)controllerとserviceの区分
ここでcontrollerは通常は一つのページに一つのcontrollerであり、一つのページに公共の部分があれば、いつも一つのcontrollerを利用します.serviceについては二つの部分に分けます.一つはサーバーのインタラクティブデータのserviceで、もう一つはいくつかの機能性のcomonの内容です.
サービスは機能とモジュールによってさらに分けますか?これはプロジェクトによって来ました.
(4)Anglarプラグインおよびライブラリの使用
一つのプロジェクトのすべてのものについてはオンラインで既製のものを取るのは現実的ではないが、すべてのものは自分で書くのはもっと現実的ではない.Anglarの多くのプラグインはAnglarチームによって開発されたものや一部の人はjqueryプラグインでカプセル化されている.満足できないなら自分で書いてもいいですか?既存のプラグインを使ってもいいです.
多くのプラグインはUIプラグインです.煩雑さを追求する必要はないです.簡単なHTMLコントロールにも簡単な美しさがあります.
Anglarプラグインの衝突に遭遇した場合、特にUIプラグインは、その中の一つを放棄します.例えば、angglar-uiとangglar-strap.
テクニックを使う
次は本文に入ります.私はアングラーを使う過程で使ったいくつかの技術を列挙します.場面の形式で列挙します.ここではアングラーの基礎概念については説明できません.本文はテクニック的なもので、基礎教程ではありません.
(1)angglarの中で「{}」はPythonのflashkで衝突します.
Pythonのflashkで使用されるテンプレートの中で、データバインディングも二つの「\」大括弧を通して、これはアングラーのデータバインディングに衝突があります.これは二つの解決方法があります.一つはアングラーのバインディングマークを修正することです.もう一つはflashkのバインディングマークを修正することです.ここで両案とも与えられます.
アングラーを変更:
修正flashk:
(2)urlを除去するときはいつもデフォルトで「〓」が付いています.
routeを設定すると、HTML 5モードがオンします.
(3)ng-click=「expression」および同様のコマンドは、どのようにexpressionに複数の表現を書きますか?
例えば、私は一つのng-clickで2つの変数に値を付けたいです.「;」で分割すればいいです.
このような場合、普通は文字列または数字を傍受する時に現れます.$scope.$watch.("name").function(").有効ではないか、または一回だけ有効にしてください.解決方法は$watchができるだけ傍受する対象です.Objectに傍受する値を付けてください.
anglar-uiの中のmodalを使うと、これが明らかです.具体的な原因は、$scopeの継承のためです.modalは現在のページのcontrolに相当して、もう一つのscopeを作成しました.字面量については元のチェーンを追跡することができません.解決するには一対の象が必要です.プロトタイプチェーンを通じて親子scopeにわたるデータ更新のバインディングができます.
(5)ng-viewの内容は全ページで表示してほしいです.
通常のページには固定されたtop-menuまたはsidebarがあるかもしれません.このような固定された部分、そして毎回routeが変化するのはng-viewのtemplateです.もし一つのページが完全に自分を表示したいなら、top-menuなどの固定された部分を含みません.
ここでは通常、index.1つのng-viewが表示するtemplatesであり、top-menuとsidebarはindex.htmlにあり、それらの表示をng-infを通して一つの変数制御をバインディングする.
一つのページが完全に表示される必要がある場合、sidebarなどは表示されません.そのcontrollerでは、$scope.$emitを介して上にメッセージを送信し、indexページのcontrollerは、$scope.$onを通じてメッセージを傍受し、そのメッセージを聞くと、制御sidebarの暗黙の変数を変更します.
serviceを通じてグローバル変数のコントロールを行うこともできます.
(6)ng-showの代わりに、ng-ifで覚えておく
これはangglarの小さいピットです.大きいピットとも言えます.長いリストデータの中には、デフォルトで隠して表示されているものがあります.この部分は表示されている内容を制御できます.多くのデータバインディングが伴います.これはページ面にレンダリングされている時、性能に非常に影響します.
列を挙げます.たとえば、通常のアングラーはページのデータバインディングが2000個を超えないことを勧めます.もし現在あるページが2000個のモデルを直接結びつけていたら、ロードしたら、非常カードが発見されます.100個ごとのモデルをng-showに設定すれば、デフォルトでは表示されません.やはりカードです.
その後、すべてのng-showをng-infに変えたら、性能が一瞬で二つのアプリケーションのように速いことが分かります.原因はng-showでまだその中のすべてのバインディングを実行します.ng-infはtrueに等しいです.つまり、表示される時にバインディングを実行します.そうすると、性能が大幅に向上します.以前はこの簡単な修正によって、ページのロードは10倍ぐらい早いです.
ですから、ng-infが使える場合は、すべてのng-showとng-hideの代わりに使ってください.
(7)ng-bindについて
一般的にはhtml元素のバインディングデータは、ng-bindがあれば十分ですが、いくつかの場面でバインディングが必要なのは、一般的なデータではなく、htmlです.では、ng-bindは足りません.ng-bind-htmlを使って、内容をhtml形式として出力します.
(8)ng-repeatデータfilterを取得した結果
これは一般的に検索する時に必要です.例えば多重ng-repeatデータがリストを形成します.そしてfilterのフィールドがあります.今filterを得た後の結果は2つの方法があります.
一つはhtmlのng-repeatに似ています.
第一の方式が便利で、第二の方式がもっと良くて、性能もいいです.
(9)ng-class及びng-styleは、赋価を判断する
変数の値によって、クラスが適用されるかどうか、およびスタイルが異なります.
ng-class=「{state-error}!food Form.foodstock.$valid]」
ng-style='''i.co lor=''|||i.name=='生きる?'default':''唴fff''
(10)formチェックはinputを例にしています.
アングラーのformはinputのHTML 5属性によって検証できます.ここでは主にformとinputのname属性によってロックされています.formname.inputname.validはinputnameの空間が自分の属性によって検証されているかどうかを示しています.
(11)$resourceとhttpの$promise
(12)ワンチモニターの中の一つの属性のみ
$watchの三つ目のパラメータはtrueに設定すれば、deep watchができます.でも、時々はcollectionの全部の属性を監督する必要がないです.その中の一つまたはいくつかを監視すれば、forループでループできます.watchは明らかに大きすぎます.
次のような書き方で、collectionの単独のobject属性を監視できます.
(13) debounce手振れ防止処理
これは頻繁に出発する処理にとって非常に有用であり、キーワードを根絶した瞬間検索の場合、ドルdebounceをサービスとしてパッケージ化し、直接インターフェースを呼び出す、コード:http://jsfiddle.net/Warspawn/6K7Kd/
(14)ある位置に素早く位置決めする
一般的にはページ内ではという形でjs codeに合せて高速位置が决められます。anglarでも同じ原理で実现させます。コードは以下の通りです。 var old = $location.hash() $location.hash('batmenu-bottom); $アンチョル・スコープ $location.hash(old) このように书くのは、直接locations.hashはurlの変化、ページのピンプになるのです。 とすみません.私はここまでしかけられませんでした.あなたのものは资料を调べて、自分で分を実行します。必要なTXに役に立てると思います。ここからも新しいのものものです。続けます。
プロジェクト構築について
(1)requirejs及びYeoman
Anglarを接触し始めたばかりの時に、よく似たような問題と疑問に思っています.私が実践している答えはrequirejsやYeomanはいらないです.前者は使わないです.angglar自身はmoduleの実現があります.後者はAnglarの組織構造とプロジェクトの構築がこんなに煩雑になる必要がないからです.手書きやgithub上でseedプロジェクトを作成すればいいです.
(2)プロジェクト構造の整理方法
この問題は廃材があります.完全に人によってプロジェクトによって違います.個人が推奨するのは二つの組織構造です.コードによって機能します.つまりcontrollerは一つのフォルダの下に置いて、servicesは一つのフォルダの下に置いています.もう一つはUserのように対応するtemplate、services、controllerは全部Userフォルダの下に置いています.
両方ともいいです.メンテナンスの観点から第二の方がいいと思います.
(3)controllerとserviceの区分
ここでcontrollerは通常は一つのページに一つのcontrollerであり、一つのページに公共の部分があれば、いつも一つのcontrollerを利用します.serviceについては二つの部分に分けます.一つはサーバーのインタラクティブデータのserviceで、もう一つはいくつかの機能性のcomonの内容です.
サービスは機能とモジュールによってさらに分けますか?これはプロジェクトによって来ました.
(4)Anglarプラグインおよびライブラリの使用
一つのプロジェクトのすべてのものについてはオンラインで既製のものを取るのは現実的ではないが、すべてのものは自分で書くのはもっと現実的ではない.Anglarの多くのプラグインはAnglarチームによって開発されたものや一部の人はjqueryプラグインでカプセル化されている.満足できないなら自分で書いてもいいですか?既存のプラグインを使ってもいいです.
多くのプラグインはUIプラグインです.煩雑さを追求する必要はないです.簡単なHTMLコントロールにも簡単な美しさがあります.
Anglarプラグインの衝突に遭遇した場合、特にUIプラグインは、その中の一つを放棄します.例えば、angglar-uiとangglar-strap.
テクニックを使う
次は本文に入ります.私はアングラーを使う過程で使ったいくつかの技術を列挙します.場面の形式で列挙します.ここではアングラーの基礎概念については説明できません.本文はテクニック的なもので、基礎教程ではありません.
(1)angglarの中で「{}」はPythonのflashkで衝突します.
Pythonのflashkで使用されるテンプレートの中で、データバインディングも二つの「\」大括弧を通して、これはアングラーのデータバインディングに衝突があります.これは二つの解決方法があります.一つはアングラーのバインディングマークを修正することです.もう一つはflashkのバインディングマークを修正することです.ここで両案とも与えられます.
アングラーを変更:
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// config , route module . angular {{ }} , {[{ }]} .修正flashk:
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='{%',
block_end_string='%}',
variable_start_string='{#',
variable_end_string='#}',
comment_start_string='<#',
comment_end_string='#>',
))
app = CustomFlask(__name__, instance_path='/web')(2)urlを除去するときはいつもデフォルトで「〓」が付いています.
routeを設定すると、HTML 5モードがオンします.
angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); //
}
]);(3)ng-click=「expression」および同様のコマンドは、どのようにexpressionに複数の表現を書きますか?
例えば、私は一つのng-clickで2つの変数に値を付けたいです.「;」で分割すればいいです.
<a ng-click="obja=1;objb=2"></a>このような場合、普通は文字列または数字を傍受する時に現れます.$scope.$watch.("name").function(").有効ではないか、または一回だけ有効にしてください.解決方法は$watchができるだけ傍受する対象です.Objectに傍受する値を付けてください.
anglar-uiの中のmodalを使うと、これが明らかです.具体的な原因は、$scopeの継承のためです.modalは現在のページのcontrolに相当して、もう一つのscopeを作成しました.字面量については元のチェーンを追跡することができません.解決するには一対の象が必要です.プロトタイプチェーンを通じて親子scopeにわたるデータ更新のバインディングができます.
(5)ng-viewの内容は全ページで表示してほしいです.
通常のページには固定されたtop-menuまたはsidebarがあるかもしれません.このような固定された部分、そして毎回routeが変化するのはng-viewのtemplateです.もし一つのページが完全に自分を表示したいなら、top-menuなどの固定された部分を含みません.
ここでは通常、index.1つのng-viewが表示するtemplatesであり、top-menuとsidebarはindex.htmlにあり、それらの表示をng-infを通して一つの変数制御をバインディングする.
一つのページが完全に表示される必要がある場合、sidebarなどは表示されません.そのcontrollerでは、$scope.$emitを介して上にメッセージを送信し、indexページのcontrollerは、$scope.$onを通じてメッセージを傍受し、そのメッセージを聞くと、制御sidebarの暗黙の変数を変更します.
serviceを通じてグローバル変数のコントロールを行うこともできます.
(6)ng-showの代わりに、ng-ifで覚えておく
これはangglarの小さいピットです.大きいピットとも言えます.長いリストデータの中には、デフォルトで隠して表示されているものがあります.この部分は表示されている内容を制御できます.多くのデータバインディングが伴います.これはページ面にレンダリングされている時、性能に非常に影響します.
列を挙げます.たとえば、通常のアングラーはページのデータバインディングが2000個を超えないことを勧めます.もし現在あるページが2000個のモデルを直接結びつけていたら、ロードしたら、非常カードが発見されます.100個ごとのモデルをng-showに設定すれば、デフォルトでは表示されません.やはりカードです.
その後、すべてのng-showをng-infに変えたら、性能が一瞬で二つのアプリケーションのように速いことが分かります.原因はng-showでまだその中のすべてのバインディングを実行します.ng-infはtrueに等しいです.つまり、表示される時にバインディングを実行します.そうすると、性能が大幅に向上します.以前はこの簡単な修正によって、ページのロードは10倍ぐらい早いです.
ですから、ng-infが使える場合は、すべてのng-showとng-hideの代わりに使ってください.
(7)ng-bindについて
一般的にはhtml元素のバインディングデータは、ng-bindがあれば十分ですが、いくつかの場面でバインディングが必要なのは、一般的なデータではなく、htmlです.では、ng-bindは足りません.ng-bind-htmlを使って、内容をhtml形式として出力します.
(8)ng-repeatデータfilterを取得した結果
これは一般的に検索する時に必要です.例えば多重ng-repeatデータがリストを形成します.そしてfilterのフィールドがあります.今filterを得た後の結果は2つの方法があります.
一つはhtmlのng-repeatに似ています.
ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"第一の方式が便利で、第二の方式がもっと良くて、性能もいいです.
(9)ng-class及びng-styleは、赋価を判断する
変数の値によって、クラスが適用されるかどうか、およびスタイルが異なります.
ng-class=「{state-error}!food Form.foodstock.$valid]」
ng-style='''i.co lor=''|||i.name=='生きる?'default':''唴fff''
(10)formチェックはinputを例にしています.
アングラーのformはinputのHTML 5属性によって検証できます.ここでは主にformとinputのname属性によってロックされています.formname.inputname.validはinputnameの空間が自分の属性によって検証されているかどうかを示しています.
(11)$resourceとhttpの$promise
$q.all([
resource.query().$promise,
resource2.query().$promise
]).then(functon(success){
console.log(success);
},functon(error){
console.log(error);
});foodFactory.food.save(f).$promise.then(function(result){
foodFactory.food.get({id:result.id}).$promise.then(function(data){
});
});(12)ワンチモニターの中の一つの属性のみ
$watchの三つ目のパラメータはtrueに設定すれば、deep watchができます.でも、時々はcollectionの全部の属性を監督する必要がないです.その中の一つまたはいくつかを監視すれば、forループでループできます.watchは明らかに大きすぎます.
次のような書き方で、collectionの単独のobject属性を監視できます.
$scope.people = [
{
"groupname": "g1",
"persions": [
{
"id": 1,
"name": "bill"
},
{
"id": 2,
"name": "bill2"
}
]
},
{
"groupname": "g2",
"persions": [
{
"id": 3,
"name": "bill3"
},
{
"id": 4,
"name": "bill4"
}
]
}
]
$scope.$watch(function($scope) {
return $scope.people.map(function(obj) {
return obj.persions.map(function(g){
return g.name
});
});
}, function (newVal) {
$scope.count++;
$scope.msg = 'person name was changed'+ $scope.count;
}, true);(13) debounce手振れ防止処理
これは頻繁に出発する処理にとって非常に有用であり、キーワードを根絶した瞬間検索の場合、ドルdebounceをサービスとしてパッケージ化し、直接インターフェースを呼び出す、コード:http://jsfiddle.net/Warspawn/6K7Kd/
(14)ある位置に素早く位置決めする
一般的にはページ内ではという形でjs codeに合せて高速位置が决められます。anglarでも同じ原理で実现させます。コードは以下の通りです。 var old = $location.hash() $location.hash('batmenu-bottom); $アンチョル・スコープ $location.hash(old) このように书くのは、直接locations.hashはurlの変化、ページのピンプになるのです。 とすみません.私はここまでしかけられませんでした.あなたのものは资料を调べて、自分で分を実行します。必要なTXに役に立てると思います。ここからも新しいのものものです。続けます。