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>
    

Views, Controllers and Scope

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

  • Createing a View and Controller
    {{name}}
    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

  • 참고 링크

참고링크


+ Recent posts