angular.js

2017-07-20 本文已影响19人哼_

介绍

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多

特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

闲话：
angelur 前端必会angelur 代码易维护
vue 两个框架 vue 迅速占领前端市场

Angelur JS 有五个核心特性:

双向数据绑定
模板
Mvvm model(模型) -view(视图)-viewModel(视图模型) 吸收了MVC的设计程序,
MVC model(数据)-view(视图)-controller(逻辑)
依赖注入
指令

为什么使用angular

实现前后端的分离 ,后端只提供数据接口,路由,模板渲染等都在前端完成
html 和 js 分离,展示和逻辑分离
减少 js 代码,减少DOM 元素查找,事件绑定等代码
适合 API 开发适合单页应用整个页面只能见到一个html文件,应用不管多大,就只有这一个,跳转,靠路由切换,一个页面内,渲染不同的内容

内置指令

凡是以 ng- 开始的,都称为内置指令

1. ng-app 用于表示一个angelur 应用

   angelur 会从ng-app 所在的标签开始,管理这个应用
   一个页面(应用)中.,建议只存在一个ng-app
   如果有多个,要手动启动对应的应用
   目前的  ng-app="" 表示使用默认的 Angelur 应用

2. ng-init 初始化数据 ng-init = "a=b;c=d;..."

 使用ng-init 初始的数据, 会挂载到根作用域
 在开发正式项目是,不建议使用 ng-init 做数据初始化
 应该交由 controller 去完成

看一段代码先：

<!DOCTYPE html>
<html ng-app=""> /*默认使用angular的内置指令*/
    <head>
        <meta charset="utf-8">
        <title>angular</title>
        <script src="./angular.min.js" charset="utf-8"></script>
/* 链接angualr 必须的第一步*/
    </head>
    <body ng-init="name='zhar';age=30">
/*  ng-init 初始化数据,这些数据可以在整个页面的任何一个地方是用.例如:包含在h1标签里面. 或者直接在页面上输出*/
        {{ 5*4 }}
        {{ 5>4 ? true : false}}
        <h1>{{ name +"--"+age}}</h1>
        <input type="text" ng-model="one">
        *
        <input type="text" ng-model="two" name="" value="">
        =
        {{one * two}}
        {{name}}{{age}}
    </body>
</html>

3. ng-model 将(表单)视图与模型进行(双向)绑定

  <div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
            name:'zhar',
            age:30
        }">
            <input type="text" ng-model="name" >
            <input type="text" ng-model="arr" name="" value="">
            <ul>
                <li ng-repeat="x in arr">{{ x }}</li>
            </ul>
            <h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>
  </div>

4. ng-repeat 遍历对象

遍历数组:ng-repeat ="x in arr";
遍历对象: ng-repeat = "(key,val) in obj";
还能遍历复杂数组,ng-repeat=""

<div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
            name:'zhar',
            age:30
        };items=[{
            name:'iphone',
            price:5999
        },{
            name:'xiaomi',
            price:3999
        }];as=[1,2,3,4,4,5,5]">
            <input type="text" ng-model="name" >
            <input type="text" ng-model="arr" name="" value="">
            <ul>
                <li ng-repeat="x in arr">{{ x }}</li>//遍历普通数组
            </ul>
            <h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>//遍历对象
            <ul>
                <li ng-repeat="x in arr">{{ x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}}</li>//遍历数组,用angular提供的下标,是否是首个,最后一个,中间一个,下标是几
            </ul>
            <ul>
                <li ng-repeat="item in items">{{item.name+"--"+item.price}}</li>
//遍历复杂数组,json数据格式
            </ul>
            <span ng-repeat="x in as track by $index">{{x}}</span>
//遍历有相同元素的数组,适用下标为跟踪依据,去遍历数组
        </div>
    </body>
</html>

属性:
$first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标项

