60分钟学会angular

发布时间：2020-12-17 10:06:12 所属栏目：安全来源：网络整理

导读：1. AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 2. 如果您移除了 ng-app 指令，HTML 将直接把表达式显示

AngularJS 通过ng-directives扩展了 HTML。

ng-app指令定义一个 AngularJS 应用程序。

ng-model指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind指令把应用程序数据绑定到 HTML 视图。

2.如果您移除了ng-app指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

3.AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

4.ng-app=" "这样写时，{{}}内容会与ng-model绑定;

ng-app="myapp"||ng-app="myapp" ng-controller="mycontroller"

则在<script>里定义控制器，才能绑定数据

5.ng-init 用于初始化绑定的数据

ng-band 将init的变量绑定起来 ng-band作为属性，放在标签内的。没有ng-band的是放在innerHTML;

6,ng指令

AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。

ng-app指令初始化一个 AngularJS 应用程序。

ng-init指令初始化应用程序数据。

ng-model指令把元素值（比如输入域的值）绑定到应用程序。

详细的指令集：http://www.runoob.com/angularjs/angularjs-reference.html

7.使用.directive函数来添加自定义的指令。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<body ng-app="myApp">

<runoob-directive></runoob-directive>//自定义指令标签

<script>
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function() {//通过哦directive扩展自定义指令
    return {
        template : "<h1>自定义指令!</h1>"//定义的标签内容
    };
});
</script>

</body>

</body>
</html>

8.指令可以使用四种方式调用：

元素名/属性/类名/注释;

元素名如上所示;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<body ng-app="myApp">
<div runoob-directive></div>//类名调用方法
<script>
var app = angular.module("myApp",function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
</body>
</html>

类名：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
<div class="runoob-directive"></div>//类名。注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令
<script>
var app = angular.module("myApp",function() {
    return {
        restrict : "C",template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
</html>

注释：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
<!-- directive: runoob-directive -->//注释。注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
//注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
<script>
var app = angular.module("myApp",function() {
    return {
        restrict : "M",replace : true,template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
</html>

9.设置restrict类型，可以限制调用方式。

E只限元素名使用
A只限属性使用
C只限类名使用
M只限注释使用

restrict默认值为EA,即可以通过元素名和属性名来调用指令。

10.控制器与{{}}的双向绑定

11.ng-model 可以为绑定数据提供四种不同的状态：

Valid: false (如果输入的值是合法的则为 true)。

Dirty: true (如果值改变则为 true)。

Touched: true(如果通过触屏点击则为 true)。

error:

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

12.ng-model提供css类

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

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

注意：ng-invalid: ng-model能提供的状态，并且添加了required的属性。这个必不可少

13.scope作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

AngularJS 应用组成如下：

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

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

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

14.controller

ng-controller="myCtrl"属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl函数是一个 JavaScript 函数。

AngularJS 使用$scope对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的$scope（相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

<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 = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

以上添加属性和方法。

15.大型应用程序，将控制器放在外部文件。

如a.js

angular.module('myApp',[]).controller('personCtrl',function($scope) {
    $scope.firstName = "John",$scope.lastName = "Doe",$scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

在红字处引用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}||{{ fullName()}}||如果只是 ng-app=" ",{{firstName+lastName}}也可以与输入绑定
</div>
<script src="personController.js"></script>
</body>
</html>
16.Service

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个$location服务，它可以返回当前页面的 URL 地址。

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

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

在body中绑定myUrl.即可

17.$http

$http是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化。

'myCtrl'$http) {//传入$http
$http.get("welcome.htm").then(function(response) {//welcome.htm是服务器，地址错误的话，最后得不到正确的data.
$scope.myWelcome = response.data;//请求得到的数据放在response中
});
});

18.AngularJS$timeout服务对应了 JSwindow.setTimeout函数。

varapp = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$timeout) {
$scope.myHeader ="Hello World!";
$timeout(function() {
$scope.myHeader ="How are you today?";
},2000);
});

19.$intervalwindow.setInterval函数。

$scope.theTime =newDate().toLocaleTimeString();
$interval(function() {
$scope.theTime =newDate().toLocaleTimeString();
},17); font-family:'courier new'; font-size:13.2px">1000);
});

每隔几秒，func一次。

20.在控制器内自定义服务

app.service('hexafy',0); font-family:'courier new'; font-size:13.2px">function() {
this.myFunc =function(x) {//myFunc只是个函数名
returnx.toString(16);
}
});

