AngularJS 学习笔记（一）

来源：互联网发布：设计画图软件编辑：程序博客网时间：2024/04/28 19:10

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

0 0