Angular框架
<h1 id="angular介绍">Angular介绍</h1><h2 id="库和框架的区别">库和框架的区别</h2>
<ul>
<li>jQuery：库
<ul>
<li>库一般都是封装了一些常用的方法</li>
<li>自己手动去调用这些方法，来完成我们的功能<br data-filtered="filtered"><code>code $('#txt').val('我是小明'); $('div').text('xx');</code></li>
</ul>
</li>
<li>angular：框架
<ul>
<li>框架都是提供一种规范或者模式,</li>
<li>我们却要按照它提供的这种规则去写代码</li>
<li>框架会自动帮助我们去执行相应的代码.</li>
</ul>
</li>
<li><strong>其实可以简单的理解为：大而全的是框架，小而精的是库</strong></li>
</ul>
<h2 id="angularjs是什么">AngularJs是什么</h2>
<ul>
<li>百度百科http://baike.baidu.com/link?url=CKrQ1574lIOkgQ8-FBB1fxuEJzIf0Jscf2n53rxuVjK37wm0M4LupH--17Ix6towMSRoizil9Dk8mqhK4-PXGK</li>
<li>一款非常优秀的前端高级 JS 框架</li>
<li>最早由 Misko Hevery 等人创建</li>
<li>2009 年被 Google 公式收购，用于其多款产品</li>
<li>目前有一个全职的开发团队继续开发和维护这个库</li>
<li>其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。</li>
<li><strong>Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作</strong>
<ul>
<li>angular，几乎不会使用angualr操作dom（但是angular内部肯定是使用dom来改变页面的值）</li>
</ul>
</li>
<li>Angular 主要是来做什么的，帮助我们方便的去写spa应用程序</li>
</ul>
<h3 id="什么是angularjs">什么是AngularJS</h3>
<ul>
<li>一个前端框架，提供一种无DOM操作的编程方式，在前端页面中引入了传统在后台开发中使用的一些思想，增强代码的结构和可维护性</li>
<li>一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式</li>
<li>其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务</li>
<li>MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动</li>
</ul>
<h3 id="什么是-spa">什么是 SPA</h3>
<ul>
<li>single page application的缩写</li>
<li>单页应用程序</li>
<li>原理就是：通过监视hashchange事件，根据不同的url中的锚点值，去动态的发送ajax请求去请求数据（简单的说就是不会看到页面刷新）
<ul>
<li>网站实例：music.163.com</li>
</ul>
</li>
</ul>
<h3 id="spa的优点">SPA的优点</h3>
<ul>
<li>响应效果好，体验好</li>
<li>重用资源</li>
<li>方便统一控制和代码重用，不想访问应用了，在入口的控制一下就可以。</li>
</ul>
<h3 id="扩展如何获取url中的各部分参数比如hash">扩展：如何获取url中的各部分参数，比如hash</h3>
<ul>
<li>字符串操作</li>
<li>正则表达式去匹配url</li>
<li>创建a对象</li>
</ul>
<pre class="javascript"><code class="hljs"><span class="hljs-keyword">var a=<span class="hljs-built_in">document.createElement(<span class="hljs-string">'a');
a.hreg=<span class="hljs-string">'http://www.baidu.com?id=23#home';
a.pathname
a.hash
a.search</span></span></span></span></code></pre>
<h2 id="为什么要使用angular">为什么要使用Angular</h2>
<ul>
<li>总结一句话：为了更少的代码，实现更强劲的功能
<ul>
<li>很多操作都需要dom操作，但是angular中没有那么多的dom操作，这是因为angular帮我们封装了，减少了我们开发人员的dom操作</li>
<li>一般在angular中就不会出现jquery了，因为这两种思想正好是相悖的。</li>
</ul>
</li>
<li>上面的意义只是皮毛，它真正的意义是:angular又是一场革命，带领前端进入了MVX时代。
<ul>
<li>这就像从手工业转为机械工业一样，以前很多东西都是我么你自己手动去做，现在我们有了gulp，webpack这些自动化构建工具。</li>
</ul>
</li>
</ul>
<h1 id="angular的使用">Angular的使用</h1>
<h2 id="angular相关资料">Angular相关资料</h2>
<ul>
<li>AngularJS 1.x 官方网站
<ul>
<li>https://angularjs.org/</li>
</ul>
</li>
<li>AngularJS 2.x 官方网站
<ul>
<li>https://angular.io/</li>
</ul>
</li>
<li>Google Material Design for Angular
<ul>
<li>https://material.angularjs.org</li>
</ul>
</li>
<li>Angular UI（Angular最大的第三方社区）
<ul>
<li>http://angular-ui.github.io/</li>
</ul>
</li>
<li>AngularJS中文社区
<ul>
<li>http://www.angularjs.cn/</li>
</ul>
</li>
<li>AngularJS中文社区提供的文档（不用FQ）
<ul>
<li>http://docs.angularjs.cn/api</li>
<li>http://www.apjs.net/</li>
</ul>
</li>
</ul>
<h2 id="安装-angular">安装 Angular</h2>
<ul>
<li>暴力安装:
<ul>
<li>手动的去github下载安装</li>
</ul>
</li>
<li>通过工具安装:
<ul>
<li>npm : <code>npm install angular</code></li>
<li>bower: <code>bower install angular</code></li>
</ul>
</li>
<li>CDN</li>
<li><strong>本质都为了拿到angular.js这个文件。</strong></li>
</ul>
<h2 id="理解angular的整个开发流程">理解angular的整个开发流程</h2>
<ul>
<li>ng-app:告诉angular来管理页面的代码块是什么（ng-app所在元素及其子元素）</li>
<li>ng-click : 类比成onClick，是用来为当前元素注册点击事件的</li>
</ul>
<pre><code class="hljs dockerfile">ng-click=<span class="hljs-string">"val = (val-0) + 1"
相当于：
var <span class="hljs-keyword">add<span class="bash"> = document.getElementById(<span class="hljs-string">'add');
<span class="hljs-keyword">add.<span class="bash">addEventListener(<span class="hljs-string">'click',<span class="hljs-function"><span class="hljs-title">function(){
}</span></span></span></span></span></span></span></span></span></code></pre>
<ul>
<li>ng-model: 用来获取文本框的值,是于input的value值进行了绑定。
<ul>
<li>改变ng-model的属性值对应的值，文本框的值就会改变,</li>
</ul>
</li>
</ul>
<pre><code class="hljs dart">ng-model = <span class="hljs-string">"val";<span class="hljs-comment">//angular就会帮助我们去创建一个val变量
相当于:
<span class="hljs-keyword">var <span class="hljs-built_in">num = <span class="hljs-built_in">document.getElementById(<span class="hljs-string">'num').value;
</span></span></span></span></span></span></code></pre>
<ul>
<li>ng-init 指令: 用于对ng-model指定的值进行初始化操作</li>
</ul>
<pre><code class="hljs ini"><span class="hljs-attr">ng-init = <span class="hljs-string">"val = 10"</span></span></code></pre>
<ul>
<li>
<p>ng-controller：我们的业务逻辑，数据模型都要写在这里面</p>
</li>
<li>
<p>$scope:这个就相当于我们所画的途中的数据模型， 在它上面给以挂载变量和方法。</p>
</li>
<li>表达式: {{}}，相当于模板函数中的模板输出
<ul>
<li>在大括号内部写上一个ng-model对应的文本框的值</li>
</ul>
</li>
</ul>
<h2 id="使用angularjs的流程">使用AngularJS的流程</h2>
<ol>
<li>借助npm下载到本地</li>
<li>在HTML代码中引入Angular.js包</li>
<li>在JS代码中通过<code>angular.module('myApp', [])</code>注册一个模块</li>
<li>在HTML代码中将刚刚定义的模块通过<code>ng-app="myApp"</code>指令的方式作用到一个特定的元素上</li>
<li>根据当前页面的情况（业务块）划分控制器</li>
<li>在HTML代码中将刚刚定义的控制器通过<code>ng-controller="ControllerName"</code>作用到特定的元素上</li>
<li>建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）</li>
<li>在JS代码中通过<code>$scope</code>暴露需要提供到页面的数据成员</li>
<li>在HTML代码中将刚刚暴露出来的数据通过类似<code>ng-model/{{}}/ng-click</code>之类的指令绑定到特定的元素上</li>
<li>在JS中完成业务逻辑（还可以展开）</li>
</ol>
<ul>
<li>在思想上：
<ul>
<li>JQ提高了操作DOM的开发效率</li>
<li>NG几乎没有任何DOM操作（不是没有，只是不用我们自己操作）</li>
<li>NG内置一个类似JQ的东西<code>angular.element()</code></li>
<li>Angular 不提倡DOM操作，如果必须使用DOM的话，也不建议再去引用jquery，有内置</li>
</ul>
</li>
</ul>
<h2 id="如何查看angular离线文档">如何查看angular离线文档</h2>
<ol>
<li>angular文档设计的非常好都是一个功能一个功能的js分开的，主模块有1000多kb,这个应该是大家见过的最大的js库了</li>
<li>因为angularJS的文档需要引用angularjs的东西，所以要用http-server模块打开的话，必须在文档的根目录启动hs -o</li>
</ol>
<h1 id="angular-核心概念">Angular 核心概念</h1>
<ul>
<li>模块化</li>
<li>MVC - 思想</li>
<li>指令</li>
<li>双向数据绑定</li>
</ul>
<h2 id="angular.module模块">angular.module（模块）</h2>
<h3 id="作用">作用</h3>
<ul>
<li>通过模块对页面进行业务上的划分</li>
<li>将重复使用的指令或者过滤器之类的代码做成模块，方便复用</li>
<li>注意必须指定第二个参数，否则变成找到已经定义的模块
<ul>
<li>请参照资料-备课代码-06-module.html理解</li>
</ul>
</li>
</ul>
<h3 id="语法">语法</h3>
<ul>
<li>根据不同的功能划分不同的模块。</li>
<li>创建一个模块</li>
<li>语法： <code>angular.module('模块名',[])</code>
<ul>
<li>第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块</li>
<li>注意: 即便我们不依赖其他的模块，也需要传递一个空数组<br data-filtered="filtered">因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象</li>
<li><code>angular.module('myApp')</code>,是获取一个名为myApp的模块对象。</li>
<li>我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:</li>
<li>告诉anuglar,现在由我们自己创建的这个模块来管理页面。</li>
</ul>
</li>
</ul>
<h2 id="angular.controller控制器">angular.controller（控制器）</h2>
<h3 id="作用-1">作用</h3>
<ul>
<li>为应用中的模型设置初始状态</li>
<li>通过$scope对象把数据模型或者函数行为暴露给视图</li>
<li>监视模型的变化，做出相应的动作
<ul>
<li>请参照资料-备课代码-08-reg2.html理解</li>
</ul>
</li>
</ul>
<h3 id="语法-1">语法</h3>
<ul>
<li>控制器是通过模块对象来创建的:
<ul>
<li>
<p>语法:<br data-filtered="filtered"><code>var app = angular.module('模块名',[])</code><br data-filtered="filtered"><code>app.controller('控制器的名字',function($scope){ // 在这个function里写我们具体想要执行的代码 // $scope 就是用来存储我们的数据模型. })</code></p>
</li>
<li>
<p>我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是我们创建的控制器名字。</p>
</li>
</ul>
</li>
</ul>
<h2 id="双向数据绑定双向数据绑定">双向数据绑定(双向数据绑定)</h2>
<ul>
<li>页面文本框的值改变，导致数据模型的值发生改变，</li>
<li>数据模型的值的改变，反过来导致页面文本框的值的改变，这种相互影响的关系，我们起了个名词，叫作双向数据绑定。</li>
<li>ng-model = ""</li>
</ul>
<h2 id="单向数据绑定">单向数据绑定</h2>
<ul>
<ul>
<li>只能一数据模型的值改变，导致页面值的改变;</li>
</ul>
</ul><br><br>
来源：https://www.cnblogs.com/xiewangfei123/p/12079202.html
頁:
[1]