app.controller(hexafy) {
$scope.hex =hexafy.myFunc(255);
});

21.在过滤器中使用刚才自定义的函数

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

21.ng-options select下拉框

 
 < 
 div 
 ng-app= 
 "myApp" 
 ng-controller= 
 "myCtrl" 
 > 
 
 
 select 
 ng-model= 
 "selectedName" 
 ng-options= 
 "x for x in names" 
 >//蓝色部分名字随便取 
 
 
 /select 
 /div 
 script 
 > 
 
 

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

/script >

  ng-repeat 的用法： 

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

 
 其他不变，效果一样。 

 
 ng-repeat 没ng-option好用 

 
 <selectng-model="selectedSite">
 optionng-repeat="x in sites"value="{{x.url}}">{{x.site}}/option/selecth1>你选择的是:{{selectedSite}}/h1>

 
 <script>
 var app = angular.module('myApp',[]);
 app.controller('myCtrl',function($scope) {
  $scope.sites = [
  {site : "Google",url : "http://www.google.com"},
  {site : "Runoob",url : "http://www.runoob.com"},
  {site : "Taobao",url : "http://www.taobao.com"}
 ];
 });//是个数组，但是得到的结果，[你选择的是：只有对应site的site或者url]
 </script>
  

 
 "selectedSite"ng-options=x.site for x in sites">
 <h1>你选择的是:{{selectedSite.site}}</h1>
 <p>网址为:{{selectedSite.url}}</p>
  

 
 ng-option 却可以得到整个数组。 

 
 使用对象作为数据源,x为键(key),204)">y为值(value):
  

 
 <selectng-model="selectedSite"ng-options="x for (x,y) in sites">//x 为下拉框的选项。y for (x,y) in sites 则 y即（goole,runoob,taobao）作为下拉框的选项。
 /select>
 h1>你选择的值是:{{selectedSite}}/h1> 

 
 sites ={ 

 
 site01 : "Google", 

 
 site02 : "Runoob",255)">site03 : "Taobao"
  

}

 
 sitescar01 : {brand :"Ford",model :"Mustang",color :"red"},
 car02 : {brand :"Fiat",17); font-family:'courier new'; font-size:13.2px">"500",17); font-family:'courier new'; font-size:13.2px">"white"},
 car03 : {brand :"Volvo",17); font-family:'courier new'; font-size:13.2px">"XC90",17); font-family:'courier new'; font-size:13.2px">"black"}
  

}

  selectedSite.brand||selectedSite.model..都是可以的。 

  在这种情况下，下拉框的选项还可以"x.brand||x.model.." 

  非常灵活。 

22.ng 显示表格非常的简单

table>
tr"x in names"td{{ x.Name }}/td{{ x.Country }}/tr/table>

只要names={[Name:'',Contry:''],[...]}

使用css修饰也非常简单：

给表格行添加行号：

{{ $index + 1 }}>

ng-if

tdng-if="$odd"style="background-color:#f1f1f1""$even">

结果如下：

Alfreds Futterkiste	Germany
Ana Trujillo Emparedados y helados	Mexico
Antonio Moreno Taquería	Mexico
Around the Horn	UK
B's Beverages	UK
Berglunds snabbk?p	Sweden

24. ng 从sql中获取数据，用的php居多，没看到nodejs。。。。郁闷

25.ng-disable

ng-show

ng-hide

通过值为true还是false来决定效果

ng-click=function();

26.

对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

<body>

..........//其他程序

scriptsrc="myApp.js">/script"myCtrl.js"/body>

27.全局API

angular.lowercase() 使用anglular.function() 调用

28.路由

To be cotinue....

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!