집 > 기사 > 웹 프론트엔드 > AngularJs 시작을 위한 60분 기본 튜토리얼_AngularJS

AngularJs 시작을 위한 60분 기본 튜토리얼_AngularJS

WBOY원래의: 2016-05-16 15:06:461896검색

AngularJs는 SPA 애플리케이션(단일 페이지 웹 애플리케이션) 개발을 위한 좋은 프레임워크입니다. 단일 페이지 웹 애플리케이션(SPA)은 웹 페이지가 하나만 있는 애플리케이션입니다. 브라우저는 처음에 필요한 HTML, CSS 및 JavaScript를 로드하며 모든 작업은 이 페이지에서 완료되며 JavaScript는 이 페이지의 다양한 보기 표시를 제어합니다. 이 기사는 YouTube의 훌륭한 AngularJs 입문 튜토리얼 비디오인 AngularJS Fundamentals In 60-ish Minutes에서 시작되었습니다. 이 비디오는 주로 AngularJs의 지시문, 데이터 바인딩, 필터 및 모듈의 개념과 사용법을 설명합니다. 개인적으로 저는 이 네 가지 개념이 AngularJ의 핵심이자 AngularJ의 뼈대를 뒷받침한다고 생각합니다. 이를 익히는 것은 AngularJ를 전반적으로 이해하는 데 매우 도움이 됩니다. 발전하려면 많은 연습과 공식 API 문서 읽기가 필요합니다.

AngularJ가 무엇을 할 수 있는지 대략적으로 이해하려면 아래 그림을 보세요.

