初识Angular JS

最新推荐文章于 2023-12-05 14:02:54 发布

原创最新推荐文章于 2023-12-05 14:02:54 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

2 篇文章

订阅专栏

Angularjs 有以下几个关键的特性：

MVC
数据双向绑定
依赖注入
指令

MVC

MVC 大家应该都比较熟悉了，M即模型model，V即视图view，C即控制器controller。这背后的核心理念是：

把管理数据的代码（model），应用逻辑代码（controller），以及向用户展示数据的代码（view）清晰的分离开。

在 Angular 应用中，视图就是 Document Object Model (DOM，文档对象模型)，控制器就是 javascript 类，而模型数据则被存储在对象的属性中。

如以下简单的 App，
视图代码：

<!DOCTYPE html>
<html ng-app="firstApp">

<head>
  <meta charset="utf-8" />
  <title>first app</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input ng-model="name">
  <p>Hello {{name}}!</p>
</body>

</html>

控制层：

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

模型层：
即控制器里的 $scope.name即 name 便是模型，这只是一个简单的模型。
Angular 中有一个插件 js-data，可以为每一个对象定义一个相应的 factory，就像 java 中得持久层对象一样。然后可以进行注入，并可以进行数据的获取。

数据双向绑定

Angular实现了双向绑定机制。所谓的双向绑定，是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。

一个最简单的示例就是这样：

<body ng-controller="MainCtrl">
  <label>名称：</label>
  <input ng-model="name" name="name" id="name">
  <p>Hello {{name}}!</p>
</body>

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

这个实例便是在名称的输入框中，无论输入什么，下面的 p 标签便会动态的显示输入的内容。

依赖注入

依赖注入是一种软件设计模式，用来处理代码的依赖关系。
简单说说依赖注入
一般来说有三种方法让函数获得它的需要的依赖：

它的依赖是能被创建的，一般用new操作符就行
能够通过全局变量查找依赖
依赖能在需要时被导入

前两种方式都不是很好，因为它们需要对依赖硬编码，使得修改依赖的时候变得困难。特别是在测试的时候不好办，因为对某个部分进行孤立的测试常常需要模拟它的依赖。
第三种方式是最好的，因为它不必在组件中去主动需找和获取依赖，而是由外界将依赖传入。

function helloCtrl($scope) { 
  var vm = $scope;
}

如上例所示，只需要把 $scope 对象放在 helloCtrl 的构造函数里面，然后就可以后去它。
其他的 angular 的 service 如：$location，$http，$local 等也是可以通过放在构造函数里获得。同时，你自定义的 service、factory，也可以通过依赖注入获得。

指令

指令是所有AngularJS 应用最重要的部分。指令是DOM元素上的标记，使元素拥有特定的行为。Angularjs 内置了一些指令，比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat 重复特定的元素，ng-show 有条件地显示一个元素。

你可以通过自定义一个指令，来实现自己想要达到的效果。例如你想让一个元素支持拖拽，你可以创建一个指令来实现它；你也可以创建一个指令显示时间选择器。

指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。这个功能让我们可以创建更多有价值的插件进行开源共享，也可以解决项目中代码冗余的情况。