기억은 휘발성 메모리

ANGULARJS TUTORIAL 본문

Things to remember

ANGULARJS TUTORIAL

하상엽 2018. 6. 7. 16:53
plunker

MVC 패턴

modle -> view -> controller

MODEL : DATA

VIEW : WEB PAGE

CONTROLLER : ORIGINAL DATE를 가공 (입금내용만 보고싶다.)


angularjs
(model view)양방향
angularjs는 HTML을 새로운 attribute들로 확장한다.
최근 동향 index.html하나로 모든 웹을 구현( facebook, gmail)


ng-app 은 angularjs임을 선언한다.



<!DOCTYPE html>

<html>


  <head>

    <title>angular2 playground</title>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>

    <link rel="stylesheet" href="style.css" />

    <script src="javascript.js"></script>

  </head>


  <body ng-app="" ng-init="name='Tony'"> <!--view-->

    

    <input type="text" ng-model="name" /> <!--model-->

    <p ng-bind="name" ></p>

  

  </body>

</html>



<!DOCTYPE html>

<html>


  <head>

    <title>angular2 playground</title>

    <link data-require="bootstrap@*" data-semver="4.1.1" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>

    <script data-require="bootstrap@*" data-semver="4.1.1" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>

    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>

    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>

  </head>


  <body ng-app="todoApp" ng-controller="todoCtrl">

    <ul>

      <li ng-repeat="todo in todos">

      <div class="input-group mb-3">

        <div class="input-group-prepend">

          <div class="input-group-text">

            <input type="checkbox" ng-bind="todo.completed"/>

          </div>

        </div>

        <input type="text" class="form-control" aria-label="Text input with checkbox" />

      </div>

      </li>

    </ul>

  </body>


</html>



var app = angular.module("todoApp", []);


app.controller("todoCtrl", function($scope) {

    $scope.todos = [

      {

        completed: false,

        title: "모바일 웹 project",

        start: Date.now()

      },

     

     {

        completed: true,

        title: "java project",

        start: Date.now()

      },

     

     {

        completed: false,

        title: "angularJS project",

        start: Date.now()

     } 

    ];

});

' Things to remember' 카테고리의 다른 글

git & github 시작하기  (0) 2018.07.06
Comments