掌握这些angular 算是入门了

来源：互联网发布：apache配置服务器编辑：程序博客网时间：2024/05/16 08:46

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", []);app.directive("runoobDirective", 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", []);app.directive("runoobDirective", 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", []);app.directive("runoobDirective", 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 中定义。

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

在body中绑定myUrl.即可

17.$http

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

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

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

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

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

19.AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

每隔几秒，func一次。

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

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

app.service('hexafy', function() {
    this.myFunc = function (x) {//myFunc只是个函数名
        return x.toString(16);
    }
});

app.controller('myCtrl', function($scope, 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>

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 没ng-option好用

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{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>

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

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

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

<select ng-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",

 site03 : "Taobao"

}

sites={

car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}

}

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

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

非常灵活。

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

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

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

使用css修饰也非常简单：

给表格行添加行号：

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

ng-if

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

结果如下：

Alfreds FutterkisteGermanyAna Trujillo Emparedados y heladosMexicoAntonio Moreno TaqueríaMexicoAround the HornUKB's BeveragesUKBerglunds snabbköpSweden24.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>

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