angularjs旨在减轻使用AJAX开发应用程序的复杂度，使得程序的创建、测试、扩展和维护变得容易。下面是angularjs中的一些核心概念。
1. 客户端模板 多页面的应用通过组装和拼接服务器上的数据来生成HTML，然后输出到浏览器。Angularjs不同于此的是，传递模板和数据到浏览器，然后在浏览器端进行组装。浏览器的角色编程了只提供模板的静态资源和模板所需要的数据。

hello.html {{greeting.text}}, World

controllers.js function HelloController($scope) {$scope.greeting = { text: 'Hello' }; }

2. 模型  视图  控制器(MVC) MVC的核心概念是，在代码之间明确分离管理数据（模型），应程序逻辑（控制器），并将数据呈现给用户（视图）。在Angular应用中，视图就是DOM，控制器就是Javascript类，模型数据存储在对象属性中。
3. 数据绑定 典型的DOM操作，都是先将数据处理完毕之后，再通过元素上设置innerHTML将结果插入到所要的DOM中。这样的工作重复性很高，还要确保界面和javascript属性中获取到数据时正确的状态。 而Angular中包括这中功能，仅仅声明界面的某一部分银蛇到Javascript的属性，让它们自动完成同步。

{{greeting.text}}, World

controllers.js function HelloController($scope) {$scope.greeting = { text: 'Hello' }; }

input的值（用户的输入）与greeting.text绑定在一起，并及时呈现在

中。绑定是双向的，也可用通过设置$scope.greeting.text的值，并自动同步到输入框和双大括号（{{}}）中
4. 依赖注入 $scope对象吧数据绑定自动通过HelloController构造函数传递给开发者，$scope并不是我们唯一需要的，还可以添加一个$location对象，如：

function HelloController($scope, $location) { $scope.greeting = { text: 'Hello' }; // use $location for something good here... }

通过Angular的依赖注入系统，我们能够遵循迪米特法则（最少知识原则），只关注我们最需要的部分。
5. 指令 Angular包括一个强大的DOM转换引擎，使得开发者有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。 Angular包含很多标识符来定义视图，这些标识符可以定义常见的视图作为模板。除此之外，开发者还可以编写自己的标识符来扩展HTML模板。
购物车示例：

Your Order Remove

ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在上    Javascript类叫做控制器，它可以管理相应页面区域中的任何东西。    ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM，同时设置item作为当前元素，并可在模板中使用它。 {{item.title}}    表达式{{item.title}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中    ng-model定义输入字段和item.quantity之间的数据绑定 {{item.price | currency}} {{item.price * item.quantity | currency}}     单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。 Remove    通过ng-repeat的迭代顺序$index，移除数据和相应的DOM（双向绑定特性） function CartController($scope) {    CartController 管理这购物车的逻辑，$scope 就是用来把数据绑定到界面上的元素 $scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ];    通过定义$scope.items，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也需要通知服务器端持久化数据。 $scope.remove = function(index) {$scope.items.splice(index, 1);};    remove()函数能够绑定到界面上，因此我们也把它增加到$scope 中

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！