初识 Angular 体会

一句话描述:一个前端的类似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 = 'test@123.com'">
    <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事件执行代码

秒客网

初识 Angular 体会

AngularJS $http

相关文章