angelur 需要一个不重复的值去跟踪数据的变化,将导致angelur 无法正常跟踪对应的.,值,需要使用track by $index 为遍历指定一个唯一的不重复值

ng-class

ng-class = { }[ ] 为元素指定样式名
ng-class ="{true:'class' ,false:'class',}[bol]" 有bol 决定添加那个样式
ng-class="{'class1':bol1,'class2':bol2,'class3':bol3}" 由bol决定添加那个样式

//ng-class的三种写法
        <style>
         .box{
             width:100px;
             height: 100px;
             background: red;
         }
         .box1{
             border:3px solid ;
         }
         .box2{
             border-radius:50px;
         }
         .box3{
             box-shadow: 2px 2px 4px #000;
         }
         </style>

 <div class="box" ng-class="{true:'box1',false:'box2'}[className]"></div>

       
<div class="box" 
ng-class="{'box1':isBox1,'box2':isBox2,'box3':isBox3}" ng-model=""></div>

ng-style : 为元素添加样式

ng-show 是否显示元素 true 显示 false 隐藏

ng-show 为false时,只是为元素添加一个优先级最高的 display : none

ng-if 是否显示元素

ng-if 为false时,会将元素从DOM 树中移除
当需要反复显示隐藏时,使用 ng-show
当只显示一次便不再使用的元素,使用 ng-if

添加事件 button
ng-click 单击事件 ng-click = "isShow= ! isShow"

ng-bind
可以解决后引入脚本时,双{{ }}表达式,造成的原样输出的问题

脚本
angular.module (moduleName[,depends]) 创建或获取模块
moduleName :模块名称String
depends: 依赖的其他模块 Array
当只传入一个名称时,代表获取指定的模块
两个参数时,定义模块,即使不依赖其他模块,也要传入一个空数组

作用域

作用域是父子之间可以继承的,但同级的作用域却不能相互访问.
只有在controllar 作用域下才能有效输出比如:

       <div ng-controller="myController">
           {{ name }}   会输出  zhar
       </div>
       <div ng-controller="myController2">
              {{ name }}   会输出 tom  
        </div>
        {{ name }}  没有输出
    
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        //挂断式注入
        app.controller("myController",function($scope){
            $scope.name = "zhar";
        })
        //声明式注入
        app.controller("myController2",["$scope",function($scope){
            $scope.name = "tom";
        }])
    </script>

$rootscope 在声明 ng-app 的位置,创建此作用域
一个 angular 应用有且只有一个根作用域
同级的作用域不可相互访问, 比如:以下

 <div ng-controller="myController">
           {{ name }}----{{ age }}   会输出tom ---30
        </div>
        <div ng-controller="myController2">
            {{ name }}==={{ age }}   会输出zhar  没有age输出
        </div>
    </body>
    <script type="text/javascript">
        //声明自己的app 
        var app = angular.module("myApp",[]);
        //声明式注入
        //建议一律使用这种方式,代码压缩混淆后,依然能正常使用
        //数组的0 到 倒数第二项, 是该控制需要注入的模块
        //最后一项是回调函数
        app.controller("myController",["$scope",function($scope){
            $scope.name = "tom";
            $scope.age = 30;
        }]);
        app.controller("myController2",["$scope",function($scope){
            $scope.name = "zhar"
        }])
    </script>

子集作用域可以访问父集作用域的值,但无权修改,

7个内置过滤器: currency date orderBy filter uppercase lowercase limitTo

currency 货币格式转换 currency :"￥" 更改为人民币默认是 $
lowercase uppercase
date 日期格式化 y 年 M 月 d 日 H 24时 h 12时 m 分钟 s 秒
数组过滤器：limitTo: 限制结果条数如：limitTo ：2 显示两条

orderBy 排序是否降序排列
例：orderBy:"price": 升序排列
例：orderBy:"price":true 降序排列
filter 按关键字快速过滤
filter：searchKey 过滤所有数据包括 searchKey 的内容

明天又是艰苦的一天