您的位置：首页 > Web前端 > AngularJS

Angularjs的核心概念

2015-10-08 21:04 711 查看

1. 客户端模板
多页面的应用通过组装和拼接服务器上的数据来生成HTML，然后输出到浏览器。Angularjs不同于此的是，传递模板和数据到浏览器，然后在浏览器端进行组装。浏览器的角色编程了只提供模板的静态资源和模板所需要的数据。

<html ng-app>

<head>

<script src="angular.js"></script>

<script src="controllers.js"></script>

</head>

<body>

<div ng-controller='HelloController'>

<p>{{greeting.text}}, World</p>

</div>

</body>

</html>

2. 模型视图控制器(MVC)
MVC的核心概念是，在代码之间明确分离管理数据（模型），应程序逻辑（控制器），并将数据呈现给用户（视图）。在Angular应用中，视图就是DOM，控制器就是Javascript类，模型数据存储在对象属性中。

3. 数据绑定
典型的DOM操作，都是先将数据处理完毕之后，再通过元素上设置innerHTML将结果插入到所要的DOM中。这样的工作重复性很高，还要确保界面和javascript属性中获取到数据时正确的状态。
而Angular中包括这中功能，仅仅声明界面的某一部分银蛇到Javascript的属性，让它们自动完成同步。

<html ng-app>

<head>

<script src="angular.js"></script>

<script src="controllers.js"></script>

</head>

<body>

<div ng-controller='HelloController'>

<input ng-model='greeting.text'>

<p>{{greeting.text}}, World</p>

</div>

</body>

</html>

4. 依赖注入
$scope对象吧数据绑定自动通过HelloController构造函数传递给开发者，$scope并不是我们唯一需要的，还可以添加一个$location对象

function HelloController($scope, $location) {

$scope.greeting = { text: 'Hello' };

// use $location for something good here...

}

5. 指令
Angular包括一个强大的DOM转换引擎，使得开发者有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。
Angular包含很多标识符来定义视图，这些标识符可以定义常见的视图作为模板。除此之外，开发者还可以编写自己的标识符来扩展HTML模板。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航