먼저 공식 홈페이지에서 angle.min.js와 angle-route.min.js를 다운로드하세요. 공식 홈페이지(https://angularjs.org/ 또는 https://code.angularjs.org/)에서 다운로드 가능

VS에서 빈 빈 웹 프로젝트를 만듭니다.

지시문 및 데이터 바인딩

AngularJs에서 Directive의 개념은 이해하기 쉽지 않습니다. 초기 단계에서는 HTML을 확장하는 데 사용되는 태그로 이해하면 Angularjs가 이러한 태그를 구문 분석하여 Angularjs의 마법을 실현할 수 있습니다. 다음 코드는 ng-app 및 ng-model이라는 두 가지 지시문을 사용합니다.

ng-app: 자동 부트스트랩을 위한 AngularJs 애플리케이션입니다. 이는 필수 지시문으로, 일반적으로 HTML의 루트 개체에 추가됩니다(다음 코드 참조). 더 자세한 설명을 보시려면 공식 홈페이지를 방문해주세요: https://docs.angularjs.org/api/ng/directive/ngApp

ngModel: 속성과 HTML 컨트롤(입력, 선택, 텍스트 영역) 사이에 양방향 데이터 바인딩을 설정하는 데 사용됩니다. 즉, HTML 컨트롤의 값 변경이 속성에 반영되고 그 반대의 경우도 마찬가지입니다. 속성은 {{}}를 통해 생성된 객체입니다.

다음 코드는 텍스트 컨트롤과 이름 사이의 데이터 바인딩 설정을 보여줍니다.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

지시문에는 "x-" 또는 "data-" 접두사가 붙을 수 있습니다. 지시문은 요소 이름, 속성, 클래스 및 주석에 배치될 수 있습니다.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" data-ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

다음은 HTML을 실행한 결과입니다.

다음 예에서는 ng-init 및 ng-repeat를 통해 배열을 순회하고 운영하는 방법을 보여줍니다.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Iterating with the ng-repeat Directive</title>
</head>
<body>
<div class="container" data-ng-init="names = ['Terry','William','Robert','Henry']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

더 자세한 directve 사용법은 공식 홈페이지

https://docs.angularjs.org/api를 참고하세요.

필터

입력을 받아 일정한 규칙에 따라 처리한 후 처리된 결과를 반환하는 함수입니다. 주로 배열 필터링, 배열 요소 정렬, 데이터 형식 지정 등에 사용됩니다.

AngualrJS에는 몇 가지 내장 필터가 있습니다. 통화(통화), 날짜(날짜), 필터(하위 문자열 일치), json(형식화된 json 객체),limitTo(제한 숫자), 소문자(소문자), 대문자( 대문자), 숫자(숫자), orderBy(정렬). 총 9가지 종류. 또한 강력하고 모든 데이터 처리 요구 사항을 충족할 수 있는 필터를 사용자 정의할 수도 있습니다.

다음 코드는 데이터 필터링, 정렬 및 대소문자 변환의 구현을 보여줍니다. 각 필터는 데이터를 따르며 |로 구분됩니다.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Filter</title>
</head>
<body>
<div class="container" data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'},
{name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'},
{name:'Henry Dow',city:'NewYork'}]">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

运行的结果：

Module

Module就是一个容器，用于管理一个AngularJS应用的各个部分，是AngularJS中很重要的概念。一个AngularJS应用就是一个Module，其作用和C#应用程序中Assembly作用类似。C#中我们通过main函数来bootstrap应用程序。而AngularJS则通过na-app="moduleName"的方式来bootstrap一个AngularJS应用。moduleName就是Module对象的name.

下图是一个Module有哪些常见部分组成。

Config/Route:用于配置AngularJS应用的路由（AngularJS），作用类似于ASP.NET MVC应用中的Config/Route。
Filter:对数据起过滤作用，上文有解释。

Directive: 扩展HTML,AngularJS中最重要的概念。没有Directive就没有AngularJS。

Controller: 作用类似于ASP.NET MVC应用中的Controller。页面逻辑就在Controller中实现，通过controller可以对model进行操作。 AngularJS则通过内建的Data-Binding机制将model绑定到view(HTML控件)

Factory/Service/Provider/Value: 提供对数据源的访问。比如Restful API就是常见的数据源。 Controller通过Factory/Service/Provider/Value访问数据源完成数据的CRUD操作。

下面这段代码实现了上面实例的相同的功能，差异就在于这个实例通过创建一个module（angularJS应用），并在module下添加contorller来实现上面的功能。在SimpleController（Controller）中，我们创建了customers（Model）并进行数据初始化， View(Html控件）则直接绑定到customers（Model）。Scope是一个AngualrJS中所有viewModule的容器对象。Controller需要通过Scope是一个AngualrJS中所有viewModule的容器对象。Controller需要通过Scope来访问viewModule。

这个例子比上面例子更接近实际工程中的用法。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using module Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
demoApp.controller("SimpleController", function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
}
demoApp.controller(controllers);
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

下图展示了Module及其各个组成部分的关系。

下面实例通过config配置module的route实现一个SPA实例。首先创建View1.html 和View2.html。目录结构如下图.

<div>
<h2>View1</h2>
Names:
<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<br />
Customer Names:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer </button>
<br />
<a href="#/view2">View 2</a>
</div>
<div>
<h2>View2</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>

通过$routeProvider来配置当前页面中view1 和view2 的路由，已经每个view所对应的controller。 view1和view2会显示在当前页面标注了ng-view的位置。

同时通过config我们解耦了controller和HTML标签。上面的例子，我们需要给html标签添加ng-controller tag来使用controller。这边直接通过config完成这样的配置。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>View</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

效果如下图。

最后一个实例更接近实际工程中的用法，我们引入了Factory来初始化数据（实际工程中,在这里可访问webAPI获取数据完成初始化），Controller中则通过Factory获得数据。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Factory</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.factory('simpleFactory', function () {
var customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
var factory = {};
factory.getCustomers = function ()
{
return customers;
}
return factory;
});
var controllers = {};
controllers.SimpleController = function ($scope, simpleFactory) {
$scope.customers = [];
init();
function init() {
$scope.customers = simpleFactory.getCustomers();
}
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

以上内容是小编给大家介绍的AngularJs 60分钟入门基础教程，希望对大家以上帮助！

성명：

이전 기사：jquery fly 플러그인_jquery를 기반으로 장바구니에 추가하는 포물선 애니메이션 효과 구현다음 기사：jquery fly 플러그인_jquery를 기반으로 장바구니에 추가하는 포물선 애니메이션 효과 구현

AngularJs 시작을 위한 60분 기본 튜토리얼_AngularJS

관련 기사