Angular

AngularJS简介

AngularJS目前为Google所收购，有着诸多的特性，其中最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等

MVC模式

Model：数据，就是angular变量（$scope.XX）

View：数据的呈现，Html + Directive（指令）

Controller：数据操作，就是function，数据的增删改查

双向绑定

AngularJS愿景：声明式编程应该用于构建用户界面及编写软件构建，而指令式编程适合来表示业务逻辑。AngularJS采用并扩展了传统的HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此AngularJS使得对DOM的操作不再重要，并提升了可测试性

依赖注入

依赖注入（Dependency Injection），一种设计模式，某个对象依赖的其他对象无需手工创建，只需要作“约定的操作”，那么这个对象在创建时，其依赖的对象由框架来自动创建并注入进来，其实这就是最少知识法则，模块中的service和provider两类对象，都可以根据形参名来实现DI

模块化设计

根据高内聚、低耦合的原则：

  1. 官方提供了模块：ng、ngRoute、ngAnimate
  2. 用户自定义的模块：angular.module('自定义模块名', [])

 

AngularJS使用

  1. 引入AngularJS资源
    1. <script src="js/angular.min.js"></script>
  2. 简单使用
1 <body ng-app>
2     {{100 + 100}}
3 </body>
4 <!-- 页面将输出 200 -->

 

  1. 注意
    1. ng-app指令定义了Angular应用的根元素，在根元素的所有子元素中用到的指令angular会自动识别
    2. ng-app指令在网页加载完毕后，会自动初始化应用中的angular指令
  2. 双向绑定
    1. 语法格式
      1. 格式一：ng-model="变量名"
      2. 格式二：ng-model="对象.变量名"
    2. 示例
<head>

    <script type="text/script" src="js/angular.min.js"></script>

</head>

<body ng-app>

    <!-- 一方绑定 -->

    姓名：<input type="text" ng-model="name"/><br/>

    性别：<input type="text" ng-model="user.sex"/><br/>

    年龄：<input type="text" ng-model="user.age"/><br/>

    <!-- 二方绑定 -->

    {{name}}，您好！{{user.sex}},{{user.age}}

</body>

 

 

    1. 说明
      1. ng-model指令用于绑定变量，将用户在文本框中输入的内容绑定到变量上，而表达式{{}}可以实时输出变量的值
  2. 初始化指令
    1. 语法
      1. ng-init="变量名1='值1'; 变量名2='值2'; ..."
    2. 示例
      1. <body ng-app ng-init="name='吴填锐'; user.sex='男'; user.age=25">
      2.     姓名：<input type="text" ng-model="name"/><br/>
      3.     性别：<input type="text" ng-model="user.sex"/><br/>
      4.     年龄：<input type="text" ng-model="user.age"/><br/>
      5. </body>
      6. <!-- 这样将会在页面加载完毕后，文本框中拥有初始值 -->
    3. 说明
      1. ng-init用于定义变量的初始值，一个ng-init中可以同时定义多个变量的初始值
  3. 控制器
    1. 语法
      1. 定义模块
        1. var 自定义模块变量名 = angular.module("模块名", [])
      2. 为模块添加控制器
        1. 模块变量名.controller("控制器名", function($scope) {/** 函数体 */});
    2. 示例
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
    // 定义模块
    var myapp = angular.module("myapp", []);
    // 为模块添加控制器
    myapp.controller("myController", function($scope) {
        // 定义add方法
        $.scope.add = function() {
            return parseInt($scope.x) + parseInt($scope.y)
        }
    })
</script>
<body ng-app="myapp" ng-controller="myController">
    x:<input type="text" ng-model="x"/><br/>
    y:<input type="text" ng-model="y"/><br/>
    加法结果：{{add()}}
</body>

 

    1. 说明
      1. 控制器中可以定义方法，页面对应的ng-app对应的ng-controller中可以使用该方法，一个域中只能同时使用一个模块，一个控制器
      2. $scope：贯穿整个Angular App应用，它与数据模型关联，同时也是表达式执行的上下文，有了$scope，相当于在视图和控制器之间建立了一个通道，基于作用域视图在修改数据时会立刻更新$scope，同样的$scope发生改变时也会立刻重新渲染视图
  2. 事件指令
    1. 事件指令列表
angular事件指令列表
ng-click 单击事件
ng-dblclick 双击事件
ng-blur 失去焦点事件
ng-focus 获取焦点事件
ng-change 值改变事件
ng-keydown 键盘按下事件
ng-keyup 键盘弹起事件
ng-keypress 键盘按下后松开事件
ng-mousedown 鼠标按下事件
ng-mouseup 鼠标弹起事件
ng-mouseenter 鼠标进入事件
ng-mouseleave 鼠标离开事件
ng-mousemove 鼠标移动事件
ng-mouseover 鼠标进入事件
    1. 语法格式
      1. 　　ng-xxx="控制器中定义的方法()"
    2. 示例
