初识 Angular 体会

Posted 2020-06-11

一句话描述:一个前端的类似MVC框架的JS库

刚接触2天,刚一看感觉和asp.net mvc能实现的功能有点重复.

虽然asp.net的表单验证,Razor语法使其在前端开发有较大提升,但要实现比较高级复杂效果还是要

客户端JS来实现,服务端更多是提供和保存数据的角色.

如果只是简单的CURD应用,用原始Mvc的功能会效率更高也够用.

很多前端js框架注重的是UI表现.而angular注重的是如何管理和表现数据.

angular本身不提供样式和控件,是一个管理数据,控制输出的JS库.

虽然很多控件库对于复杂控件都支持绑定json数据.但没有angular这么方便好用自由全面.

适用:CURD应用,富客户端,重客户端/轻服务端的应用(对数据处理较复杂)

不适合:高度灵活自由的,游戏类,过于简单的.

 

标签属性介绍(网上复制,经过一点加工):

ng-app 类似命名空间,区分不同控制器.

var app = angular.module(‘AppName‘, []);

ng-controller 声明一个新的控制器的名字.

app.controller(‘ControllName‘, function($scope) {
    $scope.Property=...
});

实例化控制器,第二个参数控制器构造函数.可以给控制器属性,方法赋值.

这些值就是Model. $scope就是每个控制器的Model.作用域:当前控制器及其子Dom.

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数

app.controller(‘customersCtrl‘, 
 function($scope, $http) {
    $http.get("http://xxx.php")
    .success(function(response) {$scope.names = response.records;});
});

ng-model 将当前Dom输入值或值绑定到指定Model(即保存数据的变量)

这种绑定是双向的(如果Model值改变了,这个Dom对象的值也会跟着变)

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

可以通过(valid:合法, dirty:值是否改变了, touched:是否触屏点击, error)来获取所绑定Dom对象的状态.

<form ng-app="" name="myForm" ng-init="myText = ‘[email protected]‘">
    <input type="email" name="myAddress" ng-model="myText"required></p>
    <h1>状态</h1>
	{{myForm.myAddress.$valid}}
</form>
绑定的Dom对象的状态相关的css样式

<style>

input.ng-invalid {
    background-color: lightblue;
}

</style>

 ng-init 指令初始化应用程序数据。

 

<div ng-app="" ng-init="firstName=‘John‘">

  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p>

</div> 

 ng-repeat 指令会重复一个 html 元素：

<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

 表格:

<table>
  <tr ng-repeat="x in names | orderBy : ‘Country‘">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

 其他常用指令

ng-disabled  bool  对应 Dom 的 disabled 属性。
ng-show  bool 显示和隐藏
ng-click function/Expression onclick事件执行代码