angular 1 菜鸟教程

一、angular简介

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-init 指令初始化 AngularJS 应用程序变量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app=""><p>名字 : <input type="text" ng-model="name"></p><h1>Hello {{name}}</h1>
</div></body>
</html>

ng-model

<div ng-app="" ng-init="firstName='John'"><p>姓名为 <span ng-bind="firstName"></span></p></div>

ng-init

HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p></div>

data-ng

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.firstName= "John";$scope.lastName= "Doe";
});
</script>

AngularJS应用

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div>

AngularJS对象

AngularJS 数组

AngularJS 数组就像 JavaScript 数组：

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div>

AngularJS数组

AngularJS 表达式与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><p>使用 ng-repeat 来循环数组</p><ul><li ng-repeat="x in names">{{ x }}</li></ul>
</div>

重复Html元素

转载于:https://www.cnblogs.com/silence-maple/p/10090588.html