วันพุธที่ 11 กันยายน พ.ศ. 2556

angular with ie | เมื่อจะใช้ angular โดยที่รองรับ ie

Before doing angular follow this document :) http://docs.angularjs.org/guide/ie you will be happy with ie

แปลเป็นไทยนะครับ

สรุปให้ก่อนนะ

ไม่ควรใช้ custom tag (ถ้าใช้ละจะต้องทำเพิ่ม)
ใส่ id="ng-app" ไว้ที่เดียวกับ ng-app
ใส่ json2 หรือ json3 ไว้ด้วย

แบบสั้น

เพื่อที่จะให้ใช้งาน angular ทำงานกับ IE ได้ควรที่ต้องทำตามขั้นตอนนี้นะ

ให้ใส่ JSON.stringify (IE7 ต้องการนะ). จะใช้ JSON2 หรือ JSON3 ก็ได้.

ดูจากบรรทัดที่ 4 - 6


<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lte IE 8]>
      <script src="/path/to/json2.js"></script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>

ใส่ id="ng-app" ไว้ที่เดียว ng-app attribute


<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
</html>

ห้ามใช้ custom element เช่น <ng:view>, <progress> (ให้ใช้เป็น <div ng-view>, <div progress> แทน) เพราะ IE8 หรืออาจจะต่ำกว่านั้น จะไม่สามารถอ่าน custom element ได้

ถ้าจะใช้ custom element จำเป็นจะต้องทำตามด้านล่างเพื่อให้ IE ใช้งานได้อย่างมีสุข


<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  <head>
    <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
 
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>

ส่วนที่สำคัญคือ (ยังไม่เคยลองเลยไม่มั่นใจครับ):

xmlns:ng - namespace - you need one namespace for each custom tag you are planning on using.
document.createElement(yourTagName) - creation of custom tag names - Since this is an issue only for older version of IE you need to load it conditionally. For each tag which does not have namespace and which is not defined in HTML you need to pre-declare it to make IE happy.

วันพฤหัสบดีที่ 5 กันยายน พ.ศ. 2556

how to install angular with yeoman in mac | ลง angular กับ yeoman ใน mac

*** Before create angular project every time run npm cache clean
resource

Here https://gist.github.com/allfake/6932459

Get thing from.

http://www.moncefbelyamani.com/how-to-install-xcode-homebrew-git-rvm-ruby-on-mac/
http://brew.sh/
http://nodejs.org/
https://rvm.io/
http://compass-style.org/
http://yeoman.io/
http://angularjs.org/

install xcode from appstore for easy install command line

install command line at xcode

install git (optional) or download souretree

install homebrew

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
sudo mkdir /usr/local/Cellar
sudo chown -R `whoami` /usr/local
sudo chown -R `whoami` ~/.npm
echo 'export PATH="/usr/local/bin:/usr/local/sbin:~/bin:$PATH"' >> ~/.bash_profile
brew doctor --verbose

install rvm with ruby
\curl -L https://get.rvm.io | bash -s stable --ruby

before install by using compass
gem sources -a http://production.cf.rubygems.org/

install compass
gem update --system
gem install compass

install node
brew install node
or
download from http://nodejs.org/

install bower

npm install -g bower

install grunt

npm install -g grunt-cli

install yo
npm install -g yo

install anular
npm install -g generator-webapp

npm install -g generator-angular

create app
yo angular

run

grunt server

build

grunt build

grunt build -f

why css broken

download https://github.com/vwall/compass-twitter-bootstrap/tree/master/stylesheets

missing glyphicons-halflings-white.png, glyphicons-halflings.png

https://github.com/angular-ui/bootstrap/tree/master/misc/demo/assets/img

when add new component

open and edit component.json in dependencies

where is .css

.tmp/~

where is missing components when download from git

bower install [component]

Auto save component to component
bower install --save [component]

don't want to bower install (not recommend)

open .gitignore remove app/components

test

karma start

If you want to custom folder than you should config Gruntfile.js