3天学习完AngularJS基础内容小结

简介:AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

一、AngularJS大致功能模块

二、页面交互变得简单

1、示例:计算价格

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body>
    <div ng-app="" ng-init="quantity=1;price=5">
        <h2>价格计算器</h2>

        数量: <input type="number" ng-model="quantity">
        价格: <input type="number" ng-model="price">
        <p><b>总价:</b> {{ quantity * price }}</p>
    </div>
</body>
</html>

效果:

我感觉都没写js代码,就完成了一个计算逻辑!

2、示例:表单值不需要写js代码来获取json值

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="formCtrl">
        <form novalidate>
            First Name:<br>
            <input type="text" ng-model="user.firstName"><br>
            Last Name:<br>
            <input type="text" ng-model="user.lastName">
            <br><br>
            <button ng-click="reset()">RESET</button>
        </form>
        <p>表单值 = {{user}}</p>
        <p>初始值 = {{inituser}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function ($scope) {
            $scope.inituser = { firstName: "John", lastName: "Doe" };
            $scope.reset = function () {
                $scope.user = angular.copy($scope.inituser);
            };
            $scope.reset();
        });
    </script>
</body>
</html>

效果:

页面输入值改变,不需要重新取值,比如使用jquery,不使用angular,则需要这样取值:

var json={};
json.firstName=$("#firstName").val();
json.lastName=$("#lastName").val();

现在这样简单是方便了不止一点!

2、示例:绑定事件让代码变得更容易维护

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">
    <h2>我的笔记</h2>
    <textarea ng-model="message" cols="40" rows="10"></textarea>
    <p>
        <button ng-click="save()">保存</button>
        <button ng-click="clear()">清除</button>
    </p>

    <p>剩余字数: <span ng-bind="left()"></span></p>
    <script>
        var app = angular.module("myNoteApp", []);
        app.controller("myNoteCtrl", function ($scope) {
            $scope.message = "";
            $scope.left = function () { return 100 - $scope.message.length; };
            $scope.clear = function () { $scope.message = ""; };
            $scope.save = function () { alert("Note Saved"); };
        });
    </script>
</body>
</html>

效果:

这里的message字数改变,会触发修改剩余字数提示。
未使用angular时,我们会把这样改变绑定在message的change事件上,这样,要查剩余字数的代码,必须要想到是message的事件,类似这样:

$("#message").change(function({
    $("#leftwordcount").text(left());
});

现在是查到剩余字数对应span的ng-bind事件,就能知道是哪里实现了这个逻辑,更容易找到实现方法从而更加易于维护这种实现。

三、其他总结

比如我学习到angular的http部分,语法更加简单,只要传重要的参数就行,不用jquery http那么多选项,对于简单的数据请求更加易于使用:

$http.get(‘/someUrl’, config).then(successCallback, errorCallback);

$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);

当然,也可能是有些方法封装好了,参数减少,同时也不适用于复杂场景的处理,我觉得angular结合其他js框架的使用,才能达到一个相对完美的状态吧,一个框架肯定是不能满足所有使用需求的。不过多了解一个框架,就可能会在需要它的时候想起来用它。

附angular基础内容学习网址:http://www.runoob.com/angularjs/angularjs-tutorial.html

时间: 2024-11-18 17:59:17

3天学习完AngularJS基础内容小结的相关文章

学习nodejs部分基础内容入门小结

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的包管理器 npm,是全球最大的开源库生态系统. 安装.简易教程:http://www.runoob.com/nodejs/nodejs-tutorial.html 官方文档:http://nodejs.cn/api/ 一.nodejs大致功能模块 二.部分用法示例 1.简单重要的使用命令 使用淘宝 NPM 镜像

dsd酸-学习完 c语言 基础 怎么去 进阶 学习什么

问题描述 学习完 c语言 基础 怎么去 进阶 学习什么 学习完 c语言 基础 怎么去 进阶 学习什么 介绍一些书 来看看 解决方案 c++哥们,有了基础想学啥都行,主要看兴趣哦. 解决方案二: <C陷阱和缺陷>,<C和指针>.<必知的C语言495个问题>.<C标准库>.<C语言深度解剖>.<C程序设计语言>.<C专家编程>.<C语言程序设计现代方法>.<C语言详解>.<C语言核心技术>.

学习网页制作基础入门教程(2)排版标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 文字上的分隔标签 1. 使用方法:强制断行标签<BR> .强制分段标签<P> 2. 标签解说:我们在写文章时,有时候在特定的地方会强迫断行(<BR> ),或是在写完某一段的时候便会分段(<P>),制作网页也一样,而且更需要断行及分段的功能,以免整个网页看起来乱糟糟的. 3. 使用范例: 原始代码 显示结果  这是一个断行的例子 <BR> 看出来了吗?网页教学网 这是一个断行

Dos常用基础命令小结

Dos常用基础命令小结,都是一些常用的命令,对于想学习dos的朋友可以参考下   一.基础命令 1 dir 无参数:查看当前所在目录的文件和文件夹. /s:查看当前目录已经其所有子目录的文件和文件夹. /a:查看包括隐含文件的所有文件. /ah:只显示出隐含文件. /w:以紧凑方式(一行显示5个文件)显示文件和文件夹. /p:以分页方式(显示一页之后会自动暂停)显示. |more:前面那个符号是""上面的那个,叫做重定向符号,就是把一个 命令的结果输出为另外一个命令的参数.more也是

学习网页制作基础入门教程(8)框架标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 框架概念 1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些. 我们可以看见,右边的这个图片,一共分为 1 . 2 . 3 三个框架,每一个框架,各有

学习网页制作基础入门教程(7)表格标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 表格单元格对齐位置设定 1. 首先我们来看一个最简单的表格: 原始代码 显示结果 <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE&g

学习网页制作基础入门教程(6)连接标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 网页内部的连接 1. 使用方法: 先在欲连接处作记号:<A NAME="here"> 这里是你想连接的点 </A> 设定连接:<A HREF="#here"> 连接 </A> 2. 标签解

ps新手教程之学习图层的基础知识-玩转ps的图层操作技巧

  ps新手教程之学习图层的基础知识-玩转ps的图层操作技巧,艺术家使用ps,摄影师使用ps,数码玩家们也使用ps,与此同时,web设计湿更是离不开PS !该软件气势空前鼎盛,无人不知无人不晓.图层面板是自由独立于ps工作空间里面的一个面板.在这个神奇的图层里面,我们可以缩放.更改颜色.设置样式.改变透明度,等等等等.一个图层代表了一个单独的元素,设计师可以任意更改之.图层可以说在网页设计中起着至关重要的作用.他们用来表示网页设计的元素,他们是用来显示文本框.图像.背景.内容和更多其他元素的基底

AngularJS基础 ng-if 指令用法_AngularJS

AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!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> <b