Menguruskan keadaan pelanggan sahaja di AngularJS

3

Takeaways Key

Lihat model di AngularJs boleh mempunyai keadaan pelanggan sahaja, seperti 'animasi-permulaan' dan 'animasi-berakhir' atau 'diseret' dan 'jatuh'. Negeri ini boleh diuruskan apabila membuat dan menyimpan model View menggunakan perkhidmatan sumber $ Angular.

Menggabungkan logik perubahan keadaan di satu tempat, seperti perkhidmatan suntikan, dapat memudahkan kod dan mengurangkan kesilapan, terutamanya untuk aplikasi dengan pelbagai pengguna.

Teknik

seperti pembungkus fungsi boleh digunakan untuk melakukan sesuatu yang berbeza atau tambahan sebelum dan selepas menyimpan dan mengambil data. Ini dapat meningkatkan fungsi perkhidmatan sumber $.

• Mengekstrak model paparan ke dalam perkhidmatan suntikan boleh membantu aplikasi skala, terutamanya mereka yang mempunyai kemas kini yang kompleks dan masa nyata. Teknik seperti menonton dan penapisan boleh digunakan untuk menguruskan perubahan keadaan dan meningkatkan komposiliti API aplikasi.
Lihat model dalam kerangka JavaScript seperti AngularJs boleh berbeza daripada model domain pada pelayan - model paparan tidak perlu wujud di pelayan. Ia mengikuti maka model paparan boleh mempunyai pelanggan sahaja, mis. 'Animasi-bermula' dan 'animasi-berakhir' atau 'diseret' dan 'jatuh'. Siaran ini akan menumpukan perhatian kepada perubahan keadaan apabila membuat dan menyimpan model paparan menggunakan perkhidmatan sumber $ Angular.
Ia sebenarnya sangat mudah untuk pengguna sumber $, mis. Pengawal, untuk menetapkan keadaan, seperti yang ditunjukkan di bawah.

Pendekatan ini baik untuk aplikasi yang mengandungi pengguna tunggal. Bayangkan betapa membosankan dan kesilapan mereplikasi kod ini untuk pelbagai pengguna! Tetapi, bagaimana jika kita dapat merangkum logik perubahan keadaan di satu tempat?

perkhidmatan sumber $

mari kita mulakan dengan menarik sumber artikel kami ke dalam perkhidmatan suntikan. Mari kita juga menambah keadaan yang paling remeh ke atas apabila artikel pertama kali dibuat.

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

bagaimana dengan pengambilan dan penjimatan? Kami mahu artikel muncul kepada pengguna sebagai perkhidmatan sumber $, jadi ia mesti secara konsisten berfungsi seperti satu. Teknik yang saya pelajari dalam buku "Rahsia Ninja JavaScript" John Resig sangat berguna di sini - pembungkus fungsi. Inilah pelaksanaannya secara langsung diangkat ke dalam perkhidmatan sudut suntikan.

Ini membolehkan kita membungkus kaedah menyimpan dan mendapatkan artikel dan melakukan sesuatu yang berbeza/tambahan sebelum dan selepas:

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
</span>
        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>// Consumers will think they're getting an Article instance, and eventually they are...
</span>        <span>return function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}
</span>    <span>});</span>

Pengawal kami mula menjadi lebih leaner kerana ini dan tidak menyedari bagaimana keadaannya ditetapkan. Ini bagus, kerana pengawal tidak boleh peduli sama ada.

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

Manfaat enkapsulasi

kami telah pergi ke tahap yang munasabah untuk merangkum perubahan keadaan di luar pengawal kami, tetapi apa manfaat yang kami perolehi?

Pengawal kami kini boleh menggunakan pendengar menonton yang diluluskan negeri lama dan baru untuk menetapkan mesej. Ia juga boleh melakukan terjemahan tempatan, seperti yang ditunjukkan di bawah.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
</span>
        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>// Consumers will think they're getting an Article instance, and eventually they are...
</span>        <span>return function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}
</span>    <span>});</span>

Pertimbangkan seketika bahawa $ skop, arahan dan penapis membentuk API permohonan. Pandangan HTML Menggunakan API ini. Semakin besar komposit API semakin besar potensi untuk digunakan semula. Bolehkah penapis meningkatkan komposiliti ke atas menonton baru berbanding lama?

Mengarang melalui penapis, Panacea?