<scipt type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
     var myapp = angular.module("myapp", []);
         myapp.controller("myController", function($scope) {
             $scope.a = function() {
             $scope.hello = "hello word";
         };
    });
</scipt>
<body ng-app="myapp" ng-controller="myController">
    <input type="button" value="点击" ng-click="a()"/>
    {{hello}}
</body>

 

  1. 遍历数组
    1. 语法
      1. ng-repeat="变量 in 集合或数组"
    2. 示例
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
     var myapp = angular.module("myapp", []);
         myapp.controller("myController", function($scope) {
             $scope.list = [100, 200, 300, 400, 500];
             $scope.objList = [
                 {name:"大名", sex:"男", age:30},
                 {name:"忠明", sex:"女", age:25},
                 {name:"小明", sex:"男", age:20}
                 ];
         };
    });
</script>
<body ng-app="myapp" ng-controller="myController">
    <h2>遍历普通变量集合</h2>
    <ul>
        <li ng-repeat="item in list">
            {{item}}
        </li>
    </ul>
    
    <h2>遍历对象集合</h2>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr ng-repeat="obj in objList">
            <td>序号：{{$index+1}}</td>
            <td>姓名：{{obj.name}}</td>
            <td>性别：{{obj.sex}}</td>
            <td>年龄：{{obj.age}}</td>
        </tr>
    </table>
</body>

 

    1. 说明
      1. 　　$index：迭代集合或数组时，产生的索引，从0开始
  2. 条件指令
    1. 语法
      1. ng-if="条件表达式"
    2. 示例
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
    var myapp = angular.module("myapp", []);
    myapp.controller("myController", function($scope) {
        $scope.user = {name:'吴填锐', age: 20};
    });
</script>
<body ng-app="myapp" ng-controller="myController">
    <label ng-if="user.age >= 20">{{user.name}}</label>
</body>

 

    1. 说明
      1. 当满足ng-if中的条件时，ng-if所属的标签及其子标签、内容才会显示
  2. 下拉列表框
    1. 语法
      1. ng-options="元素变量.键 as 元素变量.键 for 元素变量 in 数组"
    2. 示例
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
    var myapp = angular.module("myapp", []);
    myapp.controller("myController", function($scope) {
        $scope.cities = [
                {id:1, name:"广州市", explain:"hello"},
                {id:2, name:"深圳市", explain:"word"},
                {id:3, name:"北京市", explain:"my"},
                {id:4, name:"上海市", explain:"name"},
                {id:5, name:"杭州市", explain:"is"},
                {id:6, name:"合肥市", explain:"ehow"}
            ];
    });
</script>
<body ng-app="myapp" ng-controller="myController">
    <select ng-model="code" ng-options="c.id as c.name for c in cities">
        <option value="">==请选择城市==</option>
    </select>
    您选择的是：{{code}}
</body>
  • 注意
    • 语法格式中，第一个元素变量.键对应的值作为option里value的值，第二个元素变量.键对应的值作为option标签显示的值
    • ng-options属性必须与ng-model一起使用，否则将不产生效果
  1. 内置服务
    1. $http异步请求服务
      1. 说明：$http异步请求服务类似于ajax请求，可以发送get|post请求
      2. 语法格式
      3. 示例
      4. <script>
// 普通的$http请求
$http({
method:"GET", // 请求方式
url:"/findAll", // 请求URL
params:{"id":1, "name":"ehow"} // 请求参数
}).then(
function(response) { // 请求成功
// response 响应对象
alert("请求成功");
},
function(response) { // 请求失败
alert("请求失败");
}
);
 
// $http的get专属请求
//--带请求参数
$http.get(URL, {参数}).then(function(response){}, function(response){});
//--不带请求参数
$http.get(URL).then(function(response){},function(response){})
 
// $http的pose专属请求
//--带请求参数
$http.post(URL, {参数}).then(function(response){}, function(response) {});
//--不带请求参数
$http.post(URL).then(function(response){},function(response){})
</script>

　　　　　　说明：响应对象response中，封装了响应数据：response.data，封装了响应状态码：response.state

AngularJS加载时机

网页加载完毕后，再执行AngularJS代码

posted @ 2018-07-26 19:49  T_time  阅读(228)  评论(0)  编辑  收藏  举报