Angularjs——初识AngularJS
<h1 id="angularjs初识angularjs">AngularJS——初识AngularJS</h1><h2 id="angularjs是什么">AngularJS是什么</h2>
<p>AngularJS是Google开源的一款前端JS结构化框架，它通过对前端开发进行分层，极好地规范了前端开发的风格——它将前端开发分为Controller层、Service层、DAO层和Model层。其中，Model对象与HTML页面（视图）上HTML元素进行双向绑定，开发者可通过Controller调用Service、DAO与后端交互，获取后端数据之后，只要修改其中Model对象的值，视图页面也会随之动态改变。这个设计架构层次非常清晰，而且具有一定的“强制性”，整个前端团队一旦采用AngularJS框架，那么整个前端开发风格会变得简单、清晰，所有团队成员都能采用一致的开发风格，这也是AngularJS的魅力所在。</p>
<h2 id="angularjs创始人的自述">AngularJS创始人的自述</h2>
<p>“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。”</p>
<h2 id="angularjs特性优点">AngularJS特性(优点)</h2>
<ul>
<li>双向数据绑定；</li>
<li>声明式依赖注入；</li>
<li>解耦应用逻辑、数据模型和视图；</li>
<li>完善的页面指令；</li>
<li>定制表单验证；</li>
<li>Ajax封装。</li>
</ul>
<h2 id="与jquery的比较">与jQuery的比较</h2>
<p>jQuery</p>
<ul>
<li>JS函数库；</li>
<li>封装简化DOM操作。</li>
</ul>
<p>AngularJS</p>
<ul>
<li>JS结构化框架；</li>
<li>主体不再是DOM，而是页面中的动态数据。</li>
</ul>
<h2 id="angularjs的应用">AngularJS的应用</h2>
<p>构建单页面（single page application，SPA）Web应用或Web APP应用。</p>
<h3 id="单页面应用single-page-application">单页面应用（single page application）</h3>
<h4 id="定义">定义</h4>
<p>将所有的活动局限于一个页面，浏览器一开始就加载网页所有内容，当页面中有部分数据发生了变化，不会刷新整个页面，而是局部刷新（利用的Ajax技术）。</p>
<h4 id="优点">优点</h4>
<ul>
<li>用户体验好，内容的改变不需要重新加载整个页面；</li>
<li>适合前后端分离开发，服务器只出数据，减轻了服务器压力。</li>
</ul>
<h4 id="缺点">缺点</h4>
<ul>
<li>首屏加载速度慢；</li>
<li>不利于SEO优化。</li>
</ul>
<h2 id="angularjs的组成">AngularJS的组成</h2>
<ul>
<li>ng-app : 该指令用于设置AngularJS应用。例如为＜body.../＞元素增加了ng-app属性，这意味着所有AngularJS应用处于＜body.../＞元素内。在＜body.../＞元素内可使用其他AngularJS指令，也可使用{{}}来输出表达式。</li>
<li>ng-model : 该指令用于执行“双向绑定”，所谓双向绑定指的是将HTML输入元素的值与AngularJS应用的某个变量进行绑定。完成“双向绑定”之后，当HTML输入元素的值发生改变时，AngularJS应用中绑定的变量的值也会随之改变；反过来，当程序修改AngularJS应用的变量的值时，HTML输入元素的值也会随之改变。</li>
<li>ng-bind : 该指令用于绑定ng-model的数据。</li>
</ul>
<h2 id="下载angularjs">下载AngularJS</h2>
<p>AngularJS也是一个纯粹的JavaScript库，下载AngularJS与下载其它JavaScript库一样，打开链接后，选中相应的版本下载即可。下载链接</p>
<h3 id="注意">注意</h3>
<ul>
<li>AngularJS是AngularJS 1.X，并不是Angular 2.X（Angular 2没有JS后缀）；</li>
<li>AngularJS 1.X是真正轻量级JavaScript框架，比较适合熟悉JavaScript的前端开发者；</li>
<li>Angular 2.X使用的是TypeScript脚本，其开发高度依赖Node.js。</li>
</ul>
<h3 id="版本选择">版本选择</h3>
<ul>
<li><strong>angular.min.js</strong>：该版本是去除注释后的AngularJS库，文件体积较小，开发实际项目时推荐使用该版本。</li>
<li><strong>angular.js</strong>：该版本的AngularJS库没有压缩，而且保留了注释。学习AngularJS及有兴趣研究AngularJS源代码的读者可以使用该版本。</li>
<li><strong>angular-xxx.min.js</strong>：AngularJS为特定功能提供的支持库。比如angular-animate.min.js就是AngularJS的动画支持库；angular-cookies.min.js就是AngularJS的Cookie访问支持库。</li>
<li><strong>angular-xxx.js</strong>：与对应的angular-xxx-min.js库的功能相同，只是保留了注释，没有压缩。</li>
</ul>
<h2 id="安装angularjs">安装AngularJS</h2>
<p>AngularJS库的安装很简单，只要在HTML页面中导入AngularJS的JavaScript文件即可。</p>
<pre><code><script type="text/javascript" src="angular.min.js"></script>
</code></pre>
<p>其中，src 属性为待导入的AngularJS文件。</p>
<h2 id="第一个angularjs应用">第一个AngularJS应用</h2>
<pre><code><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<script src="../../js/angular-1.2.29/angular.js"></script>
<title>第一个程序</title>
</head>
<body ng-app>
<input type="text" ng-model="mymodel" />
<p>您输入的内容是：<span>{{mymodel}}</span></p>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/best-doraemon/p/17049295.html
頁:
[1]