IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
最近AngularJSとずっとにらめっこしています。やっていて楽しいです。 こんにちは、先生です。 最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。 そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。 2014年11月現在でのライセンスも明記していますので参考にしてください。 安心して使えたモジュール8選 1. Angular directives for Bootstrap http://angular-ui.github.io/bootstrap/ MIT License Bootstrapをディレクティブにしているモジュールです。 元々のB
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461Read less
カスタムDirectiveを利用して画面遷移中にoverlay表示 AngularOverlay Directive CakePHPをバックエンドとしたRestfulなAngularJSのサンプルアプリを開発している。 前回のエントリー、AngularJSの$routeProviderでURLをマッピングの記事でCRUD操作が可能な状態になった。本エントリーでは、Ajaxリクエストが発生する画面遷移のたびに、画面ロード中の表示をするように変更してみたい。 完成系は画像のようになった。 画像では、Ajaxリクエスト中に画面をoverlay表示に切り替えて、Loadingの表示を行っている。そして、処理が完了するとモーダル画面から元に戻る。この処理は、AngularJSがhttpリクエストにoverlay表示をフックすることで実現しており、そのカスタムDirectiveがgithubで公開され
JavaScriptの勉強を兼ねて、Webサービスの作り方まとめです。 簡単なTodoリストを作ります。 AngularJS+NodeJS(ExpressJS)+MongoDB Webサービスを作るには色々と手段はありますが、今回選んだのは上記の組み合わせ。 サーバからクライアントまで全部JavaScriptで書けるためです。 MongoDBのサイトでは、MEANスタックなどと呼ばれている模様です。 以下、meanstack-sampleと名付けて、動くようになるまでにやったことを順番に書いていきます。 Yomanの設定 NodeJSでのREST MongoDBのインストールとNodeJSとの接続 AngularJSとRESTの連携 NodeJSでのOAuth認証 まとめと参考 Yeomanの設定 別エントリ参照 NodeJS(+ExpressJS)でRESTもどきを作る まずはサーバ側が
最近 AngularJS 嫌いという言説が多いですが、そういうことを仰る方々は主に先鋭的な JSer のように思います。 ただ、僕なんかの場合には、ユーザー向けの画面の構築などには AngularJS を使って書くことは最近はほとんどなく、JS を書くといえばもっぱら管理画面です。 管理画面の JS を書くにあたっては AngularJS way にのっかってやると非常に楽ですよね。管理画面を書いたりする上では vue-js とかで頑張って書くと見通しが悪くなったりしますし、こった動きなどは必要ないというところで angular.js ワリといいなと思っています。 もっといいものがあれば移りたいですが、コストをかけずに作りやすい管理画面を作るという意味ではやはり AngularJS にまだメリットがあるなあ、と思っています。 2.0 が出た時にこまるというのもありますが、実際は angul
シングルページアプリ向けの各フレームワークをGoogle Trendで比較したグラフがLars Eidnesのブログに掲載されてますが、AngularJSの伸びが他を圧倒しています。一方で、アーキテクチャ上の課題は、コミュニティの声もあり、かつ当事者である開発チームも認識していたところ。そして、それに対する答えとしては、バージョン2.0で大幅に書き直すという流れになっています。 AngularJS 2.0については、「野心的だが険しい道のり」というタイトルの記事がGuardianに掲載されてますが、 ES6の採用 Web Componentsとの親和性のアップ (双方向バインディングをどうするかまだ決まってないが)Reactの考え方に近づいてきている (1.3のサポートはしばらく平行して続くと発表されたが)本当にスムーズな移行を提供できるのか? がポイントだとSeb Ceveyはまとめてい
AngularJSのfactoryとserviceがどうにも覚えられないのでまとめてみた。 まとめ factoryはobjectをキャッシュしておく serviceはインスタンス化してキャッシュしておく providerの謎が深まった factory providerにfunctionらしきものを渡している。 $getはInjectorに指定されたときに一度だけ呼ばれる。 function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L666 ここまでだとまだ実行されない。 var app = angular.module('app', ['ngRe
前回: Angular.js入門 (2)コントローラ 次回: Angular.js入門 (4)ディレクティブ その1 前回ユーザが入力した文字列を反転させるのに, コントローラ内でメソッドを定義して適用してやるという方法を練習しました。 しかしAngular.jsにはフィルタという, モデルのデータに何らかの定形処理を施すのに適したやり方が提供されています。 フィルタを使ってみる 前回と同じく文字列を反転させてやりましょう。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Angular.jsのテスト</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foun
JavaScriptとしてAngularJSを使い、Google ChartのグラフをWordPress投稿本文に作成する方法についてまとめました。 AngularJSをheader.phpファイル内でインクルードして利用できるようにする手順は下記参照。 ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法 1)Google Chartsのサンプルコードを作成 ・オンラインマニュアルの下記コードを使用し、AngularJSを使ってスクリプトを記述します。 https://developers.google.com/chart/interactive/docs/quick_start ・ここでは、上記参照記事の手順でAngularJSのモジュール名が’MyApp’として設定されていることを前提としています。 (gglchart1.js) goog
前回: Angular.js入門 (4)ディレクティブ その1 DirectiveとControllerの連携 ディレクティブとコントローラとで値を共有したいときはどうすれば良いのでしょう? 結論から言うとスコープを通じて渡してやれば良いです。 具体的には var app = angular.module("myApp", []); app.controller("AppCtrl", function ($scope) { $scope.alertTest = function() { alert("テストだよ!"); }; }); こんなコントローラの, alertTest関数をdirective内で使いたいとしましょう。コントローラAppCtrlのスコープ配下ではalertTestという関数が生きていることになるのでhtml側で以下のように記述します。 <!doctype html>
前回: Angular.js入門 (3)フィルタ 次回: Angular.js入門 (5)ディレクティブ その2 今回はいよいよangular.jsの肝とも言えるdirectiveについてです。ディレクティブという単語自体が日本語として馴染みが無いのもありますし, 実際になかなか複雑な機能なので理解が進まないところもあります(^ω^;) filterと同様自分でカスタムのdirectiveを作ることもできるのですが, Angular自身も標準directiveを持っています。まずはこちらを使って何ができるのかから見て行きましょう。 はじめてのDirective var app = angular.module("myApp", []); app.directive("test", function () { return { restrict: "E", template: "<div>こ
Step0 事前準備 index.html <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <p>{{value}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="controllers.
已通过安全加密检测 如果没有自动跳转,请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright © 1998 -2020. All Rights Reserved.
angular.module('Ninja', []) .directive('ninjaCustomer', function() { return { templateUrl: 'partials/ninja-customer.html' }; }); こんだけなので、まあどってことない。これだけなら ng-include のほうがラクでいいやんってことになるかな。でもまあ、とりあえずこんだけしか書かなくても directive として動作するのかってことを見ておく。 要素として使う Directive としたければ デフォルトでは属性(restrict: 'A')として使う directive として作られる。なので、要素として HTML で指定する directive にしたければ、restrict オプションが必要になる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く