鏈接
https://www.w3schools.com/angular/
基礎
directives, expressions, filters, modules, and controllers
Events, DOM, Forms, Input, Validation, Http
歷史
AngularJS version 1.0 was released in 2012.
工作原理
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
- 通過指令拓展html屬性
ng-app directive defines an AngularJS application.
ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
ng-bind directive binds application data to the HTML view.
ng-init directive initializes AngularJS application variables.
-
使用表達式綁定數據到html
AngularJS expressions are written inside double braces: {{ expression }}.AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
<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>
// AngularJS modules define applications:
var app = angular.module('myApp', []);
// AngularJS controllers control applications:
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS Expressions
{{ expression }} 或者 ng-bind="expression"
object
ng-init="person={firstName:'John',lastName:'Doe'}"
{{ person.lastName }}
Arrays
ng-init="points=[1,15,19,2,40]"
{{ points[2] }}
AngularJS Modules
The module is a container for the application controllers.
AngularJS Directives
AngularJS lets you extend HTML with new attributes called Directives.
The ng-app Directive
root element
auto-bootstrapThe ng-init Directive
initial valuesThe ng-model Directive
bind html values to dataCreate New Directives
js 中 camel case name
html 中 use - separated name
<w3-test-directive></w3-test-directive>
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
使用范圍:
invoke a directive by using: Element; Attribute; Class; Comment;
添加限制范圍：
can restrict your directives to only be invoked by some of the methods.
/*
E for Element name
A for Attribute
C for Class
M for Comment
*/
return { restrict : "EA",
template : "<h1>Made by a directive!</h1>"
};
AngularJS ng-model Directive
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
- Validate User Input
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
- Application Status
The ng-model directive can provide status for application data (invalid, dirty, touched, error):
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
- CSS Classes
The ng-model directive provides CSS classes for HTML elements, depending on their status:
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
The ng-model directive adds/removes the following classes, according to the status of the form field:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
數據綁定
什么是 Data Model
AngularJS applications usually have a data model. The data model is a collection of data available for the application.
什么是 HTML View
The HTML container where the AngularJS application is displayed, is called the view.
什么是 Two-way Binding
Data binding in AngularJS is the synchronization between the model and the view.
When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
AngularJS Controllers
AngularJS controllers control the data of AngularJS applications.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
應用執行流程
AngularJS應用程序由ng-app =“myApp”定義。 應用程序在<div>中運行。
ng-controller =“myCtrl”屬性是一個AngularJS指令。 它定義了一個控制器。
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
AngularJS將使用$ scope對象調用控制器。
In AngularJS, $scope is the application object (the owner of application variables and functions).
在AngularJS中，$ scope是應用程序對象（應用程序變量和函數的所有者）。
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
ng-model指令將輸入字段綁定到控制器屬性（firstName和lastName）。
AngularJS Scope
The scope is the binding part between the HTML (view) and the JavaScript (controller).
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
Understanding the Scope
If we consider an AngularJS application to consist of:
- View, which is the HTML.
- Model, which is the data available for the current view.
- Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
AngularJS Filters
Filters can be added in AngularJS to format data.
** Filters can be added to expressions by using the pipe character |, followed by a filter. **
<p>The name is {{ lastName | lowercase }}</p>
// The orderBy filter sorts an array:
<li ng-repeat="x in names | orderBy:'country'">
// Return the names that contains the letter "i":
<li ng-repeat="x in names | filter : 'i'">
Custom Filters
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
AngularJS Services
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
AngularJS has about 30 built-in services. One of them is the $location service.
The $location service has methods which return information about the location of the current web page:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
built-in services;
$location; $http; $setTimeout; $setInterval; ...
Create Your Own Service
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
** Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.**
