AngularJs基础

<h2 id="t0AngularJs核心特性">AngularJs核心特性</h2>
<ol>
<li>MVVM 双向数据绑定(Model-View-ViewModel)model变化，view也变化</li>
<li>模版 将html文件解析到DOM中</li>
<li>模块化与依赖注入</li>
<li>指令可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。</li>
</ol>
<h2 id="t11.AngularJs的使用">1.AngularJs的使用</h2>
<h3 id="t21.1 安装angular">1.1 安装angular</h3>
<h4 id="t31.1.1 通过npm进行下载">1.1.1 通过npm进行下载</h4>
<pre><code class="lang-javascript">$ npm install angular
</code></pre>
<h4 id="t41.1.2 使用bower下载">1.1.2 使用bower下载</h4>
<pre><code class="lang-javascript">$ bower install angular
</code></pre>
<h3 id="t51.2 引入angularjs">1.2 引入angularjs</h3>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"node_modules/angular/angular.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<h3 id="t61.3 安装扩展程序ng-inspector">1.3 安装扩展程序ng-inspector</h3>
<h3 id="t71.4 启动angular程序">1.4 启动angular程序</h3>
在指定标签上添加跟作用域
<pre><code class="lang-javascript">ng-app(rootScope->ngapp)
</code></pre>
<blockquote>ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序</blockquote>
<h2 id="t82.初识ng-model">2.初识ng-model</h2>
在ng-app下的内容都归angular所管理
<h3 id="t92.1 数据模型的挂载">2.1 数据模型的挂载</h3>
将ng-model生成数据模型然后挂在当前作用域上
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"name"</span>></span>
</code></pre>
<h3 id="t102.2 实现model和view的双向绑定">2.2 实现model和view的双向绑定</h3>
变量和视图进行绑定，取出模型上的数据
<pre><code class="lang-html">{{name}}
</code></pre>
<h2 id="t113.表达式">3.表达式</h2>
<h3 id="t123.1 表达式的组成">3.1 表达式的组成</h3>
两个花括号{{}}组成，可以把数据绑定到HTML
<pre><code class="lang-html">{{name}}
</code></pre>
<h3 id="t133.2 表达式结果">3.2 表达式结果</h3>
用来做表达式结果
<pre><code class="lang-html">{{1+2*3}}
</code></pre>
<h3 id="t143.3 三元表达式">3.3 三元表达式</h3>
<pre><code class="lang-javascript">{{name?name:<span class="hljs-string">'hello zfpx'</span>}}
</code></pre>
<h2 id="t154.数据绑定">4.数据绑定</h2>
<h3 id="t164.1 ng-bind">4.1 ng-bind</h3>
显示数据等同于{{}}
<pre><code class="lang-javascript"><div ng-bind=<span class="hljs-string">"name"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></code></pre>
<blockquote>防止用户看到被渲染之前的样子</blockquote>
<h3 id="t174.2 ng-non-bindable">4.2 ng-non-bindable</h3>
取消绑定数据
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-non-bindable</span>></span>{{name}}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h3 id="t184.3 ng-bind-template">4.3 ng-bind-template</h3>
绑定多个模板
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-bind-template</span>=<span class="hljs-value">"{{name}} {{age}}"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<blockquote>解决 ng-bind 中只能绑定一个的问题</blockquote>
<h2 id="t195.初始化数据">5.初始化数据</h2>
<h3 id="t205.1 ng-init">5.1 ng-init</h3>
ng-init在当前作用域下定义初始值。
<pre><code class="lang-javascript"><div ng-init=<span class="hljs-string">"name='zfpx';age=7"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></code></pre>
<blockquote>多组值用分号;隔开</blockquote>
<h3 id="t215.2 赋值对象和数组">5.2 赋值对象和数组</h3>
<pre><code class="lang-javascript"><div ng-init=<span class="hljs-string">"name=[{age:7},{age:8}]"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></code></pre>
<blockquote>通常情况下,不使用 ng-init。使用一个控制器或模块来代替它。</blockquote>
<h2 id="t226.data-指令">6.data-指令</h2>
data-ng-init 与 ng-init 等价
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-init</span>=<span class="hljs-value">"name=[{age:7},{age:8}]"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"name=[{age:7},{age:8}]"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h2 id="t237.ng-repeat遍历">7.ng-repeat遍历</h2>
<h3 id="t247.1 遍历对象">7.1 遍历对象</h3>
初始化对象
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"phones={age:7,sex:2,name:'zfpx'}"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
遍历对象
<pre><code class="lang-diff"><div ng-init="phones={age:7,sex:2,name:'zfpx'}">
<span class="hljs-addition">+ <div ng-repeat="(key,value) in phones"></span>
<span class="hljs-addition">+ {{key}}{{value}}</span>
<span class="hljs-addition">+ </div></span>
</div>
</code></pre>
<h3 id="t257.2 遍历数组">7.2 遍历数组</h3>
初始化数组
<pre><code class="lang-javascript"><div ng-init=<span class="hljs-string">"phones=[{name:'苹果',age:7},{name:'华为',age:7},{name:'htc',age:7}]"</span>>
<span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></code></pre>
遍历数组
<pre><code class="lang-javascript"><div ng-repeat="(key,phone) in phones">
{{key}}{{phone.name}}
</div>
</code></pre>
<h3 id="t267.3 嵌套循环数组">7.3 嵌套循环数组</h3>
内部获取外部索引
方法1：
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"(key,phone) in phones"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"(index,type) in phone.type"</span>></span>
{{key}}{{index}}{{type}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
方法2：
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"phone in phones"</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"key=$index"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"type in phone.type"</span>></span>
{{key}}{{$index}}{{type}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<blockquote>遍历数组需注意track by $index</blockquote>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"phones=['苹果','苹果','苹果']"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"phone in phones track by $index"</span> ></span>
{{phone}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h2 id="t278.ng-click">8.ng-click</h2>
显示隐藏/效果
<h3 id="t288.1 增加样式">8.1 增加样式</h3>
<pre><code class="lang-css"><style>
.block{
display: block;
}
.none{
display: none;
}
</style>
</code></pre>
<h3 id="t298.2 增加ng-click">8.2 增加ng-click</h3>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"flag=false"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"flag=!flag"</span>></span>
{{!flag?'显示':'隐藏'}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">" {{flag?'block':'none'}}"</span>></span>content<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h2 id="t309.ng-hide/ng-show/ng-if">9.ng-hide/ng-show/ng-if</h2>
<h3 id="t319.1 ng-hide/ng-show">9.1 ng-hide/ng-show</h3>
简单的操作css样式
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"flag=false"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"flag=!flag"</span>></span>
{{!flag?'显示':'隐藏'}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-show</span>=<span class="hljs-value">"flag"</span>></span>content<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h3 id="t329.2 ng-if">9.2 ng-if</h3>
ng-if为false时候内部节点消失，内部指令不执行
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"flag=false"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"flag=!flag"</span>></span>
{{!flag?'显示':'隐藏'}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"flag"</span>></span>content<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<blockquote>ng-if不停的修改dom性能消耗较大,使用ng-show,ng-if与ng-repeat经常连用</blockquote>
<h3 id="t339.3 ng-switch">9.3 ng-switch</h3>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"sex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-switch</span>=<span class="hljs-value">"sex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">ng-switch-when</span>=<span class="hljs-value">"boy"</span>></span>boy<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">ng-switch-when</span>=<span class="hljs-value">"girl"</span>></span>girl<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">ng-switch-default</span>></span>no person<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h3 id="t349.4增加class值">9.4增加class值</h3>
<h4 id="t359.4.1 写法1:">9.4.1 写法1:</h4>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-class</span> =<span class="hljs-value">"{true:'red',false:'yellow'}[isActive]"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h4 id="t369.4.2 写法2:">9.4.2 写法2:</h4>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-class</span> =<span class="hljs-value">"{'selected':isSelected}"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h4 id="t379.4.3 行内样式">9.4.3 行内样式</h4>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-style</span> =<span class="hljs-value">"{color:'red'}"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h4 id="t389.4.4 class使用场景">9.4.4 class使用场景</h4>
bootstrap导航切换
<pre><code class="lang-javascript"><ul <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"nav nav-tabs"</span>>
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"click='Home'"</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{active:click=='Home'}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>></span>Home<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"click='Profile'"</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{active:click=='Profile'}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>></span>Profile<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"click='Messages'"</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{active:click=='Messages'}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>></span>Messages<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
</span></code></pre>
<h2 id="t3910.引入页面">10.引入页面</h2>
加载外部模板
<pre><code class="lang-javascript"><div ng-include=<span class="hljs-string">"'temp.html'"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></code></pre>
<h2 id="t4011.内置过滤器">11.内置过滤器</h2>
<h3 id="t4111.1 currency">11.1 currency</h3>
货币过滤器
<pre><code class="lang-html">{{100 | currency:'￡' }}
</code></pre>
<h3 id="t4211.2 lowercase & uppercase">11.2 lowercase & uppercase</h3>
大小写转换过滤器
<pre><code class="lang-html">{{'abc' | uppercase }}
{{'ABC' | lowercase }}
</code></pre>
<h3 id="t4311.3 limitTo">11.3 limitTo</h3>
限制位数
<pre><code class="lang-html">{{123456 | limitTo:5}}
</code></pre>
<h3 id="t4411.4 number">11.4 number</h3>
数字过滤器
<pre><code class="lang-html">{{1234.2345|number:2}}
</code></pre>
<h3 id="t4511.5 json">11.5 json</h3>
对象过滤器
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">pre</span>></span>
{{{aa:123,bb:456} | json}}
<span class="hljs-tag"></<span class="hljs-title">pre</span>></span>
</code></pre>
<h3 id="t4611.6 date">11.6 date</h3>
日期过滤器
<pre><code class="lang-html">{{1654325689063 | date:'yyyy-MM-dd hh:mm:ss'}}
</code></pre>
<h3 id="t4711.7 orderBy">11.7 orderBy</h3>
排序orderBy:'字段名字':'正反序'(true/false)
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"p in phones | orderBy:'age':'reverse'"</span>></span>
{{p.name}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h3 id="t4811.8.filter">11.8.filter</h3>
查询过滤器
<h4 id="t4911.8.1 查询全部值">11.8.1 查询全部值</h4>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"p in phones | filter:age"</span>></span>
{{p.name}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h4 id="t5011.8.2 查询全指定字段">11.8.2 查询全指定字段</h4>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"p in phones | filter:{age:query}"</span>></span>">
{{p.name}}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h2 id="t5112.angular常用工具方法">12.angular常用工具方法</h2>
<h3 id="t5212.1 uppercase&&lowercase">12.1 uppercase&&lowercase</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> abc = angular.uppercase(<span class="hljs-string">"aaaa"</span>);
<span class="hljs-built_in">console</span>.log(abc);
<span class="hljs-keyword">var</span> abc = angular.lowercase(<span class="hljs-string">"aaaa"</span>);
<span class="hljs-built_in">console</span>.log(abc);
</code></pre>
<h3 id="t5312.2 equals">12.2 equals</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> a = angular.equals(<span class="hljs-literal">NaN</span>,<span class="hljs-literal">NaN</span>);
<span class="hljs-built_in">console</span>.log(a);
</code></pre>
<h3 id="t5412.3 extend">12.3 extend</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> obj = {a:<span class="hljs-number">123</span>},obj1 = {b:<span class="hljs-number">456</span>};
angular.extend(obj,obj1);
<span class="hljs-built_in">console</span>.log(obj);
</code></pre>
<h3 id="t5512.4 fromJson&&toJson">12.4 fromJson&&toJson</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> obj = <span class="hljs-string">'{"aa":123,"bb":456}'</span>;
<span class="hljs-keyword">var</span> a =angular.fromJson(obj);
a = angular.toJson(a);
<span class="hljs-built_in">console</span>.log(a);
</code></pre>
<h3 id="t5612.5 copy">12.5 copy</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> obj = {a:<span class="hljs-number">123</span>},obj1 = {b:<span class="hljs-number">456</span>};
angular.copy(obj,obj1);
<span class="hljs-built_in">console</span>.log(obj1);
</code></pre>
<h3 id="t5712.6 forEach">12.6 forEach</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> arr = [{name:<span class="hljs-number">1</span>},{name:<span class="hljs-number">2</span>},{name:<span class="hljs-number">3</span>}];
<span class="hljs-keyword">var</span> result = [];
angular.forEach(arr,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) </span>{
<span class="hljs-keyword">this</span>.push(item.name);
},result);
</code></pre>
<h3 id="t5812.7 bind">12.7 bind</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> obj = {name:<span class="hljs-number">2</span>};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">arr</span>(<span class="hljs-params">who</span>)</span>{<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name+who);}
<span class="hljs-keyword">var</span> newArr = angular.bind(obj,arr,<span class="hljs-number">1</span>);
newArr();</code></pre>