sesuatu seperti berikut adalah apa yang saya fikirkan. Setiap bahagian ungkapan menjadi diguna semula.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('wrapMethod', function() {
</span>        <span>return function(object<span>, method, wrapper</span>) {
</span>            <span>var fn = object[method];
</span>
            <span>return object[method] = function() {
</span>                <span>return wrapper.apply(this, [fn.bind(this)].concat(
</span>                    <span>Array.prototype.slice.call(arguments))
</span>                <span>);
</span>            <span>};
</span>        <span>}
</span>    <span>});</span>

Sehubungan dengan sudut 1.3, penapis boleh menggunakan harta yang dikenakan $, tetapi penggunaannya sangat tidak digalakkan kerana sudut tidak dapat cache hasil memanggil penapis berdasarkan nilai parameter input. Oleh itu, kita akan lulus dalam parameter negara untuk limittotransition (keadaan terdahulu) dan diterjemahkan (terjemahan yang tersedia).

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates, wrapMethod</span>) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>wrapMethod(Article, 'get', function(original<span>, params</span>) {
</span>            <span>var article = original(params);
</span>
            article<span>.$promise.then(function(article) {
</span>                article<span>.state = ArticleStates.NONE;
</span>            <span>});
</span>
            <span>return article;
</span>        <span>});
</span>
        <span>// Consumers will actually call $save with optional params, success and error arguments
</span>        <span>// $save consolidates arguments and then calls our wrapper, additionally passing the Resource instance
</span>        <span>wrapMethod(Article, 'save', function(original<span>, params, article, success, error</span>) {
</span>            article<span>.state = ArticleStates.SAVING;
</span>
            <span>return original.call(this, params, article, function (article) {
</span>                article<span>.state = ArticleStates.SAVED;
</span>                success <span>&& success(article);
</span>            <span>}, function(article) {
</span>                article<span>.state = ArticleStates.ERROR;
</span>                error <span>&& error(article);
</span>            <span>});
</span>        <span>});
</span>
        <span>// $resource(...) returns a function that also has methods
</span>        <span>// As such we reference Article's own properties via extend
</span>        <span>// Which in the case of get and save are already wrapped functions
</span>        <span>return angular.extend(function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}, Article);
</span>    <span>});</span>

Kerana ini kita memerlukan sedikit pindaan kepada artikel:

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        
        <span>console.log(article.state); // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({}, function success() {
</span>                <span>console.log(article.state); // "SAVED"
</span>            <span>}, function error() {
</span>                <span>console.log(article.state); // "ERROR"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

Hasil akhirnya tidak begitu cantik tetapi masih sangat kuat:

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article, ArticleStates</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>
        <span>var translations = {};
</span>        translations<span>[ArticleStates.SAVED] = 'Saved, oh yeah!';
</span>        translations<span>['default'] = '';
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({});
</span>        <span>};
</span>
        $scope<span>.$watch('article.state', function(newState<span>, oldState</span>) {
</span>            <span>if (newState == ArticleStates.SAVED && oldState == ArticleStates.SAVING) {
</span>                $scope<span>.message = translations[newState];
</span>            <span>} else {
</span>                $scope<span>.message = translations['default'];
</span>            <span>}
</span>        <span>});
</span>    <span>});</span>

Pengawal kami menjadi lebih leaner lagi, terutamanya jika anda menganggap terjemahan dapat ditarik ke dalam perkhidmatan suntikan:

<span><span><span><p</span>></span>{{article.state | limitToTransition:"SAVING":"SAVED" | translate}}<span><span></p</span>></span></span>

Kesimpulan

Mengekstrak model paparan ke dalam perkhidmatan suntikan membantu kami skala aplikasi. Contoh yang diberikan dalam jawatan ini sengaja mudah. Pertimbangkan aplikasi yang membolehkan perdagangan pasangan mata wang (mis. GBP ke USD, EUR ke GBP dan lain -lain). Setiap pasangan mata wang mewakili produk. Dalam permohonan sedemikian terdapat beratus-ratus produk, dengan setiap menerima kemas kini harga masa nyata. Kemas kini harga mungkin lebih tinggi atau lebih rendah daripada harga semasa. Salah satu bahagian permohonan itu mungkin mengambil berat tentang harga yang lebih tinggi dua kali berturut -turut, sementara bahagian lain mungkin mengambil berat tentang harga yang baru saja turun. Mampu menonton perubahan harga ini dengan memudahkan pelbagai bahagian yang memakan aplikasi.

