Angularjs

webapp example


  • AngularJS
  • yeoman
  • Semantic UI
  • Node.js
  • RESTful webservice (rails)

Sample webapp

공통가계부 = MoneyBook

  • PAGE 구성
    • intro/sign in/sign up (html)
    • main (app:angularjs)
  • MENU 구성
    • timeline/report/calendar/setting
  • MODEL 구성
    • community
    • item

URL

  • intro/sign in/sign up
    • /
  • app (/app)
    • timeline
      • /app/timeline
    • report
      • /app/report
    • calendar
      • /app/calendar
    • setting
      • /app/setting

HTML5MODE




http://domain/#!/timeline 
vs 
http://domain/timeline


refresh?

HTML5MODE setting


  1. GruntFile.js
    1. CONNECT-MODREWRITE
    2. "/" => welcome.html
    3. "/app(.*)" => index.html
  2. app.js
    1. locationProvider
  3. index.html
    1. script & css path => 절대경로로 수정

Gruntfile.js

npm install connect-modrewrite
// modRewrite 추가var modRewrite = require('connect-modrewrite');... 생략 ...// middleware 부분 수정  livereload: {
    options: {
      middleware: function (connect) {
        return [
          modRewrite([
            '^/$        /welcome.html [L]',
            '^/app(.*)$ /index.html [L]',
          ]),
          lrSnippet,
          mountFolder(connect, '.tmp'),
          mountFolder(connect, yeomanConfig.app)
        ];
      }
    }
  }

App.js

  • "/" => "/app" 라우팅 변경
  • html5Mode를 활성화
 angular.module('sampleApp', [])  .config(function ($routeProvider, $locationProvider) {    $routeProvider      .when('/app', {        templateUrl: '/views/main.html',        controller: 'MainCtrl'      })      .otherwise({        redirectTo: '/'      });    $locationProvider.html5Mode(true).hashPrefix('!');  });

index.html


절대경로로 수정!

<link rel="stylesheet" href="styles/xxx">
=>
<link rel="stylesheet" href="/styles/xxx">

<script src="bower_components/xxx"></script>
=>
<script src="/bower_components/xxx"></script>

link


if html5mode == "on"



<a ng-click="$location.path('/app/report')">report</a>

=

<a href="/app/report">report</a>

yo angular-generate

angular
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:provider
angular:factory
angular:value
angular:constant
angular:decorator
angular:view

file namiing


angularjs 에서 사용하는 file naming rule을 유지

https://github.com/angular/angular.js/tree/master/src/ng

  • camel 방식
  • ex )
    • ngClass.js
    • limitTo.js
    • orderBy.js
    • cacheFactory.js

directive name vs filter name


directive

ngClass => ng-class 로 사용함

filter

orderBy => orderBy 로 사용함

참고 URL



  • http://yeoman.io/community-generators.html
  • https://github.com/yeoman/generator-angular
  • http://sindresorhus.com/bower-components/
  • http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/
  • https://github.com/tinganho/connect-modrewrite
  • http://docs.angularjs.org/api/ngResource.$resource
Made with Slides.com