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
Bootstrapの良いところは使い手(主にエンジニア)の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst
はじめに AngularJS UI BootstrapにはBootstrapが用いられているため、 下記のGrid systemをそのまま使う事が可能です。 CSS · Bootstrap 実装例 サンプルとしては、弊社ブログのFeedを用いました。 radiant-meadow-2447.herokuapp.com/#/rwdfix AngularJS Generatorで雛形を作成する際に、 AngularJS UI Bootstrapを用いる事で既にCSSも取り込まれます。 表示部分に関する実装は以下になります。 <div class="container-fluid"> <div class="row"> <div ng-repeat="entry in feed.entries" ng-if="$index % 3 === 0"> <section class="col-xs-1
t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs
The past few days, I’ve been experimenting with angularjs. It’s an awesome javascript MVC framework and I recommend checking it out if you haven’t! One of its features are directives which, among other things, allow you to replace html elements with a specific tag name or attribute name with a template and adjust their behaviour. This is nice if you have complex HTML structures in a website which
レスポンシブ・デザインやモダンなUIコントロールを取り入れた Webサイトを構築する基礎として定番になっている Twitter Bootstrapを AngularJSと一緒に使う方法を紹介する。 Bootstrapが提供するもの その1: あたりさわりのない見た目とレスポンシブな表示を提供するスタイルシート Bootstrapのスタイルシートは、横方向12分割のグリッドでページをレイアウトしつつ画面の大きさによって配分をコントロールできるマルチデバイス向け表示システムと、構成要素の今風な見た目を提供する。デザイナ抜きで動いている開発チームにとっては「とりあえず Bootstrapベースで作っておけば今風の見た目になる」ため極めて有難い存在。 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/latest/cs
まず、AnuglarJSとBootstrapを組み合わせて使う最も簡単な方法は、yeomanでプロジェクトのひな形を生成することです。 yeomanを使ったAngularJSプロジェクトの始め方 yoコマンドを実行した時に、以下のように質問されます。 [?] Would you like to include Twitter Bootstrap? (Y/n) [?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n) 1つ目の質問にYesと答えるとひな形にBootstrapが組み込まれます。 2つ目の質問にYesと答えるとsass-bootstrapというフレームワークがbowerでインストールされ、scssファイルからcssに
http://lhorie.blogspot.ca/2013/09/things-that-suck-in-angularjs.html AngularJSの盛り上がりは何回か取り上げてきた(このポストの最後にリンクあります。)ので、今日は、改善すべき点を指摘しているブログとその議論を紹介します。 (New frameworks) are great at getting you to about 80% of what you need REALLY fast. The next 10% takes some investigation but its doable. But that last 10%,……You’re working for the framework rather than it working for you. というコメントがあるように、まだ苦労するところはある
About the project AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application. With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate! AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches. Quick
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く