掌握这些angular 算是入门了

墨蓝 2022-09-21 13:23 165阅读 0赞

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">
    //注释。注意： 我们需要在该实例添加 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类

注意：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>

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

结果如下：

<table style="border:1px solid grey; border-collapse:collapse; padding:5px; color:rgb(0,0,0); font-family:'Times New Roman'"> 
 <tbody> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> Alfreds Futterkiste</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> Germany</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> Ana Trujillo Emparedados y helados</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> Mexico</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> Antonio Moreno Taquería</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> Mexico</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> Around the Horn</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> UK</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> B's Beverages</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px"> UK</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> Berglunds snabbköp</td> 
   <td style="border:1px solid grey; border-collapse:collapse; padding:5px; background-color:rgb(241,241,241)"> Sweden</td> 
  </tr> 
 </tbody> 
</table>

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>