angularjs笔记二

时间：2016-10-28 15:15:32 阅读：313 评论：0 收藏：0 [点我收藏+]

9、ng-repeat

ng-repeat 指令用在一个对象数组上

比如：

<div ng-app="" ng-init="names=[{name:‘Jani‘,country:‘Norway‘},

{name:‘Hege‘,country:‘Sweden‘},{name:‘Kai‘,country:‘Denmark‘}]">

</li>

</ul>

</div>

注意：ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。稍后您将学习更多有关控制器和模块的知识。

10、 .directive 函数

调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令，

runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

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

元素名

<runoob-directive></runoob-directive>

属性

类名

注释

可以限制你的指令只能通过特定的方式来调用：

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

可以使用一个或者多个一起使用，比如：EAC，没有声明的话，默认都可以

比如：

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

11、验证 (ng-model)

（1）必填项

（2）最小长度

<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" />

（3）最大长度

<input type="text" id="maxlength" ng-maxlength="20" ng-model="user.maxlength" />

（4）模式匹配

    <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" />

（5）电子邮件

<input type="email" id="email" name="email" ng-model="user.email" />

（6）数字

<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />

（7） url

<input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />

比如：验证用户输入

       <form ng-app="" name="myForm">
           Email:
          <input type="email" name="myAddress" ng-model="text">
           <span ng-show="myForm.myAddress.$error.email">

不是一个合法的邮箱地址

</span>

</form>

12、状态值(invalid, dirty, touched, error)

比如：

              <form ng-app="" name="myForm" ng-init="myText = ‘test@runoob.com‘">
    <input type="email" name="myAddress" ng-model="myText" required></p>
     <h1>状态</h1>
    {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)

{{myForm.myAddress.$dirty}} (如果值改变则为 true)
{{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)

{{ myForm.myAddress.$error.email }}
</form>

13、css类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

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

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

比如：

<style>

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

</style>
<form ng-app="" name="myForm">
<input name="myAddress" ng-model="text" required>
</form>

14、Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上

比如：（Scope 作用范围）

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

根作用域：

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用

比如：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}}式家族:</h1>
<ul> <li ng-repeat="x in names">{{lastname}}{{x}} </li></ul>
</div>
<script>

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope, $rootScope) {
$scope.names = ["一", "二", "三"];
$rootScope.lastname = "蔡";
});

</script>

15、控制器方法

比如：

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>姓名: {{fullName()}}</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘personCtrl‘, function($scope) {
    $scope.firstName = "一";
    $scope.lastName = "蔡";
    $scope.fullName = function() {
        return $scope. lastName + " " + $scope. firstName;
    }
});
</script>

16、过滤器

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

使用方法：

（1） {{ price | currency }}

（2） {{ lastName | lowercase }

（3） {{ lastName | uppercase }

（4） <li ng-repeat="x in names | orderBy:‘country‘">
{{ x.name + ‘, ‘ + x.country }}
</li>

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

17、angularjs服务（service）

(1)$location

注意:$location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义

(2)$http

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

(3)$timeout

$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);

注意：取消： $timeout.cancel();

(4)$interval

$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);

注意：取消定时器： $interval.cancel();

(5)自定义服务

创建名为hexafy 的访问:

app.service(‘hexafy‘, function() {
   this.myFunc = function (x) {
        return x.toString(16);
    }
});

app.controller(‘myCtrl‘, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

(6)过滤器中使用自定义服务

在过滤器 myFormat 中使用服务 hexafy:

app.filter(‘myFormat‘,[‘hexafy‘, function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

在对象数组中获取值时你可以使用过滤器

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>

</ul>

18、$http

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ‘, ‘ + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘customersCtrl‘, function($scope, $http) {
    $http.get("a.json")
    .success(function(response) {$scope.names = response.records;});
});
</script>

19、select

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

比如：

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});

</script>

也可以使用ng-repeat 指令来创建下拉列表

比如：

注意：ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

将数据对象作为数据源：

20、tabel

(1)$index(位置)

表格显示序号可以在 <td> 中添加 $index

(2)$even 和 $odd

比如：

<table>

<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>

</tr>

</table>

21、ng-disabled

22、ng-show

ng-show 指令隐藏或显示一个 HTML 元素，ng-show=”true”时显示，反之，则隐藏

除此之外，也可以通过使用表达式来计算布尔值（ true 或 false）

比如：

<p ng-show="hour > 12">我是可见的。</p>

</div>

23、ng-hide

24、事件

ng-click点击事件

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

</div>

切换：

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><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>

25、angular.copy()拷贝

比如：

      <div ng-app="myApp" ng-controller="formCtrl">
       <form novalidate>
           First Name:<br>
          <input type="text" ng-model="user.firstName"><br>
           Last Name:<br>
          <input type="text" ng-model="user.lastName">
          <br><br>
          <button ng-click="reset()">RESET</button>
       </form>
      <p>form = {{user}}</p>
       <p>master = {{master}}</p>

</div>

<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘formCtrl‘, function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

26、AngularJS 全局 API

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

27、ng-include

使用该指令来包含html内容

比如：

</div>

28、AngularJS动画

需要引入angular-animate.min.js 库

还需在应用中使用模型 ngAnimate：

不过：如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中

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

ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

29、依赖注入(配置)

以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

（1） value

