AngularJS Fundmentals 60-ish Minute 정리

2013. 9. 16. 12:58

유투브 동영상 : AngularJS Fundmentals 60-ish Minute

Agenda

AngularJS Feature
Getting Started
Directives, Filters and Data binding
Views, Controllers and Scope
Modules, Routes and Factories

AgularJS Feature

Getting Started

Single Page Application(SPA)

View1 -> View2 -> View3 -> View1
Challenge with SPAs

DOM manipulation, History, Module loading, Routing, Caching, Object Modeling, Data binding, Ajax/Promises, View loading
AgularJS를 이용하면 하나의 프레임워크로 모든 기능을 사용할 수 있다.
AuglarJS is a full-featured SPA Framework.
- ViewModel, Controllers, Views

Directives, Filters and Data binding

Directives

HTML new tricks

<!DOCUTYPE html>
<html ng-app> // Directive
<head>
  <title></title>
</head>
<body>
  <div class="container">
      //ng-model is Directive
      // {{name}} is data binding expression
      Name: <input type="text" ng-model="name" /> {{name}}
  </div>
  <script src=""></script>
</body>
<html>

참고 링크
ng-repeat: data-ng-app=”” -> data-ng-init=”names=[]” data-ng-
```
  <li data-ng-repeat="personName in names">{{personName}}</li>
```

Using Filters

<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{cust.name}}-{{cust.city}}</li>

참고 링크
그렇다면 Order ASC, DESC도 가능한가?

Views, Controllers and Scope

[View] <— $scope —> [Controller]
$scope is the “glue” (ViewModel)

Createing a View and Controller

function SimpleController($scope) {
  // $scope Dynamic inject
  $scope.customers=[{name:"", city:""}]
}

Modules, Routes and Factories

Module -> Config -> Routes (->View ->Controller ->(*Factory): View <— $scope —> Controller)
Modules are Containers
```
<html ng-app="moduleName">
```

Module

Config
- Routes
Filter
Directive
Factory, Service, Provider, Value

Controller

var demoApp = angular.module('demoApp', []);
// What's the Array for?
// Module that demoApp depends on ->[]
var demoApp = angular.module('demoApp', ['helperModule']);

Creating a Controller in a module

  var demoApp = angular.module('demoApp', []);    //define a module

  demoApp.controller('SimpleController', function($scope) {    // define a controller
      $scope.customers = [
          //...
      ]
  });

the Role of Routes

View1(/view1) -> View2(/view2) -> View3(/view3) -> View4(/view4) -> View1

  var demoApp = angular.module('demoApp', []);

  demoApp.config(function($routeProvider) {
      $routeProvider
          .when('/', // define Module Routes
              {
                  contoller: 'SimpleController',
                  templateUrl: 'View1.html'
              })
          .when('/partial2',
              {
                  contoller: 'SimpleController',
                  templateUrl: 'View2.html'
              })
          .otherwise({ redirectTo: '/'});
  });

Using Factories and Services

The Role of Factories

  var demoApp = angular.module('demoApp', [])
      .factory('simpleFactory', function() {
          var factory = {};
          var customers = {...};
          factory.getCustomers = function() {
              return customers;
          };
          return factory;
      })
      .controller('SimpleController' function($scope, simpleFactory) {
          $scope.customers = simpleFactory.getCustomer();
      });

jQuery only used for Bootstrap
참고 링크

참고링크

저작자표시

'Javascript' 카테고리의 다른 글

Bower, 웹패키지 관리툴 (1)	2015.07.16
Adobe에서 만든 웹프랫폼 개발툴, Brackets (0)	2014.03.01
Javascript, Json Array 정렬하기 sorting (2)	2013.07.10
Javascript, Date, 이번달의 첫날과 마지막날 알아내기 (0)	2012.05.15
JSON 데이터 정렬하기 (2)	2012.01.26

허니몬(Honeymon)의 자바guru