Anglejs를 처음 접할 때 무엇을 알아야 합니까? 2018년에 Anglejs를 시작하기 위해 꼭 배워야 할 튜토리얼(예제 포함)
이 글은 angularjs에 대한 기본적인 이해를 소개하여,Angularjs를 배우고 싶은 학생들이 더 나은 입문 과정을 이수할 수 있도록 합니다. 지금 이 글을 살펴보겠습니다.
AngularJS 소개
AngularJs는 JavaScript로 작성된 라이브러리인 프런트 엔드 프레임워크입니다. 사용자는 이 프레임워크를 사용하여 프런트 엔드에서 MVC 데이터 표시를 실현하기 위해 프런트 엔드에서 양방향 데이터 바인딩을 수행할 수 있습니다.
AngularJs 프레임워크를 사용할 때 AngularJs 파일을 프런트엔드 HTML에 도입하기만 하면 됩니다. 사용하기 매우 쉽습니다.
AngularJs 기본 연산
기본 지침을 설명하기 전에 몇 가지 기본 개념을 일반화해 보겠습니다. 사용자가 페이지에 AngularJs 파일을 소개한 후 WebApp과 컨트롤러를 만들 수 있습니다. AngularJs에서 각 페이지는 독립적인 WebApp으로 간주됩니다. 각 WebApp에는 컨트롤러라고 부르는 여러 개의 독립적인 처리 부분이 포함될 수 있습니다. AngularJs는 ng-app 명령을 통해 이 WebApp의 범위를 구분합니다. 일반적으로 이 ng-app은 html 태그나 요소에 직접 작성할 수 있습니다. 예:
html:<p ng-app="myApp">
<p ng-controller="myController">
<h3>{{data}}</h3>
</p></p>응용 프로그램 초기화: ng-app 지시문은 AngularJS에
요소가 AngularJS의 "소유자"임을 알려줍니다. 애플리케이션.
데이터 바인딩: ng-model 지시문은 입력 필드의 값을 애플리케이션 변수 이름에 바인딩합니다. ---속성에 바인딩합니다. 또한 사용 가능: 애플리케이션 데이터(번호, 이메일, 필수)에 대한 유형 검증을 제공합니다. 애플리케이션 데이터에 대한 상태(잘못됨, 더티, 접촉, 오류)를 제공합니다. HTML 요소에 대한 CSS 클래스를 제공합니다. HTML 요소를 HTML 양식에 바인딩합니다.
html로 데이터 바인딩: ng-bind 지시어는 응용 프로그램 변수 이름을 단락의 innerHTML에 바인딩합니다. html로 {{변수 이름}}을 작성하는 것과 동일——————텍스트에 바인딩
초기화 데이터: ng-init 지시문은 AngularJS 애플리케이션 변수를 초기화합니다.
데이터 복제: ng-repeat 지시문은 컬렉션(배열)의 각 항목에 대해 HTML 요소를 한 번씩 복제합니다. 예:ng-repeat=”x in arrays”
Custom 지시문: .directive 함수를 사용하여 사용자 지정 지시문을 추가합니다. 사용자 정의 지시어를 호출하려면 사용자 정의 지시어 이름을 HTML 요소에 추가해야 합니다. CamelCase를 사용하여 지시문의 이름을 runoobDirective로 지정하지만 이를 사용할 때는 runoob-directive로 구분해야 합니다.
eg:<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return { //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
restrict : "A",//限制使用--E 作为元素名使用。A 作为属性使用。C 作为类名使用。M 作为注释使用
template : "<h1>自定义指令!</h1>"
};
}); </script></body>Controller: ng-controller 지시어는 애플리케이션 컨트롤러를 정의합니다.
Filter: 파이프 문자(|)와 필터를 통해 표현식에 필터를 추가할 수 있습니다.
service: AngularJS에서는 자신만의 서비스를 만들거나 내장된 서비스를 사용할 수 있습니다. 서비스는 AngularJS 애플리케이션에서 사용할 수 있는 함수 또는 객체입니다. AngularJS에는 30개 이상의 기본 제공 서비스가 있습니다. 다음은 일반적으로 사용되는 내장 서비스 중 일부입니다. (자세한 내용은 PHP 중국어 웹사이트 AngularJS 개발 매뉴얼 을 참조하세요.)
1，$location:类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。2，$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval 函数。5,用户可以根据自己的需求来创建自定义服务。
http: 핵심 서비스 ngularJS에서는 원격 서버에서 데이터를 읽는 데 사용됩니다. $http의 성공 및 오류 메소드는 v1.5에서 더 이상 사용되지 않습니다.
格式：/ 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});select box(select) 대신 then 메소드를 사용하세요. AngularJS는 배열이나 객체를 사용하여 옵션의 드롭다운 목록을 만들 수 있습니다.
1,使用ng-options来创建一个对象<p ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select></p><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});</script>2,使用ng-repeat来创建对象，<select ng-model="selectedSite">
<option ng-repeat="x in names">{{x}}</option></select>3,区别：ng-options，选择的值是一个对象：也就是当select获取值selectedSite时候，得到的是一个对象。ng-repeat，选择的值是一个字符串:也就是当select获取值selectedSite时候，得到的是一个字符串Table: AngularJs의 ng-repeat 지시문은 테이블을 완벽하게 표시할 수 있습니다. 테이블을 표시할 때 필터를 사용할 수도 있습니다.
<p ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names | orderBy : 'Name'">
<td>{{ $index + 1 }}</td>//显示序号 <td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table></p><script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});</script>HTML DOM： AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。你可以使用表达式来计算布尔值（ true 或 false）:
3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候，是不支持的。
4,ng-click 指令定义了 AngularJS 点击事件。
模块： 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意： 对于 HTML 应用程序，通常建议把所有的脚本都放置在 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
表单： AngularJS 表单是输入控件的集合。
1,Input 控件使用 ng-model 指令来实现数据绑定。
2,checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中。举个例子：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业: <input type="checkbox" ng-model="user.jobs.engineer">工程师 <input type="checkbox" ng-model="user.jobs.designer">设计师 <input type="checkbox" ng-model="user.jobs.teacher">教师 </p>
<input type="submit" value="提交">
<input type="button" value="选中教师" ng-click="select_teacher()">
</form></body><script>
var app = angular.module("myApp", []);
app.controller("person", function($scope) {
$scope.user = {
jobs: {
engineer: true,
designer: false,
teacher: false
}
};
$scope.submit = function() {
alert(JSON.stringify($scope.user));
};
$scope.select_teacher = function() {
$scope.user.jobs.teacher = true;
}
});</script> 3,radio：我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
4,下拉菜单上面已经写过。在此不再复述。
输入验证： AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
});
</script>注意： 我们使用了 ng-show指令， color:red 在邮件的
invalid 都为 true 时才显示。
属性 描述$dirty 表单有填写记录$valid 字段内容合法的$invalid 字段内容是非法的$pristine 表单没有填写记录
API： AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回 true。 angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
注意点：
1，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
2，类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断，循环及异常。AngularJS 表达式支持过滤器。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
위 내용은 Anglejs를 처음 접할 때 무엇을 알아야 합니까? 2018년에 Anglejs를 시작하기 위해 꼭 배워야 할 튜토리얼(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7554
15
1382
52
83
11
59
19
24
96
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
PHP와 AngularJS를 사용하여 웹 애플리케이션 구축
May 27, 2023 pm 08:10 PM
인터넷의 지속적인 발전으로 인해 웹 애플리케이션은 기업 정보 구축의 중요한 부분이자 현대화 작업에 필요한 수단이 되었습니다. 웹 애플리케이션을 쉽게 개발, 유지 관리 및 확장하려면 개발자는 개발 요구 사항에 맞는 기술 프레임워크와 프로그래밍 언어를 선택해야 합니다. PHP와 AngularJS는 각각 서버측 및 클라이언트측 솔루션으로 널리 사용되는 두 가지 웹 개발 기술입니다. 이들을 결합하여 사용하면 웹 애플리케이션의 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. PHPPHP의 장점
Flask와 AngularJS를 사용하여 단일 페이지 웹 애플리케이션 구축
Jun 17, 2023 am 08:49 AM
웹 기술의 급속한 발전으로 단일 페이지 웹 애플리케이션(SinglePage Application, SPA)이 점점 더 인기 있는 웹 애플리케이션 모델이 되었습니다. 기존의 다중 페이지 웹 애플리케이션과 비교하여 SPA의 가장 큰 장점은 사용자 경험이 더 부드럽고 서버의 컴퓨팅 부담도 크게 줄어든다는 것입니다. 이번 글에서는 Flask와 AngularJS를 사용하여 간단한 SPA를 구축하는 방법을 소개하겠습니다. Flask는 경량 Py입니다.
PHP 및 AngularJS를 사용하여 파일 관리를 용이하게 하는 온라인 파일 관리 플랫폼 개발
Jun 27, 2023 pm 01:34 PM
인터넷의 대중화로 인해 점점 더 많은 사람들이 네트워크를 사용하여 파일을 전송하고 공유하고 있습니다. 그러나 여러 가지 이유로 파일 관리에 FTP와 같은 전통적인 방법을 사용하는 것은 현대 사용자의 요구를 충족할 수 없습니다. 따라서 사용하기 쉽고 효율적이며 안전한 온라인 파일 관리 플랫폼을 구축하는 것이 추세가 되었습니다. 본 기사에서 소개하는 온라인 파일 관리 플랫폼은 PHP와 AngularJS를 기반으로 파일 업로드, 다운로드, 편집, 삭제 및 기타 작업을 쉽게 수행할 수 있으며 파일 공유, 검색,
PHP 프로그래밍에서 AngularJS를 어떻게 사용하나요?
Jun 12, 2023 am 09:40 AM
웹 애플리케이션의 인기로 인해 프런트엔드 프레임워크인 AngularJS가 점점 인기를 얻고 있습니다. AngularJS는 동적 웹 애플리케이션 기능을 갖춘 웹 애플리케이션을 구축하는 데 도움이 되도록 Google에서 개발한 JavaScript 프레임워크입니다. 반면, 백엔드 프로그래밍의 경우 PHP는 매우 널리 사용되는 프로그래밍 언어입니다. 서버 측 프로그래밍에 PHP를 사용하는 경우 AngularJS와 함께 PHP를 사용하면 웹 사이트에 더욱 역동적인 효과를 가져올 수 있습니다.
AngularJS의 기본 소개
Apr 21, 2018 am 10:37 AM
이 글의 내용은 AngularJS의 기본 소개에 관한 것입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
프론트엔드 개발에 PHP와 AngularJS를 사용하는 방법
May 11, 2023 pm 05:18 PM
인터넷의 대중화와 발전으로 프론트엔드 개발이 점점 더 중요해지고 있습니다. 프론트엔드 개발자로서 우리는 다양한 개발 도구와 기술을 이해하고 숙달해야 합니다. 그중 PHP와 AngularJS는 매우 유용하고 인기 있는 두 가지 도구입니다. 이 글에서는 프론트엔드 개발을 위해 이 두 도구를 사용하는 방법을 설명하겠습니다. 1. PHP 소개 PHP는 널리 사용되는 오픈 소스 서버 측 스크립팅 언어로 웹 개발에 적합하며 웹 서버 및 다양한 운영 체제에서 실행될 수 있습니다. PHP의 장점은 단순성, 속도, 편리성입니다.
