首页 > Web开发 > 详细

AngularJS基础入门初探

时间:2016-01-05 06:49:46      阅读:358      评论:0      收藏:0      [点我收藏+]

一、AngularJS简介

1.1 什么是AngularJS

技术分享

  (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式

  (2)由Misko Hevery 等人创建,2009年被Google所收购,用于其多款产品

  (3)Google目前有一个全职的开发团队继续开发和维护这个库

  (4)有了这一类框架就可以轻松构建SPA单页应用程序

  (5)通过指令扩展了HTML,通过表达式绑定数据到HTML,轻松实现双向绑定

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

  1. 首先,最大的好处是用户体验,对于内容的改动不需要加载整个页面。这样做好处颇多,因为数据层和UI的分离,可以重新编写一个原生的移动设备应用程序而不用(对原有数据服务部分)大动干戈。
  2. 单页面Web应用层程序最根本的优点是高效。它对服务器压力很小,消耗更少的带宽,能够与面向服务的架构更好地结合。

1.2 AngularJS有哪些特性

  (1)MVC,MVVM

  (2)模块化

  (3)自动化双向数据绑定

  (4)指令系统(非侵入式API)

二、第一个AngularJS程序

2.1 下载AngularJS

技术分享

  方式一:NPM(npm install angular)

  方式二:下载angular.js包(https://github.com/angular/angular.js/releases

  方式三:使用CDN上的angular.js(http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js)

  这里我们使用方式三,CDN方式。

2.2 体验双向数据绑定

  新建一个HTML页,输入一下内容:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello Angular</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="main" ng-app ng-init="name=‘World‘">
        <p>Your name:<input type="text" ng-model="name" /></p>
        <p>Hello {{name}}!</p>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

  (1)ng-app指令标记当前元素将作为一个模块被Angular代管理。

  (2)文本输入指令<input ng-model="name" />绑定到一个叫name的模型变量。

  (3)双大括号标记将name模型变量添加到问候语文本。

  运行该HTML页,可以发现,当我们在textbox中输入什么,问候语中都会及时进行绑定:

技术分享

三、第二个AngularJS程序

3.1 以前我们是这样写的

  假如我们有一个页面需要计算用户填写的数字*2的结果是多少,我们可能会有一个HTML界面和JavaScript代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Use JavaScript</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main
        {
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="main">
        <input type="text" id="value" />
        <input type="button" value="*2" id="btn" />
    </div>
    <script type="text/javascript">
        (function(window) {
            // 利用querySelector找到界面上的按钮dom元素并增加事件监视器
            window.document.querySelector(#btn).addEventListener(click, function() {
                // 获取DOM元素
                var input = window.document.querySelector(#value);
                // 获取填写数值
                var value = input.value;
                // 执行业务操作
                value = value - 0;
                value = value * 2;
                // 设置显示结果
                input.value = value;
            });
        })(window);
    </script>
</body>
</html>

  运行结果如下图所示:

技术分享

3.2 现在我们可以这样写

  

三、开发一个任务清单程序

3.1 需求说明

3.2 开发实现

 

AngularJS基础入门初探

原文:http://www.cnblogs.com/edisonchou/p/5100735.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!