タグ付けされた質問 「angularjs」

オープンソースのJavaScriptフレームワークであるAngularJS（1.x）に関する質問に使用します。Angular 2以降のバージョンではこのタグを使用しないでください。代わりに、[angular]タグを使用してください。

3
ng-appディレクティブの配置（html vs body）
私は最近、angularで構築されたWebアプリケーションのコードを確認しましたがng-app="myModule"、<body>タグに配置されたディレクティブで記述されていることがわかりました。angularを学ぶとき、私はこれが<html>タグで使用されているのを見たことがあります。angulardocs here、here、およびそれらのチュートリアルで推奨されています。 私はこれを自分で少し調べましたが、ページに対する複数のモジュールのロードについて説明しているSOの質問、特にこの質問と同様にこの質問を見つけました。ただし、この手法は、本体内の要素にng-appを配置し、手動のブートストラップを使用して2つの角度付きアプリを同時に実行するため、私の場合とは異なります。 私の知る限りでは、実行時にng-appon <html>またはを使用したアプリに違いはありません<body>。私が理解しているようにng-app、Angleアプリケーションのルートを指定します。そのため、これをに配置すると、Angleのスコープから除外<body>さ<head>れますが、これが物事に影響する主な方法は考えられません。だから私の質問は：ng-appこれらのタグのいずれかを他のタグの代わりに配置することの技術的な違いは何ですか？
103 angularjs 
2
AngularJS：モデルの変更を自動的に検出
モデルの値が変更されるたびに、コードを自動的に実行する（サーバーにデータを保存するなど）ようにしたいとします。ng-changeモデルを変更する可能性のある各コントロールに何かを設定することによってこれを行う唯一の方法はありますか？ つまり、ビューを使用すると、明示的に何かを接続する必要なしにモデルが変更されると、物事が正しく変更されます。サーバーに保存するコードを実行できることに類似していますか？何かのようなもの myModel.on('change', function() { $.post("/my-url", ...); }); あなたがバックボーンのようなもので見るかもしれないように。
7
Angularjsはベストプラクティスを縮小します
私はhttp://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.htmlを読んでい ますが、javascriptを縮小すると、angularjs依存性注入に問題があることがわかりました。の代わりに var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/angular/angular.js/commits') .then(function(response) { $scope.commits = response.data }) } あなたは使うべきです var MyController = ['$scope', '$http', function($scope, $http) { $http.get('https://api.github.com/repos/angular/angular.js/commits') .then(function(response) { $scope.commits = response.data }) }] 全体的に見て、2番目のスニペットは古いバージョンのangularjs用のものだと思いましたが.... 常に注入方法（2番目）を使用する必要がありますか？
2
ngModelフォーマッターとパーサー
同じ質問を別の形式で投稿しましたが、誰も答えませんでした。フォーマッタとパーサーが角度のあるjsで何をするのかを明確に把握できません。 定義上、フォーマッターとパーサーはどちらも私に似ています。私はこのangularjsに慣れていないので、私は間違っているかもしれません。 フォーマッタの定義 モデル値が変更されるたびにパイプラインとして実行する関数の配列。次に、各関数が呼び出され、値が次の関数に渡されます。コントロールと検証で表示する値をフォーマット/変換するために使用されます。 パーサーの定義 コントロールがDOMから値を読み取るたびに、パイプラインとして実行する関数の配列。次に、各関数が呼び出され、値が次の関数に渡されます。値の検証と同様に、値のサニタイズ/変換に使用されます。検証のために、パーサーは$ setValidity（）を使用して有効性の状態を更新し、無効な値に対して未定義を返す必要があります。 簡単な例で両方の機能を理解できるようにしてください。両方の簡単な説明をいただければ幸いです。
9
Angular Materialで<md-icon>を使用するには？
これが機能していないので、私はマテリアルのアイコンをどのように使用するのか疑問に思っていました： &lt;material-icon icon = "/img/icons/ic_access_time_24px.svg"&gt; &lt;/material-icon&gt; icon属性のパラメーターとして指定されたパスに問題があると思います。このアイコンフォルダが実際にどこにあるのか知りたいのですが。
7
単一ページアプリにAngularJSを備えた複数のコントローラー
私が知りたいのは、単一ページのアプリケーションに複数のコントローラーを使用する方法です。私はそれを理解しようとしましたが、私のものと非常によく似た質問を見つけましたが、単一のページアプリに複数のコントローラーを使用しないという特定の問題を解決するためのさまざまな答えがあります。 1つのページに複数のコントローラーを使用するのは賢明ではないからでしょうか。それとも不可能ですか？ メインページで動作するキックアスイメージカルーセルコントローラーが既にあるとしましょう。その後、モーダルの使用方法（例を挙げましょう）を習得し、そのための新しいコントローラーも必要です（またはコントローラーに必要な他のすべてのもの）。それから私は何をしますか？ 他の質問に対するいくつかの回答を見てきました。彼らは私とほとんど同じことについて尋ね、人々は「* OMG。なぜあなたはそれをするのですか、これをしてください...」と答えます。 最良の方法は何ですか、またはどのように行いますか？ 編集する あなたの多くは、2つのコントローラーを宣言し、ng-controllerを使用してそれを呼び出すだけで答えています。以下のコードを使用して、ng-controllerでMainCtrlを呼び出します。 app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: "templates/main.html", controller:'MainCtrl', }) .otherwise({ template: 'does not exists' }); }); ng-controllerを使わずにコントローラーをここで設定する必要があるのはなぜですか？これが私を混乱させたものです。（この方法で2つのコントローラーを追加することはできないと思います...）
14
UI-Routerを使用してページタイトルを設定する
AngularJSベースのアプリを移行して、組み込みルーティングの代わりにui-routerを使用しています。以下のように構成しました .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url: '/home', templateUrl : 'views/home.html', data : { pageTitle: 'Home' } }) .state('about', { url: '/about', templateUrl : 'views/about.html', data : { pageTitle: 'About' } }) }); pageTitle変数を使用してページのタイトルを動的に設定するにはどうすればよいですか？組み込みのルーティングを使用して、私は $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){ $rootScope.pageTitle = $route.current.data.pageTitle; }); 次に示すように、変数をHTMLにバインドします &lt;title ng-bind="$root.pageTitle"&gt;&lt;/title&gt; ui-routerを使用してフックできる同様のイベントはありますか？「onEnter」関数と「onExit」関数があることに気づきましたが、これらは各状態に関連付けられているようで、コードを繰り返して各状態の$ rootScope変数を設定する必要があります。
4
AngularJS：ファクトリーとは何ですか？
私は多くの作業を行ってきましたがAngular.js、全体として、それは興味深い強力なフレームワークであることがわかりました。 サービスとファクトリー、プロバイダーとバリューについて多くの議論があったことは知っていますが、それが何であるかについてはまだかなり混乱していFactoryます。 ファクトリは、他のStackOverflowディスカッションで次のように定義されています。 工場 構文：module.factory( 'factoryName', function );結果：factoryNameを注入可能な引数として宣言すると、module.factoryに渡された関数参照を呼び出すことによって返される値が提供されます。 この説明は理解するのが非常に難しいと思います、そしてそれは工場が何であるかについての私の理解を増しません。 うの誰もが正確に何についての共有への説明や実際の生活の例を持ってFactoryいると、なぜあなたがの代わりにそれを使用する必要がありますService、Providerまたは他の？ 更新 A service は任意のオブジェクトへの参照を保持します。 A factory は任意のオブジェクトを返す関数です A provider は任意の関数を返す関数です - あー -
3
ngRepeatの「トラックバイ」式を理解する
angularjsでのng-repeatの表現によるトラックがどのように機能するかを理解するのが困難です。ドキュメントは非常に少ないです：http : //docs.angularjs.org/api/ng/directive/ngRepeat これらの2つのコードスニペットの違いは、データバインディングと他の関連する側面の点でどのように説明できますか？ と： track by $index &lt;!--names is an array--&gt; &lt;div ng-repeat="(key, value) in names track by $index"&gt; &lt;input ng-model="value[key]"&gt; &lt;/div&gt; なし（同じ出力） &lt;!--names is an array--&gt; &lt;div ng-repeat="(key, value) in names"&gt; &lt;input ng-model="value[key]"&gt; &lt;/div&gt;
5
AngularJS：モデル要素がモデル配列からスプライスされたときにng-repeatリストが更新されない
2つのコントローラーがあり、それらの間でapp.factory関数を使用してデータを共有しています。 最初のコントローラーは、リンクをクリックすると、モデル配列（pluginsDisplayed）にウィジェットを追加します。ウィジェットが配列にプッシュされ、この変更がビューに反映されます（ng-repeatを使用して配列の内容を表示します）。 &lt;div ng-repeat="pluginD in pluginsDisplayed"&gt; &lt;div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"&gt;&lt;/div&gt; &lt;/div&gt; ウィジェットは、k2plugin、remove、およびresizeの3つのディレクティブに基づいて構築されています。removeディレクティブは、k2pluginディレクティブのテンプレートにスパンを追加します。上記のスパンをクリックすると、共有配列への正しい要素がで削除されArray.splice()ます。共有配列は正しく更新されますが、変更はビューに反映されません。ただし、別の要素が追加されると、削除後にビューが正しく更新され、以前に削除された要素は表示されません。 何が問題になっていますか？これが機能しない理由を教えてください。AngularJSで私がしようとしていることを行うためのより良い方法はありますか？ これは私のindex.htmlです： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"&gt; &lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app="livePlugins"&gt; &lt;div ng-controller="pluginlistctrl"&gt; &lt;span&gt;Add one of {{pluginList.length}} plugins&lt;/span&gt; &lt;li ng-repeat="plugin in pluginList"&gt; &lt;span&gt;&lt;a href="" ng-click="add()"&gt;{{plugin.name}}&lt;/a&gt;&lt;/span&gt; &lt;/li&gt; &lt;/div&gt; &lt;div ng-controller="k2ctrl"&gt; &lt;div ng-repeat="pluginD in pluginsDisplayed"&gt; &lt;div …
2
ng-repeat内のng-clickで非表示のdivを表示
私は、医療手順のjsonファイルをフィルター処理するAngular.jsアプリに取り組んでいます。ng-clickを使用して（同じページで）手順の名前をクリックすると、各手順の詳細が表示されます。これは私がこれまで持ってきたもので、.procedure-details divがdisplay：noneに設定されています： &lt;ul class="procedures"&gt; &lt;li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"&gt; &lt;h4&gt;&lt;a href="#" ng-click="?"&gt;{{procedure.definition}}&lt;/a&gt;&lt;/h4&gt; &lt;div class="procedure-details"&gt; &lt;p&gt;Number of patient discharges: {{procedure.discharges}}&lt;/p&gt; &lt;p&gt;Average amount covered by Medicare: {{procedure.covered}}&lt;/p&gt; &lt;p&gt;Average total payments: {{procedure.payments}}&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; 私は角度がかなり新しいです。助言がありますか？
6
AngularJS：シングルページアプリケーションで認証を使用する基本的な例
私はAngularJSを初めて使用し、彼らのチュートリアルを経験しました。 各RESTエンドポイントを認証する必要があるプロジェクトのバックエンドの準備ができています。 私は何をしたい 。）私は自分のプロジェクトのための単一のページを持っていると思いますhttp://myproject.com。 b。）ユーザーがブラウザーでURLにアクセスすると、ユーザーがログインしているかどうかに基づいて、同じURLでホームページ/ビューまたはログインページ/ビューが表示されますhttp://myproject.com。 c。）ユーザーがログインしていない場合、フォームに記入し、サーバーUSER_TOKENがセッションを設定するため、エンドポイントへの以降のすべてのリクエストは、USER_TOKEN 私の混乱 a。）AngularJSを使用してクライアント側の認証をどのように処理できますか？私はこことここを見ましたが、それらの使用方法を理解していませんでした 。b。）ユーザーが同じURLでログインしているかどうかに基づいて、ユーザーに異なるビューを表示するにはどうすればよいですか。http://myproject.com 初めてangular.jsを使用していて、開始方法について本当に混乱しています。アドバイスやリソースは大歓迎です。
9
「不明なプロバイダー：aProvider <-a」元のプロバイダーを見つけるにはどうすればよいですか？
AngularJSアプリケーションの（UglifyJSを介して）縮小バージョンをロードすると、コンソールに次のエラーが表示されます。 Unknown provider: aProvider &lt;- a 今、私はこれが変数名のマングリングによるものであることを理解しています。符号化されていないバージョンは問題なく動作します。ただし、JS出力ファイルのサイズが大幅に削減されるため、変数名のマングリングを利用したいと思います。 そのため、ビルドプロセスではngminを使用していますが、以前はうまく機能していたとしても、この問題は解決されていないようです。 そこで、この問題をデバッグするために、uglifyグラントタスクでソースマップを有効にしました。それらは問題なく生成され、Chrome はサーバーからマップをロードします。それでも、プロバイダーの元の名前が表示されるはずだという印象を受けましたが、同じように役に立たないエラーメッセージが表示されます。 Chromeでソースマップを使用して、ここで問題のプロバイダーを特定するにはどうすればよいですか。または、別の方法でプロバイダーを見つけるにはどうすればよいですか。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.