AngularJS 学习笔记（一）

最新推荐文章于 2022-12-09 16:14:24 发布

deep code

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量274

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u011967615/article/details/70768738

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

angularjs的好处在于数据绑定

属性以ng开头
为适应h5可以用data-ng开头

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

ng-init的值可以为对象如上例或数组，points=[1,15,19,2,40]

ng-model
ng-init
ng-bind
ng-repeat=”x in names”

使用驼峰法来命名一个指令， testDirective, 但在使用它时需要以 - 分割, test-directive:

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

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

 元素名
 <test-directive></test-directive>
 属性
<div test-directive></div>
 类名
<div class="test-directive"></div>
 注释
<!-- directive: test-directive -->

添加restrict属性，限制使用方式

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

可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA

ng-show 做验证,在ng-shwo属性返回true的情况下显示

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

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

ng-model指令可以为数据提供状态值

<form ng-app="" name="myForm" ng-init="myText = 'test@test.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

有以下状态：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

Scope(作用域)

Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

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

过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

1、uppercase，lowercase 大小写转换
{{ “lower cap string” | uppercase }} // 结果：LOWER CAP STRING
{{ “TANK is GOOD” | lowercase }} // 结果：tank is good
2、date 格式化
{{1490161945000 | date:”yyyy-MM-dd HH:mm:ss”}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
4、currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:”RMB ￥ ” }} // 结果：RMB ￥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | filter:{‘name’:’iphone’} }}
6、limitTo 截取
{{“1234567890” | limitTo :6}} // 从前面开始截取6位
{{“1234567890” | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根id降序排
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | orderBy:’id’:true }}
// 根据id升序排
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | orderBy:’id’ }}

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
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("");
    }
});
</script>

Service

服务是一个函数或对象,AngularJS 内建了很多服务，如$location、$http、$interval、$timeout
服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

自定义服务

<div ng-app="myApp">
<h1>{{255 | myFormat}}</h1>
</div>
<script>
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});
</script>

$http

$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

有如下简写方法

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

ng-option

中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

或者

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

区别：使用 ng-options 指令，选择的值是一个对象，ng-repeat 选择的值是一个字符串
使用对象作为数据源, x 为键(key), y 为值(value)

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>

事件

ng-hide=”true” 设置 HTML 元素不可见。
ng-hide=”false” 设置 HTML 元素可见。

ng-show=”false” 可以设置 HTML 元素不可见。
ng-show=”true” 可以以设置 HTML 元素可见。

ng-include
ngAnimate
依赖注入：
value
factory
service
provider
constant

参考：http://www.runoob.com/angularjs/angularjs-reference.html

deep code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 学习笔记（一）

属性以ng开头为适应h5可以用data-ng开头<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div>ng-init的值可以为对象如上例或数组，points=[1,15,19,2,40]ng-model ng-init ng-bind
复制链接

扫一扫