// 创建 value 对象 "defaultInput" 并传递数据

mainApp.value("defaultInput", 5);

// 将 "defaultInput" 注入到控制器

mainApp.controller(‘CalcController‘, function($scope, CalcService, defaultInput) {

});

（2） factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值

// 创建 factory "MathService" 用于两数的乘积

mainApp.factory(‘MathService‘, function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b

}

return factory;

});

（1） service

// 在 service 中注入 factory "MathService"

mainApp.service(‘CalcService‘, function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

（2） provider

通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory

// 使用 provider 创建 service 定义一个方法用于计算两数乘积

mainApp.config(function($provide) {

$provide.provider(‘MathService‘, function() {

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

（1） constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的

mainApp.constant("configParam", "constant value");

30、ng-switch

ng-switch 指令根据表达式显示或隐藏对应的部分。对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

比如：

<div ng-switch-when="hello">hello</div> // 匹配，显示

<div ng-switch-when="world">world</div> // 匹配，显示

<div ng-switch-default>default</div> // 不匹配，显示默认值

</div>

31、ng-method

(1) angular.element 将原声对象转化成jq对象

其中： div1是id

angular.element(div1).html(‘123‘);

angular.element(div1).css(‘fontSize‘,‘40px‘);

(2)判断两个值是否相等

angular.equals(NaN,NaN)

(3)对象的继承angular.extend

var a = {‘name‘:1};

var b = {‘age‘:2};

var c = {};

//把后面的给前面的

angular.extend(c,a,b);

(4)fromJson toJson

var json = ‘{"age":1,"name":2}‘;

//变成对象fromJson

json = angular.fromJson(json);

//变成字符串格式

json = angular.toJson(json);

(5)复制属性

var a = {‘name‘:1};

var b = {‘age‘:2};

angular.copy(a,b);//把a的值粘贴到b上 b的旧值消失了

（6）遍历方法

var arr = [{name:1},{name:2},{name:3}];

//angular中的遍历方法

var result = [];

angular.forEach(arr, function (item) {

this.push(item.name);//以result为this指向

},result);

（7）绑定

function cb(){

console.log(this.name);

}

var obj = {name:1};

var c = angular.bind(obj,cb);//第一个是当前this对象，要绑定的函数

c();

32、通过指定的属性遍历(track by) ---有错，不知道为什么

</div>

33、ng-if

条件不成立的时候，命令不执行，并且会移出元素

34、run

//在执行的时候配置全局变量$rootScope(会先执行run方法)

var app = angular.module("appModule",[]);

app.run([‘$rootScope‘,function ($rootScope) {

$rootScope.name = {name:2};

}]);

假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法：

angular.module(‘myApp‘, [‘ngRoute‘])

.run(function($rootScope, AuthService) {

$rootScope.$on(‘$routeChangeStart‘, function(evt, next, current) {

// 如果用户未登录

if (!AuthService.userLoggedIn()) {

if (next.templateUrl === "login.html") {

// 已经转向登录路由因此无需重定向

} else {

$location.path(‘/login‘);

}

});

35、监听（watch）

//写法1

$scope.$watch(function () {

//用这种方法的时候增加return

//当外层函数执行的时候，让里面的函数执行了，加上return后表示监控的是total执行后的结果

return $scope.total();

}, function (newVal,oldVal) {

$scope.product.post=newVal>=100?0:10;

});

//写法2

/*$scope.$watch($scope.total, function (newVal,oldVal) {

$scope.product.post=newVal>=100?0:10;

});*/

//第一个参数可以放model的名字错误的‘total‘

//放函数函数执行后的结果返回$scope上的变量

//还可以直接监控$scope.total方法

36、ng-href/ng-src

比如：

var app = angular.module(‘appModule‘,[]);

app.controller(‘ctrl‘, function ($scope,$timeout) {

$timeout(function () {

//别忘了加协议

$scope.src = ‘http://www.baidu.com‘;

},5000);

});

37、ng-model-options

38、Controller 间通信机制

39、配置（config()）

在模块的加载阶段，AngularJS会在提供者注册和配置的过程中对模块进行配置。在整个AngularJS的工作流中，这个阶段是唯一能够在应用启动前进行修改的部分。

angularjs笔记二

原文：http://www.cnblogs.com/qzccl/p/6007867.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

angularjs笔记二

9、ng-repeat

10、 .directive 函数

11、验证 (ng-model)

比如：验证用户输入

12、状态值(invalid, dirty, touched, error)

13、css类

14、Scope(作用域)

比如：（Scope 作用范围）

15、控制器方法

16、过滤器

17、angularjs服务（service）

18、$http

19、select

20、tabel

(2)$even 和 $odd

比如：

<table>

<tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td> <td ng-if="$even">{{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td> <td ng-if="$even">{{ x.Country }}</td>

</tr>

</table>

21、ng-disabled

22、ng-show

23、ng-hide

24、事件

25、angular.copy()拷贝

26、AngularJS 全局 API

27、ng-include

28、AngularJS动画

29、依赖注入(配置)

30、ng-switch

31、ng-method

32、通过指定的属性遍历(track by) ---有错，不知道为什么

33、ng-if

34、run

35、监听（watch）

36、ng-href/ng-src

37、ng-model-options

38、Controller 间通信机制

39、配置（config()）

<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>