AngularJS

发表于 | 分类于

例子

  • ng-app 指令告诉 AngularJS，
    元素是 AngularJS 应用程序 的”所有者”。
  • ng-model 指令把输入域的值绑定到应用程序变量 name。
  • ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
1
2
3
4
5
6
7
8
9
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>


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

ng-app作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 对象

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

AngularJS 数组

1
2
3
4
5
<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 <span ng-bind="points[2]"></span></p>
 
</div>

重复 HTML 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

创建自定义的指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

你可以通过以下方式来调用指令：

  • 元素名
    <runoob-directive></runoob-directive>
  • 属性
    <div runoob-directive></div>
  • 类名
  • 注释

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用
    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令

1
2
3
4
5
6
7
8
9
10
11
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

验证用户输入

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

应用状态

1
2
3
4
5
6
7
8
9
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.co">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

CSS 类

1
2
3
4
5
6
7
8
9
10
11
<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

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

ng-model 指令根据表单域的状态添加/移除以下类：

  • ng-valid: 验证通过
  • ng-invalid: 验证失败
  • ng-valid-[key]: 由$setValidity添加的所有验证通过的值
  • ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
  • ng-pristine: 控件为初始状态
  • ng-dirty: 控件输入值已变更
  • ng-touched: 控件已失去焦点
  • ng-untouched: 控件未失去焦点
  • ng-pending: 任何为满足$asyncValidators的情况

AngularJS Scope(作用域)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

根作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div ng-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>

外部文件中的控制器

1
2
3
4
5
6
7
8
9
10
<div ng-app="myApp" ng-controller="personCtrl">

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 src="personController.js"></script>

AngularJS 过滤器

currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div ng-app="myApp" ng-controller="personCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>姓名为 {{ lastName | uppercase }}</p>
<p>姓名为 {{ lastName | lowercase }}</p>
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>

<!--排序-->
<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>

<!--过滤输入-->
<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

自定义过滤器

1
2
3
4
5
6
7
8
9
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

AngularJS 服务

$location服务

返回当前页面的 URL 地址。

1
2
3
4
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$http 服务

向服务器发送Http请求

1
2
3
4
5
6
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});

$timeout 服务

$timeout 服务对应了 JS window.setTimeout 函数。

1
2
3
4
5
6
7
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

$interval 服务对应了 JS window.setInterval 函数。

1
2
3
4
5
6
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

1
2
3
4
5
6
7
8
9
10
var app = angular.module('myApp', []);

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

过滤器中，使用自定义服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div ng-app="myApp">
    在过滤器中使用服务:
    <h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
</script>

$http

1
2
3
4
5
6
7
8
9
10
11
12
13
// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

//简写
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div ng-app="myApp" ng-controller="siteCtrl"> 
 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

AngularJS Select(选择框)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 <!--也可以使用下面的-->
 <select>
<option ng-repeat="x in names">{{x}}</option>
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

ng-options 与 ng-repeat区别

http://www.runoob.com/angularjs/angularjs-select.html

AngularJS 表格

http://www.runoob.com/angularjs/angularjs-tables.html

AngularJS HTML DOM和事件

ng-disabled 指令

1
2
3
4
5
6
7
8
9
10
11
<div ng-app="" ng-init="mySwitch=false">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>

ng-show 指令

1
2
3
4
<div ng-app="" ng-init="hour=13">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<p ng-show="hour > 12">我是可见的。</p>

ng-hide 指令

1
2
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>

ng-click 指令

1
2
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>

隐藏 HTML 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
<!--<p ng-show="myVar">-->
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

AngularJS 表单

http://www.runoob.com/angularjs/angularjs-forms.html

数据绑定

<input type="text" ng-model="firstname">

Checkbox（复选框）

单选框

单选框使用同一个 ng-model

下拉菜单

HTML 表单

AngularJS 全局 API

全局 API 函数使用 angular 对象进行访问。

  • angular.lowercase() 转换字符串为小写
  • angular.uppercase() 转换字符串为大写
  • angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
  • angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

switch case语句

1
2
3
4
5
6
<p ng-switch = "x3">
  是不是字符串：
  <label ng-switch-when = "true">是</label>
  <label ng-switch-when = "false">不是</label>
  <label ng-switch-when = ""></label>
</p>

AngularJS 包含

包含html页面

ng-include="'runoob.htm'"

跨域包含

AngularJS 动画

AngularJS 依赖注入

AngularJS 路由

###

ng-bind 和花括号的区别就是 启动加载的时候显示不同

lightquant wechat
欢迎您订阅灯塔量化公众号！