AngularJS学习

来源：互联网发布：杭州多赢网络怎么样编辑：程序博客网时间：2024/05/16 04:40

参考：RUNOOB.COM，菜鸟教程

1 实例：根据输入内容，直接展示内容。

引入：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

input内输入XX,直接下面显示 Hello XX

一、Angular JS基础

1,1 表达式

<div ng-app =""> //不可缺少 ng-app
<p>我的第一个表达式： {{ 5 + 5 }}</p> 结果为10
</div>

1.2 指令

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p> //John

1.3

1.4 验证

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress"ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

1.5

<style>

input.ng-invalid {
background-color: lightblue;
}

</style>
<body>

<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text"required>
</form>

1.6

<divng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
<li ng-repeat="x in names">{{x}}{{lastname}}</li>
</ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias","Linus"];
$rootScope.lastname = "Refsnes";
});

</script>

二、Angular JS指令

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

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

ng-app 定义应用程序，ng-model 元素值绑定，ng-bind 应用程序数据绑定到HTML视图；

ng-init 指令初始化 AngularJS 应用程序变量；data-ng-bind自定义属性。

ng-app定义应用，ng-controller定义了控制器。

ng-show 属性返回 true 的情况下显示

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

注：

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

1 0