以前、AngularJS1.3 を使っていましたが、それ以降使っていなかったので、
今回、最新版のVersion 5.1.4をさわってみました。
今回は、セットアップまでの流れを記載します。
目次
セットアップ環境
セットアップ環境は、こちらです。
npmインストール
まずは、Homebrewを使ってnpmをインストールします。
Homebrewがインストールされていない方は、
以下をご覧いただき、インストールをしてください。
$ brew install npm
実行結果ログ
Updating Homebrew... ==> Auto-updated Homebrew! Updated 2 taps (heroku/brew, homebrew/core). ==> New Formulae arcade-learning-environment monero auditbeat mongodb@3.4 ~~~~~~~~~~ liblcf zstd liblinear zurl libmicrohttpd ==> Renamed Formulae camlistore -> perkeep ==> Deleted Formulae angolmois mongodb@2.6 ponscripter-sekai stklos ==> Installing dependencies for node: icu4c ==> Installing node dependency: icu4c ==> Downloading https://homebrew.bintray.com/bottles/icu4c-60.2.high_sierra.bott ######################################################################## 100.0% ==> Pouring icu4c-60.2.high_sierra.bottle.tar.gz ==> Caveats This formula is keg-only, which means it was not symlinked into /usr/local, because macOS provides libicucore.dylib (but nothing else). If you need to have this software first in your PATH run: echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile For compilers to find this software you may need to set: LDFLAGS: -L/usr/local/opt/icu4c/lib CPPFLAGS: -I/usr/local/opt/icu4c/include ==> Summary /usr/local/Cellar/icu4c/60.2: 249 files, 67MB ==> Installing node ==> Downloading https://homebrew.bintray.com/bottles/node-9.3.0_1.high_sierra.bo ######################################################################## 100.0% ==> Pouring node-9.3.0_1.high_sierra.bottle.tar.gz ==> Caveats Bash completion has been installed to: /usr/local/etc/bash_completion.d ==> Summary /usr/local/Cellar/node/9.3.0_1: 5,125 files, 49.6MB
angular CLI インストール
angularのコマンドラインインターフェイス（CLI）をインストールします。
$ npm install -g @angular/cli
実行結果ログ
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng > fsevents@1.1.3 install /usr/local/lib/node_modules/@angular/cli/node_modules/fsevents > node install [fsevents] Success: "/usr/local/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote > node-sass@4.7.2 install /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass > node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.7.2/darwin-x64-59_binding.node Download complete ░⸩ ⠋ : Binary saved to /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node Caching binary to /Users/nonoichi/.npm/node-sass/4.7.2/darwin-x64-59_binding.node > uglifyjs-webpack-plugin@0.4.6 postinstall /usr/local/lib/node_modules/@angular/cli/node_modules/webpack/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js > node-sass@4.7.2 postinstall /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass > node scripts/build.js Binary found at /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node Testing binary Binary is fine + @angular/cli@1.6.3 added 996 packages in 46.148s
新規プロジェクト作成
nonoichi-app という名称の新規プロジェクトを作成します。
$ ng new nonoichi-app
実行結果ログ
create nonoichi-app/README.md (1027 bytes) create nonoichi-app/.angular-cli.json (1247 bytes) create nonoichi-app/.editorconfig (245 bytes) create nonoichi-app/.gitignore (516 bytes) create nonoichi-app/src/assets/.gitkeep (0 bytes) create nonoichi-app/src/environments/environment.prod.ts (51 bytes) create nonoichi-app/src/environments/environment.ts (387 bytes) create nonoichi-app/src/favicon.ico (5430 bytes) create nonoichi-app/src/index.html (298 bytes) create nonoichi-app/src/main.ts (370 bytes) create nonoichi-app/src/polyfills.ts (2405 bytes) create nonoichi-app/src/styles.css (80 bytes) create nonoichi-app/src/test.ts (1085 bytes) create nonoichi-app/src/tsconfig.app.json (211 bytes) create nonoichi-app/src/tsconfig.spec.json (304 bytes) create nonoichi-app/src/typings.d.ts (104 bytes) create nonoichi-app/e2e/app.e2e-spec.ts (294 bytes) create nonoichi-app/e2e/app.po.ts (208 bytes) create nonoichi-app/e2e/tsconfig.e2e.json (235 bytes) create nonoichi-app/karma.conf.js (923 bytes) create nonoichi-app/package.json (1324 bytes) create nonoichi-app/protractor.conf.js (722 bytes) create nonoichi-app/tsconfig.json (363 bytes) create nonoichi-app/tslint.json (3040 bytes) create nonoichi-app/src/app/app.module.ts (316 bytes) create nonoichi-app/src/app/app.component.css (0 bytes) create nonoichi-app/src/app/app.component.html (1141 bytes) create nonoichi-app/src/app/app.component.spec.ts (986 bytes) create nonoichi-app/src/app/app.component.ts (207 bytes) Installing packages for tooling via npm. > fsevents@1.1.3 install /Users/nonoichi/nonoichi-app/node_modules/fsevents > node install [fsevents] Success: "/Users/nonoichi/nonoichi-app/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote > node-sass@4.7.2 install /Users/nonoichi/nonoichi-app/node_modules/node-sass > node scripts/install.js Cached binary found at /Users/nonoichi/.npm/node-sass/4.7.2/darwin-x64-59_binding.node > uglifyjs-webpack-plugin@0.4.6 postinstall /Users/nonoichi/nonoichi-app/node_modules/webpack/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js > node-sass@4.7.2 postinstall /Users/nonoichi/nonoichi-app/node_modules/node-sass > node scripts/build.js Binary found at /Users/nonoichi/nonoichi-app/node_modules/node-sass/vendor/darwin-x64-59/binding.node Testing binary Binary is fine added 1168 packages in 45.385s Installed packages for tooling via npm. Successfully initialized git. Project 'nonoichi-app' successfully created.
ローカルサーバ起動
angularに搭載されている、ローカルサーバ機能を使って、サーバ起動を行います。
まずは、ディレクトリ移動を行い、サーバ起動コマンドを実行します。
$ cd nonoichi-app/ $ ng serve --open
実行結果ログ
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 10% building modules 8/11 modules 3 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: / Date: 2018-01-06T06:31:54.760Z Hash: fadd2eaaf54fd275e006 Time: 9733ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 19.5 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 557 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 33.8 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 7.16 MB [initial] [rendered] webpack: Compiled successfully.
自動的にブラウザが立ち上がり、下記画面が表示されました。
URLは、「http://localhost:4200」となっています。
参考サイト
angular 公式サイト：https://angular.io/quickstart
