AngularJS入門

標籤：

w3shools    angularjs教程

Introduction

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.(指令)

The ng-app directive defines(定義/聲明了angularjs應用) an AngularJS application.

The ng-model directive binds(綁定) the value of HTML controls(控制器) (input, select, textarea) to application data.

The ng-bind directive binds(綁定) application data to the HTML view(視圖).

 例子：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p ng-bind="name"></p>
</div>
</body>
</html>

Example explained:

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.(指令ng-model把input的值綁定到了angularjs應用的變數name上)

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.(指令ng-bind把<p>綁定到了angularjs應用的變數name上)

AngularJS Directives

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.(特殊的HTML attributes)

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

AngularJS Applications

AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications.

The ng-app directive defines the application, the ng-controller directive defines the controller.

分類介紹AngularJS Expressions(運算式)

AngularJS binds data to HTML using Expressions.(把angularJS的資料綁定到html上面 用的是expression)

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions can also be written inside a directive(用指令): ng-bind="expression".

AngularJS will resolve the expression(解析), and return the result exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

AngularJS Expressions vs. JavaScript Expressions

Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.(字母，操作符，變數)

Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.

AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

AngularJS expressions support filters, while JavaScript expressions do not.

AngularJS Modules

An AngularJS module defines an application.(定義了一個應用)

The module is a container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.(控制器總是屬於一個模組)

Creating a Module

A module is created by using the AngularJS function angular.module

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

The "myApp" parameter refers to an HTML element in which the application will run(應用將會在哪個元素內部運行).

Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

Adding a Directive

AngularJS has a set of built-in directives which you can use to add functionality(增加功能) to your application.

In addition you can use the module to add your own directives to your applications:

AngularJS Directives

AngularJS lets you extend HTML with new attributes(算是angularjs語境下新的特性) called Directives.

AngularJS has a set of built-in directives which offers functionality to your applications.

AngularJS also lets you define your own directives.

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.(指令是一些被“擴充”了的html屬性)

Data Binding(資料繫結)

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.(運算式和資料繫結在一起)

{{ firstName }} is bound with ng-model="firstName".

Create New Directives(添加新指令)

New directives are created by using the .directive function.

You can restrict your directives to only be invoked by some of the methods.

The legal restrict values are:

• E for Element name
• A for Attribute
• C for Class
• M for Comment 

AngularJS ng-model Directive

ng-model的作用主要是雙向繫結，純粹輸出的話用{{}}方法就可以了

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. 

The ng-model Directive

With the ng-model directive you can bind the value of an input field to a variable(變數) created in AngularJS.

Two-Way Binding(雙向綁定)

The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value:

AngularJS Data Binding(資料繫結)

Data binding in AngularJS is the synchronization between the model and the view. 資料繫結在Angularjs中指的是資料模型和視圖之間的綁定

Data binding in AngularJS is the synchronization between the model and the view.(視圖和模型的綁定)

Data Model(資料模型)

AngularJS applications usually have a data model. The data model is a collection(集合) of data available for the application.

HTML View(HTML視圖)

The HTML container where the AngularJS application is displayed, is called the view.

The view has access(接觸，擷取) to the model, and there are several ways of displaying model data in the view.

• 1  use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
• 2  use double braces {{ }} to display content from the model:

• 3   use the ng-model directive on HTML controls to bind the model to 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(控制著angularjs的資料) of AngularJS applications.

AngularJS controllers are regular JavaScript Objects.(常規的js對象)

AngularJS Controllers

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

例子

<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‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

Application explained:

The AngularJS application is defined by  ng-app="myApp". The application runs inside the <div>.

The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope(對象) object.

In AngularJS, $scope is the application object (the owner of application variables and functions(擁有變數和函數)).

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).

Controller Methods

The example above demonstrated a controller object with two properties: lastName and firstName.

A controller can also have methods (variables as functions):

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.

How to Use the Scope?

pass the $scope object as an argument:

When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.

In the view, you do not use(不用首碼)the prefix $scope, you just refer to a propertyname, like {{carname}}.

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.

Know Your Scope

It is important to know which scope you are dealing with, at any time.

AngularJS Filters

Filters can be added in AngularJS to format data.

AngularJS Services

In AngularJS you can make your own service, or use one of the many built-in services.

What is a Service?

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

In order to use the service in the controller, it must be defined as a dependency(依賴，需要傳入控制器函數中).

Why use Services?

For many services, like the $location service, it seems like you could use objects that are already(早就存在在dom中的) in the DOM, like thewindow.location object, and you could, but it would have some limitations, at least for your AngularJS application.

AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.

AngularJS Events

AngularJS has its own HTML events directives.

The event directives allows us to run AngularJS functions at certain user events.

An AngularJS event will not overwrite an HTML event, both events will be executed.

AngularJS Routing

The ngRoute module helps your application to become a Single Page Application(SPA單頁應用).

The ngRoute module routes your application to different pages without reloading the entire application.

Your application needs a container to put the content provided by the routing.This container is the ng-view directive.

 

AngularJS入門