angular.js 기초 - 1

1. 선언부

 

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 

 

2. 기초

 

data-ng  ,  ng 나 똑같음

 

<div ng-app=""> -> Angular JS 를 정의함



<p>Name: <input type="text" ng-model="name"></p>

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

ng-model : 데이터 입력 할 곳, html컨트롤 값

ng-bind : 해당 이름으로 받은 데이터를 보여줌

 

 

 

<div ng-app="" ng-init="firstName='John'">

ng-init : 해당 이름으로 초기화 시켜줌

 

 

 

<p>Name: <input type="text" ng-model="name"></p>

  <p>{{name}}</p>

{{name}} 으로 데이터 보여줄 수 있음

 

 

 

Email:

   

<input type="email" name="myAddress" ng-model="text">

    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>

ng-show : 해당 경우가 true일 때 메시지를 보여준다.

 

 

 $scope.hideYN = true;

<p ng-hide="hideYN">{{obj.id}} <br> {{obj.password}}</p>

특정 조건일 때 if문 걸어서 hideYN true, false 설정 가능

 

 

 

---

 

연습 예제

 

 

<div ng-app="myApp" ng-controller="myCtrl">



First Name: <input type="text" ng-model="firstName"><br>

 ->초기화 되어진 데이터 보여줌

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}



</div>





<script>

var app = angular.module('myApp', []); ->[]은 종속변수모듈을 정의하는데 사용?

// -> angular js와 module은 응용프로그램을 정의하는 것



app.controller('myCtrl', function($scope) { -> 응용프로그램 컨트롤

    $scope.firstName= "John"; -> firstName은 john으로 초기화

    $scope.lastName= "Doe";   

});

</script>