5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は?(前編) Developers Summit 2016 シングルページアプリケーション(SPA)は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。 このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」(通称デブサミ)のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。 注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気
AngularJS で Controller の継承をしたい したいなっておもって、Google で検索したところ、stackoverflow で Can an AngularJS controller inherit from another contoller in the same module? っていうスレがあって、これで解決したっぽいのでメモ。 var app = angular.module('angularjs-starter', []); app.controller('ParentCtrl ', function($scope) { // I'm the sibling, but want to act as parent }); app.controller('ChildCtrl', function($scope, $controller) { $controlle
I am defining a custom filter like so: <div class="idea item" ng-repeat="item in items" isoatom> <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"> .... </div> </div> As you can see the ng-repeat where the filter is being used is nested within another ng-repeat The filter is defined like this: myapp.filter('range', function() { return function(input, min, max)
Simple question: How can I set a scope value in html, to be read by my controller? var app = angular.module('app', []); app.controller('MyController', function($scope) { console.log($scope.myVar); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app'> <div ng-controller="MyController" app-myVar="test"> {{myVar}} </div> </div> JSFiddle:
Part7の続きです。 今回は新規ゲスト作成フォームを実装していきます。Part6で登場したモーダルダイアログ、そしてPart7で登場したPromise/Deferredパターンを駆使していきます。 まずは今回開発する部分をデモでみてみましょう。 デモ それでは実装へ。 新規ゲストフォームのモーダルダイアログを作成する まずモーダルダイアログとなるHTMLマークアップを作成しておきましょう。 <!-- Modal for newGuestForm --> <script type="text/ng-template" id="T_newGuestForm"> <div class="modal-header"> <button type="button" class="close" ng-click="$dismiss()">×</button> <h3>新規ゲスト</h3>
タイトル通り。。。 http://docs.angularjs.org/api/ng.directive:ngInit マニュアル良く読もうね!!俺。。。orz <input type="text" name="name" ng-model="name" value="<?- param ?>" ng-maxlength="5" required /> とかして、あれー。。。なんでー??テンプレートエンジン使ってるから?とか意味もなく、悩んでました。 正解は、 <input type="text" name="name" ng-model="name" ng-init="name='<?- param ?>'" ng-maxlength="5" required /> ってすれば、テンプレートエンジンと組み合わせても全く問題ないですね!!
問題 AngularJSと、Bootstrapのui.bootstrap使ってて BootstrapのModal機能とか使いたくなるけれど Angular的なControllerや$scopeの扱いが混乱したのでメモ 参考 公式: Angular directives for Bootstrap サンプル 親View。対応するControllerのメソッドをふつうに呼んでるだけ↓ <!-- モーダル開く親側のView --> <ul> <li data-ng-repeat="task in tasks"> <span>{{task.name}}</span><a href="#" data-ng-click="openDeleteConfirm(task)">さくじょ</a> </li> </ul> 親Controller。もちろんopenDeleteConfirmをexportしてる。そ
I am new to AngularJS and find it very interesting, but I am a bit unclear about the following situation. app.factory('deleteFac', function($http){ var factory = {}; factory.edit = function(id){ $http.get('?controller=store&action=getDetail&id=' + id). success(function(data, status){ /** got an error on the following when i use return data; and i get data undefined in the controller which i get it
AngularJS と jinja2 は HTML に変数スコープを {{...}} という二重の波括弧で囲う構文仕様になっています. よって, Python のフレームワークで使われる jinja2 で AngularJS を書きたい場合に HTML に AngularJS の変数スコープを書くと競合してしまい, AngularJS の変数スコープは無効化されてしまいます. AngulaJS と jinja2 の変数スコープを競合させない為に, AngulaJS の変数スコープのブロック構造を変更する方法があります. $interpolateProvider というヘルパーを使います. AngularJS の version 1.2.0 以降の機能です. 記述例 AngularJS の変数スコープのブロック構造を [[...]] に変更してみます. var app = angular.m
せっかくIntelliJ IDEA Ultimateを購入したなら、いろいろ使わないと勿体ないね! ということで、AngularJS開発で試します。 IntelliJ IDEA 13、このようにAngularJSの、シンタックスハイライト、コード補完、引数補完、コードジェネレータなどに対応しています!しかも軽快に動作し、重いと感じることは全くありません。 IDEAが提供するコード補完についてはこのあたりを参照下さい。 ※私はIntelliJIDEAビギナーです。変な説明や誤解があるかもしれません。是非ツッコミお願いします。 インストール 以下の2つをインストールしました。 AngularJSプラグイン ng-*属性やブラケットのサポート、入力補完を利用したCDNからの読み込みやmoduleの定義などよく使うコードを数文字のショートカットで生成できるコードジェネレータなどが利用できるようにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く