初识AngularJS

最新推荐文章于 2020-07-26 14:17:58 发布

未来畅想--娜

最新推荐文章于 2020-07-26 14:17:58 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

分类专栏：【java基础】文章标签： angular

本文链接：https://blog.youkuaiyun.com/wangnayu/article/details/51288066

【java基础】专栏收录该内容

2 篇文章

订阅专栏

最近接触课表的APP，便结识了AngularJS.

概念

AngularJS在Web应用方面是一个非常完美的JavaScript MVC框架。
AngularJS完全由JavaScript和HTML构成，AngularJS框架的核心概念是MVC架构模式。

MVC

对于MVC我们已经很熟悉了，在Angular应用中，视图层就是DOM，控制器就是JavaScript类，模型数据存储在对象属性中。

数据绑定

当程序运行的相当好是，我们想将新数据插入到界面中，或者改变基于用户输入的数据是，我们可以通过数据绑定来确保同时在界面和JavaScript属性中获取的数据是正确的状态。

依赖注入

依赖注入是当我们需要某个具体的控制器或者服务时，并不直接在代码中用new操作符创建实例，而是发送请求以获取它所有的依赖关系。

指令

AngularJS 通过被称为指令的新属性来扩展 HTML。

示例

<!DOCTYPE html>
<html ng-app>
    <head>
        <base/>
        <title>Your Shopping Cart</title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-controller='CartController'>
        <h1>Your Order</h1>
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'/>
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
            <button ng-click="remove($index)"> Remove </button>
        </div>
        <script>
        function CartController($scope) {
        ////@formatter:off
            $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
            }];
            ////@formatter:on
            $scope.remove = function(index) {
            $scope.items.splice(index, 1);
            };
        }
        </script>
    </body>
</html>

ng-app 属性告诉 Angular 它应该管理页面的哪一部分。由于我们把它放在 html 元素上，
告知 Angular 管理整个页面。

在 Angular 中，用 JavaScript 类管理的页面区域叫做控制器。通过在 body 标签中包含一个控制器，声明的 CartController 将管理 body 标签之间的任何东西。

ng-model 定义创建了输入字段和 item.quantity 之间的数据绑定。