AngulaerJs

typora-root-url: img

AngularJs

AngularJS 应用组成(MVC)

• View(视图), 即 HTML。
• Model(模型), 当前视图中可用的数据。
• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

安装与使用

在页面head之间引入以下代码即可使用

<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

• 如果选择下载静态AngularJS文件,以下是下载地址
• 官方文档所在 AngularJs官网

---

引入外部文件的方式

在大型的应用程序中，通常是把控制器存储在外部文件中。只需要把 标签中的代码复制到名为 personController.js 的外部文件中即可

<script src="personController.js"></script>

---

ng 指令汇总

1>常用指令

指令 功能
ng-init 为 AngularJS 应用程序定义了 初始值。
ng-model 创建对象(当然数组也是对象)
ng-repeat 遍历数组
ng-options 遍历对象
ng-show 对控件设置可见/不可见(修改的是value的值)
ng-hide 对控件设置不可见/可见(与上相反)
ng-disabled 设置控件无效(按钮无效,字符不显示)
ng-include 在本页面包含进一个指定页面

2>自定义指令

自定义指令方法directive()

angular.module('myApp',[])  
            //自定义指令的方法directive  
            //第一个参数是指令名称  
            //第二个参数是个function，返回设置指令属性的对象  
            .directive('userList',function(){  
                return {  
                    restrict:'ECA',  
                    template:'<ul><li ng-repeat="user in users">{{ user.id }} {{ user.name}}                            </li></ul>',  
                    replace:true  
                }  
            })  
            .controller('myCtrl',['$scope',function($scope){  
                $scope.users=[  
                    {id:12,name:'张三'},  
                    {id:15,name:'李四'},  
                    {id:18,name:'王五'}  
                ]  
            }])  

<div ng-app="myApp" ng-controller="myCtrl">  
    <user-list></user-list>  
</div>  
//或者
<div class="user-list"></div>
//或者
<div user-list></div> 

使用template指令可以返回所指定格式的dom内容

上面的上面的代码的restrict:’ECA’

• E(element):
• C(class):

• A(attribute):

  replace如果为true，则标签不再生成

其实就是自定义标签,有一个要注意的地方就是创建的指令是userList的,在页面应该用

---

$scope

• Scope(作用域) 是应用在 视图和 控制器 之间的纽带。
• Scope 可应用在视图和控制器上。

• Scope 是一个js对象，有可用的方法和属性。

  {{greeting}}

  angular.module(‘myApp’, []).controller(‘myCtrl’, function($scope) {$scope.greeting = “hu”
  })

使用视图的时候,不需要加{{$scope}.name},而是直接用{{name}}即可.

1>根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});

结果:

---

AngularJs控制器

• AngularJS 控制器在
  内由 ng-controller 指令定义
• AngularJS 控制器 控制 AngularJS 应用程序的数据。

• AngularJS 控制器是常规的 JavaScript 对象。

  app.controller(‘myCtrl’, function($scope) {$scope.firstName = “John”;
  $scope.lastName = “Doe”;
  });

1>控制器也可以有方法

app.controller('myCtrl', function($scope) {
$scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

---

angularJs过滤器

AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。例{{lastName | uppercase}}

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。例如根据年龄升序/降序
uppercase 格式化字符串为大写。

1>orderBy排序

<div ng-app="myApp" ng-controller="namesCtrl">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'age'">
    {{ x.name + ', ' + x.age }}
  </li>
</ul>

</div>

var app = angular.module('myApp', []);

app.controller('namesCtrl', function($scope) {
    $scope.names = [
                {"name":"张三","age":2},
                {"name":"李四","age":3},
                {"name":"哇嘎","age":1},
                {"name":"网二","age":4}]
});

结果:

---

AngularJs服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

使用时将服务写在controller方法的参数最后

---

1>$location服务

获取当前的完整地址

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    //注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。
    $scope.myUrl = $location.absUrl();
});

\

2>$http服务

<div ng-app="myApp" ng-controller="myCtrl">
    {{myWelcome}}
</div>



var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("https://www.w3cschool.cn/statics/demosource/Customers_JSON.php").then(function (response) {
      $scope.myWelcome = response.data;
  });
});

用于发送http请求,并操作返回结果

3>$timeout计时服务和 interval迭代服务

两秒之后替换文字

$timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000)

每隔一秒重复刷新时间

  $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);

---

自定义服务Service

1>定义服务

app.service('hexafy', [function() {
    function myFunc(x) {
        return x.toString(16);
    }
}]);

2>控制器调用服务

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

3>过滤器调用服务

<div ng-app="myApp">
    <h1>{{255 | myFormat}}</h1>
</div>

app.filter('myFormat',['hexafy',function(hexafy){
    return function(x){
        return hexafy.myFunc(x);
    }
}]

---

AngularJs 字符与 Json数据转换

1>json格式

格式 结果
json字符串格式 var json = ‘{“name”:”liSi”, “password”:”321”}’;
json数组字符串格式 var jsonArr = ‘[{“name”:”zhangSan”, “password”:”123”},{“name”:”liSi”, “password”:”321”}]’;
数组 var arr[] = [1,2,3];

//如果需要json对象
var json = {"name":"hu","psw":"123"};//这个json是json对象,不需要转换
var json = '{"name":"hu","psw":"123"}';//这个json字符串,需要转换(多了个'')

1>字符转JSON格式

var jsonObject = angular.fromJson(String);

2>json转String

var String = angualr.toJson(JsonObject);

---

AngularJs事件

ng-click点击事件

---

AngularJs模块

通常将所有的模型文件放在 *App.js中

将所有的控制器文件放在*Controller.js中

将所有的服务文件放在*Service.js中

---

AngularJs表单验证

需要条件

• form上面一定要有一个name属性，最好再加一个novalidate=”novalidate”
• form之中不能有action属性

• 每个input标签都应该有ng-model

  标签属性 功能
  required(格式) 验证是否已输入文字
  ng-minlength=“{numbr}” 验证至少输入{number}个字
  ng-maxlength=“{number} 验证至多输入{number}个字符
  ng-pattern=”/PATTERN/” 确保输入匹配一个正则表达式

---

AngularJs BootStrap

实例分析 简单的用户编辑功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

<script >
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Wang',lName:"Loen" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName; 
  }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
})

</script>

</body>
</html>

判定表单的内容 incomplete 或者 error其中一个为false,则提交按钮无法使用（关键分析这个功能）

AngularJS 指令 描述