Saya membentangkan kaedah alternatif untuk menonton berdasarkan nilai lama dan baru, penapisan. Kedua -duanya adalah teknik yang boleh diterima sepenuhnya - sebenarnya menonton adalah apa yang saya fikirkan ketika saya mula meneliti jawatan ini. Penapisan adalah peningkatan yang berpotensi yang dikenal pasti berhampiran penyempurnaan pos.

Saya ingin melihat sama ada teknik yang saya telah membentangkan membantu anda skala aplikasi sudut. Mana -mana dan semua maklum balas akan banyak diterima dalam komen!

sampel kod yang dibuat semasa meneliti siaran ini juga boleh didapati di GitHub.

soalan yang sering ditanya mengenai menguruskan keadaan klien di AngularJS

Apakah peranan $ StateProvider dalam menguruskan keadaan klien dalam AngularJS? Ia adalah perkhidmatan yang membolehkan anda menentukan negeri untuk permohonan anda. Setiap negeri sepadan dengan "tempat" dalam permohonan dari segi UI dan navigasi keseluruhan. $ StateProvider menyediakan API untuk laluan pandangan yang berbeza. Apabila keadaan diaktifkan, ia dapat menyelesaikan satu set data melalui harta menyelesaikan. Data ini kemudian disuntik ke dalam pengawal. Walau bagaimanapun, menggunakan UI-Router adalah pilihan yang popular di kalangan pemaju. UI-ROUTER adalah modul pihak ketiga yang menyediakan penyelesaian yang fleksibel dan mantap untuk menguruskan negara. Ia membolehkan pandangan bersarang dan pelbagai pandangan bernama, yang boleh sangat berguna dalam aplikasi yang lebih besar. Alternatif yang lebih kuat dan fleksibel kepada sistem penghalaan lalai di AngularJS. Walaupun penghala lalai menggunakan laluan untuk menguruskan negeri, penggunaan ui-router, yang boleh bersarang dan dianjurkan secara hierarki. Ini membolehkan aplikasi yang lebih kompleks dengan pelbagai pandangan dan negara bersarang. Mengekalkan konsistensi dan ramalan antara muka pengguna. Tanpa pengurusan negara yang betul, ia boleh menjadi semakin sukar untuk mengesan perubahan dan menguruskan tingkah laku aplikasi, yang membawa kepada pepijat dan pengalaman pengguna yang lemah. Di AngularJS, negara merujuk kepada status sistem atau aplikasi pada titik tertentu dalam masa. Ia boleh merangkumi pelbagai perkara seperti status antara muka pengguna, nilai model data, dan lain -lain negeri digunakan untuk menentukan pandangan UI, dan mereka boleh bersarang dan teratur secara hierarki. Setiap negeri sepadan dengan "tempat" dalam permohonan dari segi keseluruhan UI dan navigasi. Digunakan untuk menyelesaikan satu set data sebelum keadaan diaktifkan. Data ini kemudian disuntik ke dalam pengawal. Harta penyelesaian adalah objek yang mengandungi pasangan nilai utama. Kuncinya adalah nama kebergantungan yang akan disuntik ke dalam pengawal, dan nilai adalah fungsi yang mengembalikan nilai ketergantungan.

Apakah faedah menggunakan ui-router untuk pengurusan negeri di AngularJS? Ia membolehkan pandangan bersarang dan pelbagai pandangan bernama, yang boleh menjadi sangat berguna dalam aplikasi yang lebih besar. Ia juga menyediakan penghalaan berasaskan negeri, yang lebih fleksibel dan berkuasa daripada penghalaan berasaskan laluan lalai di AngularJS. Dalam AngularJs menggunakan kaedah $ state.go (). Kaedah ini mengambil nama negara sebagai hujah pertamanya, dan objek pilihan parameter sebagai hujah kedua. Objek Parameter boleh digunakan untuk lulus data ke negeri yang beralih ke.

Bolehkah saya menggunakan AngularJs tanpa alat pengurusan negeri? Walau bagaimanapun, apabila aplikasi anda tumbuh dalam kerumitan, pengurusan negara boleh menjadi semakin sukar tanpa menggunakan alat seperti UI-Router. Menggunakan alat pengurusan negeri dapat membantu mengekalkan konsistensi dan kebolehprediksi antara muka pengguna aplikasi anda. Mengekalkan konsistensi antara muka pengguna, mengesan perubahan dalam keadaan aplikasi, dan menguruskan tingkah laku aplikasi. Cabaran-cabaran ini dapat dikurangkan dengan menggunakan alat pengurusan negeri seperti UI-Router.

Atas ialah kandungan terperinci Menguruskan keadaan pelanggan sahaja di AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!