angularjs笔记2

9、ng-repeat 

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

      
比如:

<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>

 注意:ng-init 指令为
AngularJS 应用程序定义了 初始值。平常情形下,不使用
ng-init。您将选择八个控制器或模块来取代它。稍后您将学习越来越多关于控制器和模块的学识。

10、 .directive 函数

调用自定义指令,HTML
成分上供给丰裕自定义指令名。使用驼峰法来定名一个下令, 

runoobDirective,
但在行使它时索要以  分割, runoob-directive:

您能够因而以下方法来调用指令:

  • 元素名

<runoob-directive></runoob-directive>

  • 属性

<div runoob-directive></div>

  • 类名

<div class=”runoob-directive”></div>

  • 注释

<!–
指令: runoob-directive –>

能够限制你的下令只可以通过一定的点子来调用:

  • E 作为成分名使用
  • A 作为性能使用
  • C 作为类名使用
  • M 作为注释使用

可以运用1个依然多少个体协会同利用,比如:EAC,未有注脚的话,私下认可都足以

 

比如:

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

app.directive(“runoobDirective”, function() {

    return {

        restrict : “A”,

        template : “<h一>自定义指令!</h1>”

    };

});

11、验证 (ng-model)

(1)  
必填项

<input
id=”name”  required  ng-model=’user.name’ />

(二)  
最小长度

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

(叁)  
最大尺寸

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

(四)  
情势相配

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

(五)  
电子邮件

<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 功效范围)

<div ng-app=”myApp” ng-controller=”myCtrl”>

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

</div>

<script>

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>

一伍、控制器方法

      
比如:

<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);

});

   
(陆)过滤器中选拔自定义服务

   
在过滤器 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 指令来创建1个下拉列表,列表项通过对象和数组循环输出

比如:

<div ng-app=”myApp” ng-controller=”myCtrl”>

<select 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>

也能够采纳ng-repeat 指令来创建下拉列表

比如:

<select>

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

</select>

注意:ng-repeat 指令是透过数组来循环
HTML
代码来创立下拉列表,但 ng-options 指令更契合成立下拉列表,它有以下优势:使用 ng-options 的选项的1个目标, ng-repeat 是二个字符串。

将数据对象作为数据源:

<select ng-model=”selectedSite” ng-options=”x
for (x, y) in sites
“>

</select>

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)

      
比如:

             
<div ng-app=”” ng-init=”hour=13″>

<p
ng-show=”hour > 12″>小编是可知的。</p>

</div>

23、ng-hide

24、事件

  
ng-click点击事件

     
<div ng-app=”” ng-controller=”myCtrl”>

<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 class=”container”>

       <div ng-include=”‘myUsers_List.htm'”></div>

</div>

28、AngularJS动画

      
要求引进angular-animate.min.js 库

<script
src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"&gt;&lt;/script&gt;

还需在动用中动用模型
ngAnimate:

<body
ng-app=”ngAnimate”>

而是:即使大家采纳已经设置了使用名,能够把
ngAnimate 直接添加在模型中

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

ngAnimate
模型可以添加或移除 class 。ngAnimate 模型并无法使 HTML
成分爆发动画,可是 ngAnimate 会监测事件,类似隐藏突显 HTML 成分,如果事件发生 ngAnimate 就会选择预订义的 class 来设置 HTML
成分的卡通。

2九、信赖注入(配置)

以下6个着力组件用来作为依靠注入:

  • value
  • factory
  • service
  • provider
  • constant

(1) 
value

//
创设 value 对象 “defaultInput” 并传递数据

mainApp.value(“defaultInput”,
5);

 

// 将
“defaultInput” 注入到控制器

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

 

});

 

(2) 
factory

  • factory
    是1个函数用于重回值。在 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 创设3个 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-app=””>

        
<input type=”text” ng-model=”name”>

        
<div ng-switch=”name”>

           
<div ng-switch-when=”hello”>hello</div> // 匹配,显示

           
<div ng-switch-when=”world”>world</div> // 匹配,显示

           
<div ng-switch-default>default</div> //
不包容,显示暗中认可值

        
</div>

     
</div>

31、ng-method

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

     
其中: div1是id

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

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

   
(二)判断五个值是还是不是等于

angular.equals(NaN,NaN)

(三)对象的继承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);

(五)复制属性

var a = {‘name’:1};

    var b = {‘age’:2};

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

 

 

 

 

 

(六) 
遍历方法

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();

3贰、通过点名的习性遍历(track by) —有错,不知道干什么

<div
ng-init=”phones=[‘三星’,’华为’,’苹果’,’苹果’]”>

   
<div ng-repeat=”phone in phones track by $index”>

      
  {{phone}}

</div>

</div>

33、ng-if

  
条件不树立的时候,命令不实施,并且会移出成分

34、run

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

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

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

   
$rootScope.name = {name:2};

}]);

就算我们需求在每一回路由发生变化时,都执行叁个函数来表明用户的权位,放置这几个职能唯1合理的地点就是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

   
比如:

<a
ng-href=”{{src}}”>go!!!</a>

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

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

        $timeout(function () {

            //别忘了加协议

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

        },5000);

    });

37、ng-model-options 

3八、Controller 间通讯机制

39、配置(config())

在模块的加载阶段,AngularJS会在提供者注册和配备的进程中对模块举行配备。在整整AngularJS的干活流中,这几个阶段是绝无仅有能够在动用运行前进行修改的一些。

 

 

   

 

相关文章