AngularJS遇到的第一个坑

最新推荐文章于 2024-06-23 17:16:57 发布

zxc123e

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量1.1w

点赞数 1

分类专栏： Angular 文章标签： AngularJS

本文链接：https://blog.csdn.net/zxc123e/article/details/50524891

版权

Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。无需进行手工DOM操作,兼容主流浏览器，与 jQuery 配合良好。
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定使得代码更少，你可以专注于你的应用。
并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。
如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

一、Hello World!

AngularJS使用双大括号{{}}语法进行数据绑定；

<html ng-app>
 <head>
    <!-- <script src="https://code.angularjs.org/1.4.8/angular.js"></script> -->
    <script src="https://code.angularjs.org/1.2.8/angular.js"></script>
    <script >
    function FirstCtrl($scope){
        $scope.data = {message: "World"};
    } 
    </script>
 </head>

 <body>
    <p ng-controller="FirstCtrl">Hello {{data.message}}!</p>
 </body>
</html>

现在让我们仔细看看代码，当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用，然后加载了angular.js,然后声明了一个全局的控制器FirstCtrl（js函数），可以看到在p标签中声明了这个控制器,紧接着使用{{}}表达式绑定数据。
注意：当我们引用AngularJS的1.4.8版本，也就是上面注释的一行，我们的代码会报下面的异常
Argument ‘FirstCtrl’ is not a function, got undefined；
到这里郁闷了一下，心中猜想应该是版本的原因，然后网上搜了一圈，果不其然：
因为从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller！那么如何新版本如何解决这个问题呢，继续往下看。

二、AngularJS Scope(作用域)

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

上面的示例中，只有一个作用域 scope，处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
根作用域：所有的应用都有一个 rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

三、AngularJS指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， myselfDirective, 但在使用它时需要以 - 分割, myself-directive:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-app="myApp">

<myself-directive></myself-directive>

<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
    return {
        template : "<p>自定义指令!</p>"
    };
});
</script>

</body>
</html>

你可以通过元素名、属性、类名、注释来调用自定义指令。也可以限制你的指令只能通过特定的方式来调用。

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<myself-directive></myself-directive>

<div myself-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>

</body>
</html>

restrict 值可以是以下几种:

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

四、AngularJS事件

下面的例子演示了angularjs配合checkbox,button的一些动作。
这里写图片描述

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <!-- <script src="https://code.angularjs.org/1.2.8/angular.js"></script> -->
    <script >
    //module第一个String参数是该模块的名字，第二个参数是所依赖的模块（这里暂时用不着），返回了myApp这个模块.
    angular.module('myApp', []).controller('CostCtrl',CostCtrl).controller("FirstCtrl", FirstCtrl);
    function FirstCtrl($scope){
        $scope.data = {message: "World"};
    } 
    function CostCtrl($scope)
    {
        $scope.cost = 1000;
        $scope.tax = true;
        $scope.$watch("cost", function(){
            $scope.bill_tax = $scope.cost*0.15;
        });
        $scope.$watch("tax", function(){
            $scope.bill_display = $scope.tax?"block":"none";
        });
        $scope.add = function()
        {
            alert('hello');
        }
    }
    </script>

    </head>

    <body  >
        <p ng-controller="FirstCtrl">Hello {{data.message}}!</p>
        <div ng-controller="CostCtrl"><input type="checkbox" ng-model="tax"/><span>tax</span>
        <input placeHolder="cost" ng-model="cost">
        <p>the money is {{cost|currency:"￥"}}</p><!-- angular过滤器 -->
        <div style="display:{{bill_display}}"><p>tax is {{bill_tax}}</p><button ng-click="add()">add</button</div>
        </div>
    </body>
</html>

ng-click指定button的点击事件。

zxc123e

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS遇到的第一个坑

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。无需进行手工DOM操作,兼容主流浏览器，与 jQuery 配合良好。并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用Angu
复制链接

扫一扫

专栏目录