js框架——angular.js

2022-10-04 14:13:23

这是一个前端用的框架，使用简单。详细介绍这里就不写了，主要介绍其语法和作用——

1. 声明一个angular

如果想要使用一个angular代码，则需要在【想要使用angular的范围内写上ng-app】，例如，对象是整个body内容的话，就需要在body标签内添加——

就和添加一个属性差不多的语法方式，不要多想

2. angular的使用

<p>这是我们第一次接触ag的表达式 {{1 + 2}}</p>

以上代码是angular的表达式，在｛｛｝｝中的部分代表视图——即显示部分，这里主要会显示各种需要呈现的数据，而且里面也可以写上表达式，如上图。

一般的，都是：

<p>Hello {{name }}!</p>

代表显示这个name变量，如果后台设定了name等于3，或者"ajaja"，那么执行之后就会显示3或者"ajaja"。

3. 过滤器

所谓过滤，就是将一种东西，通过某种规律，规则，转换成另一种东西。例如污水过滤，就是将污水，通过【过滤杂质】这一规则，转换成【干净的水】，重要的是转换和转换规则。

angular的过滤，就是这么一个转换的规则：

<p>Hello {{name| uppercase }}!</p>

这句话的意思，是输出name变量，并且将其转为大写方式。

过滤可以同时使用多种：

<p>Hello {{name| uppercase|lowercas }}!</p>

过滤的规则有多种。

4. ｛｛｝｝使用范围

我们可以在一个标签内使用｛｛｝｝作为视图输出各种东西，如

<p>Hello {{name| uppercase }}!</p>

而同样，我们也可以在【标签上面使用{{}}】，如

<p class="{{name}}">Hello {{name| uppercase }}!</p>

如果name的值是user，那么就会输出——

USER，且带有user类的css样式。

5. 模块定义

app一般一个网页只定义一个，毕竟多了即无用也不好用。

要使用app就必须使用模块。。

定义的方式：

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

Myapp是这个文档app的值，上面没有写，其实应该是有一个值的，例如

如此，这个thisapp就是上面的MyApp了，通过这句话声明一个模块出来，然后构造各种东西进去。

6. 控制器

控制器类似于小型的js文件，它们专门负责某一块代码的js构造。一个文档中可以有多个控制器，每个控制器可以有不同的功能。使用控制器，要在标签上声明，并给予名称——

<div ng-controller="MyCtrl">
<p>{{value}}</p>
</div>

给予名称之后，就可以在后台js文件上写上各种东西了，例如——

function MyCtrl($scope) {

  $scope.value = "some value";

}

可以看到，结果为some value。

7. ng-init初始化程序

init用于初始化数据，例如：

<div ng-controller="MyCtrl">
<p ng-init="incrementValue(5)">{{value}}</p>
</div>

function MyCtrl($scope) {
$scope.value = 1;

$scope.incrementValue = function(value) {
$scope.value += value;
};
}

返回的结果是2，说明这个函数自动执行了。这就是初始化。

8. ｛｛｝｝还能塞什么

这个里面其实还能塞函数：

 <div ng-controller="MyCtrl">

      <p>{{getvalue()}}</p>

    </div>

function MyCtrl($scope) {

  $scope.value = 1;

  $scope.newvalue = 2;

  $scope.getIncrementedValue = function() {

    return $scope.value + 1;

  };

  $scope.getvalue = function(){

      return $scope.newvalue;

  }

}

9.监听

使用model可以随时让模型和视图同步更新——

<div ng-controller="MyCtrl">

      <input type="text" ng-model="name" placeholder="Enter your name">

      <p>{{greeting}}</p>

    </div>

function MyCtrl($scope) {

  $scope.name = "";

  //监听该模块作用域中名字的变化

  $scope.$watch("name", function(newValue, oldValue) {

    if (newValue.length > 0) {

      $scope.greeting = "Greetings " + newValue;

    }

  });

}

上面的name是模块的名称，$scope.$watch是监听函数，它监听的对象是name模块，然后执行后面的函数。

当name中数据发生改动的时候触发。

10. 模块嵌套

模块也是可以嵌套的用的，就和对象的嵌套一样。遵循的规则也差不多，外面的模块不能调用里面的变量，里面的模块可以调用外面的变量——

 .nested {

         border: 1px solid red;

         margin-left: 2em;

         padding: 1em;

       }

  <body ng-app="MyApp">

     <div ng-controller="MyCtrl">

       <label>Primitive</label>

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

       <label>Object</label>

       <input type="text" ng-model="user.name">

       <div class="nested" ng-controller="MyNestedCtrl">

         <label>Primitive</label>

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

         <label>Primitive with explicit $parent reference</label>

         <input type="text" ng-model="$parent.name">

         <label>Object</label>

         <input type="text" ng-model="user.name">

       </div>

     </div>

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

 app.controller("MyCtrl", function($scope) {

   $scope.name = "Peter";

   $scope.user = {

     name: "Parker"

   };

 });

 app.controller("MyNestedCtrl", function($scope) {

     //内嵌入的一个控制层,

     //内嵌入的一个作用域，一层一层往上找

     $scope.name = "gyfnice"

 });

11. 循环

指令ng-repeat表示循环，循环的范围是指令所在的标签之间所有内容

app.controller("MyCtrl", function($scope) {
$scope.users = ["Peter", "Daniel", "Nina"];
});

如此，就会返回三个li——

<li>Peter</li>

<li>Danel</li>

码农公寓

相关文章