AngularJS

最新推荐文章于 2024-05-15 20:43:52 发布

bestvist

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量195

点赞数

分类专栏： angularjs 文章标签： javascript angular angularjs 框架

本文链接：https://blog.csdn.net/qq_38082661/article/details/78191397

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS 是一个 JavaScript 框架，它是一个以 JavaScript 编写的库。
angular

原文链接

Angular 简介

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证。

一般应用组成

View（视图），即HTML
Model（模型），当前视图中绑定的数据
Controller（控制器），即Javascript函数，可以添加或修改属性

Angular 表达式

Angular 表达式写在双大括号内{{expression}}，具有双向绑定功能，不过在框架未加载之前页面会显示出源码，可以使用ng-bind替代需要渲染的数据。

类似于Javascript表达式，Angular表达式可以包含字符串、变量和运算符。
与JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与JavaScript 表达式不同，AngularJS 表达式支持过滤器。

<p>Angular 表达式：{{'express :'+ 'Angular'}}</p>

Angular 指令

Angular通过指令拓展HTML

ng-app

指令告诉AngularJS该元素是AngularJS应用程序根元素。

<div ng-app="app"></div>

ng-model

双向绑定元素值与变量

<div ng-app="app" ng-init="name='bestvist'">
  <input type="text" ng-model="name">
  <p><b>名字：</b> {{ name }}</p>
</div>

ng-repeat

重复一个HTML元素

<div ng-app="app" ng-init="category=[{name:'picture',count:10},{name:'video',count:11},{name:'text',count:50}]">
  <p>循环对象：</p>
  <ul>
    <li ng-repeat="item in category">
       {{ x.name + ', ' + x.count }}
    </li>
  </ul>
</div>

自定义指令

<body ng-app="app">
<my-directive></runoob-directive>
<script>
  var app = angular.module("app", []);
  app.directive("myDirective", function() {
     scope: false, 
     restrict: 'EA',
     return {
        template : "<h1>这是一个自定义指令!</h1>"
     };
  });
</script>
</body>

scope表明指令的作用域

false 共享父级作用域
true 继承父级作用域并创建自己的作用域
{} 创建自己的作用域，与父级无关

restrict可以指定指令的调用方式

E 作为元素名使用
A 作为属性名使用
C 作为类名使用
M 作为注释使用

Angular 作用域（scope）

Scope 是应用在HTML和JavaScript之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

所有的应用都有一个 $rootScope，它可以作用在ng-app指令包含的所有HTML元素中。$ rootScope可作用于整个应用中。是各个controller中scope的桥梁。用rootscop，定义的值，可以在各个controller中使用。

Angular 控制器

ng-controller 指令定义了应用程序控制器。
控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。

<div ng-app="app" ng-controller="myCtrl">
   name: <input type="text" ng-model="name"><br>
   age: <input type="number" ng-model="age"><br>
   <br>
   描述: {{"名字："+name + "，年龄：" + age}}
</div>
<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
      $scope.name = "bestvist";
      $scope.age = 24;
   });
</script>

ng-controller 指令定义一个控制器，名称为myCtrl。
$scope是控制器内的作用域对象，具有name，age两个属性，可以在控制器中赋值。

Angular 过滤器

过滤器可用于转换数据，使用一个管道字符 | 添加到表达式和指令中

过滤器	描述
currency	格式化数组为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
uppercase	格式化字符串为大写
orderBy	根据某个表达式排列数组

姓名为 {{ name | uppercase }}

自定义过滤器

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "bestvist";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

Angular 服务

服务是一个函数或对象，可在你的 AngularJS 应用中使用。
在很多服务中，比如 $location服务，它可以使用DOM中存在的对象，类似window.location对象，但window.location对象在AngularJS应用中有一定的局限性。 AngularJS会一直监控应用，处理事件变化，AngularJS使用$ location服务比使用 window.location 对象更好。
但服务需要在控制器中引入

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

常用内置服务

$http 数据请求服务
$location url处理服务，对应于window.location
$timeout 定时服务，对应于window.setTimeout

自定义服务

var app = angular.module('app', []);
app.service('myService', function() {
    this.add = function (x, y) {
        return x + y;
    }
});

app.controller('myCtrl', function($scope, myService) {
    var a= 10;
    var b= 20;

    $scope.sum = myService.add(a, b);
});

Angular 依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，
在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，
并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

一句话 — 没事你不要来找我，有事我会去找你。

Angular 提供了5个核心组件作为依赖注入

value 简单值注入，可以是Javascript对象
factory 工厂注入，在service和controller需要时创建
service 服务注入，在controller中引入
provider 可以创建factory和service
constant 常量注入，定义一些常量值使用

总结

Angular的双向绑定使用非常方便，整体框架的MVC结构很清晰，
但是成也萧何败也萧何，脏值检测和渲染机制的复杂也使得在大量数据处理时造成页面卡顿，性能方面还有待改善。

bestvist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS

AngularJS 是一个 JavaScript 框架，它是一个以 JavaScript 编写的库。原文链接Angular 简介AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素”背后”添加代码。AngularJS 支持输入验
复制链接

扫一扫