AngularJS(一)

最新推荐文章于 2021-09-17 20:43:50 发布

everydaywithmore

最新推荐文章于 2021-09-17 20:43:50 发布

阅读量105

点赞数

分类专栏： AngularJs 文章标签： AngularJs

本文链接：https://blog.csdn.net/weixin_41156770/article/details/80337313

版权

AngularJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS的基础知识（对权威指南一书中所学内容的总结）

第一部分：基本知识的介绍

AngularJS 是什么？

1 AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。
2 它提供了开发者在现代Web应用中经常要用到的一系列高级功能：解耦应用逻辑、数据模型和视图； Ajax服务；依赖注入；浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）。

AngularJS与jQuery的区别？

以jQuery为例，为了在DOM中插入一个按钮元素，我们必须知道要把元素放到何处，并在合适的位置插入它，而AngularJS则通过原生的Model-View-Controller（MVC，模型–视图–控制器）功能增强HTML。

数据绑定和第一个AngularJS Web应用

AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。
要实现这个功能，只要在HTML页面中引用 angular.js ，并在某个DOM元素上明确设置ng-app 属性即可。 ng-app 属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有 ng-app 属性的DOM元素包含的元素才会受AngularJS影响。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Simple app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
    </script>
</head>
<body>
    <input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>
</html>

由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
    <div ng-controller="MyController">
    <h1>Hello {{ clock.now }}!</h1>
</div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

function MyController($scope) {
    $scope.clock = {
        now: new Date()
    };
    var updateClock = function() {
        $scope.clock.now = new Date()
    };
    setInterval(function() {
        $scope.$apply(updateClock);
    }, 1000);
    updateClock();
};

模块

AngularJS允许我们使用 angular.module() 方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

作用域

在Angular启动视图的时候，会将ng-app元素同$rootScope 绑定在一起。

控制器

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。
当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的 $scope 给这个控制器。

过滤器

1 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提
供了方便的途径可以自己创建过滤器。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。例如，假设我们希望将字符串转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：{{ name | uppercase }}。

2 在JavaScript代码中可以通过 $filter 来调用过滤器。例如，在JavaScript代码中使用 lowercase过滤器。

app.controller('DemoController', ['$scope','$filter',function($scope, $filter) {
    $scope.name = $filter('lowercase')('Ari');
}]);

自定义过滤器

创建自定义过滤器需要将它放到自己的模块中。将字符串第一个字母转换为大写：

angular.module('myApp.filters', []).filter('capitalize', function() {
    return function(input) {};
});

过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。上面这个例子中，我们
在调用过滤器时简单地把 input 当作字符串来处理。可以在这个函数中做一些错误检查：

angular.module('myApp.filters', []).filter('capitalize', function() {
    return function(input) {
    //input是我们传入的字符串
    if (input) {
        return input[0].toUpperCase() + input.slice(1);
    }
});