【AngularJS】—— 2 初识AngularJs（续）

2022-03-13 00:04:35

前一篇了解了AngularJS的一些简单的使用，这里继续跟着w3c学习一下剩下的内容。

　　本篇根据w3cschool.cc继续学习AngularJS剩余的内容，包括：

　　1 事件

　　2 模块

　　3 表单

　　4 数据验证

　　5 bootstrap CSS风格

　　6 include包含其他页面

　　7 应用程序

　　8 参考手册

　　首先看一下html的事件

　　关于html的事件，文中给出了三个例子，点击、隐藏、显示。使用方法基本相同：

　　先看一下点击的例子，点击按钮后，会触发ng-click内的方法，进行累计加一：

<div ng-app="" ng-controller="myController">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>

　　对于ng-hide和ng-show原理相同，都是指定一个bool值，true或false。

　　初始的时候myVar的值为false，因此并不隐藏，每次点击myVar都会改变为相反的值，达到现实隐藏的效果。

<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">

名: <input type="text" ng-model="person.firstName"><br>

姓: <input type="text" ng-model="person.lastName"><br>

<br>

姓名: {{person.firstName + " " + person.lastName}}

</p>

</div>

<script>

function personController($scope) {

    $scope.person = {

        firstName: "John",

        lastName: "Doe"

    };

    $scope.myVar = false;

    $scope.toggle = function() {

        $scope.myVar = !$scope.myVar;

    };

}

</script>

　　ng-show使用方法也相同

<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">

名: <input type="text" ng-model="person.firstName"><br>

姓: <input type="text" ng-model="person.lastName"><br>

<br>

姓名: {{person.firstName + " " + person.lastName}}

</p>

</div>

<script>

function personController($scope) {

    $scope.person = {

        firstName: "John",

        lastName: "Doe"

    };

    $scope.myVar = true;

    $scope.toggle = function() {

        $scope.myVar = !$scope.myVar;

    };

}

</script>

　　关于AngularJS的模块

　　模块定义了用户的应用，所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。

　　例如下面的代码，定义了一个应用程序的模块myApp，并定义了一个控制器myCtrl：

<body>

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

{{ firstName + " " + lastName }}

</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

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

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

</body>

　　对于控制器，也可以通过模块来定义声明：

<head>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</head>

<body>

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

{{ firstName + " " + lastName }}

</div>

<script>

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

app.controller("myCtrl", function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

</body>

　　不过要提前加载angularjs的脚本，这样再script中 angular.module才可以使用。或者在这句话的前面加载js。

　　关于AngularJS表单

　　表单是web中重要的组成部分，如下面样例所示，可以很方便的获取到form中的数据

<div ng-app="" ng-controller="formController">

  <form novalidate>

    First Name:<br>

    <input type="text" ng-model="user.firstName"><br>

    Last Name:<br>

    <input type="text" ng-model="user.lastName">

    <br><br>

    <button ng-click="reset()">RESET</button>

  </form>

  <p>form = {{user}}</p>

  <p>master = {{master}}</p>

</div>

<script>

function formController ($scope) {

    $scope.master = {firstName: "John", lastName: "Doe"};

    $scope.reset = function() {

        $scope.user = angular.copy($scope.master);

    };

    $scope.reset();

};

</script>

　　关于验证

　　AngularJS提供了很多验证机制，例如邮箱等。

<!DOCTYPE html>

<html> 

<body>

<h2>Validation Example</h2>

<form  ng-app=""  ng-controller="validateCtrl"

name="myForm" novalidate>

<p>Username:<br>

  <input type="text" name="user" ng-model="user" required>

  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

  <span ng-show="myForm.user.$error.required">Username is required.</span>

  </span>

</p>

<p>Email:<br>

  <input type="email" name="email" ng-model="email" required>

  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

  <span ng-show="myForm.email.$error.required">Email is required.</span>

  <span ng-show="myForm.email.$error.email">Invalid email address.</span>

  </span>

</p>

<p>

  <input type="submit"

  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||

  myForm.email.$dirty && myForm.email.$invalid">

</p>

</form>

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

<script>

function validateCtrl($scope) {

    $scope.user = 'John Doe';

    $scope.email = 'john.doe@gmail.com';

}

</script>

</body>

</html>

　　可以通过.$dirty .$invalid来验证。

　　添加bootstrap样式

　　可以首先加载bootstrap css文件

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

　　样例代码参考：

<!DOCTYPE html>

<html ang-app="">

<head>

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

<body ng-controller="userController">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">

  <thead><tr>

    <th>Edit</th>

    <th>First Name</th>

    <th>Last Name</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>&nbsp;&nbsp;Edit

      </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> Create New User

</button>

<hr>

<h3 ng-show="edit">Create New User:</h3>

<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">

<div class="form-group">

  <label class="col-sm-2 control-label">First Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Last Name:</label>

  <div class="col-sm-10">

    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Password:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw1" placeholder="Password">

  </div>

</div>

<div class="form-group">

  <label class="col-sm-2 control-label">Repeat:</label>

  <div class="col-sm-10">

    <input type="password" ng-model="passw2" placeholder="Repeat Password">

  </div>

</div>

</form>

<hr>

<button class="btn btn-success" ng-disabled="error || incomplete">

  <span class="glyphicon glyphicon-save"></span> Save Changes

</button>

</div>

<script src = "http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>

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

</body>

</html>

　　关于include包含其他html

　　可以通过ng-include来包含其他的web页面：

<body>

<div class="container">

  <div ng-include="'myUsers_List.htm'"></div>

  <div ng-include="'myUsers_Form.htm'"></div>

</div>

</body>

　　关于应用程序

　　创建AngularJS应用程序

<div ng-app="myTodoApp" ng-controller="myTodoCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>

<button ng-click="save()">保存</button>

<button ng-click="clear()">清除</button>

</p>

<p>剩下的字符数：<span ng-bind="left()"></span></p>

</div>

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

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

　　最后是Angular的指定过滤器参考

　　ng_app 定义应用程序

　　ng_bind 绑定数据

　　ng_click 定义元素单击行为

　　ng_controller 定义控制器对象

　　ng_disabled 定义html标签可用

　　ng_init 初始化数据

　　ng_model 绑定应用程序数据

　　ng_repeat 实现循环

　　ng_show 显示html标签

　　currency 转换成货币

　　filter 从数组中选择一个子集

　　lowercase 格式化字符串为小写

　　uppercase 格式化字符串为大写

　　orderBy 排序

码农公寓

首先看一下html的事件

关于AngularJS的模块

关于AngularJS表单

关于验证

添加bootstrap样式

关于include包含其他html

关于应用程序

最后是Angular的指定 过滤器参考

相关文章

　　首先看一下html的事件

　　关于AngularJS的模块

　　关于AngularJS表单

　　关于验证

　　添加bootstrap样式

　　关于include包含其他html

　　关于应用程序

　　最后是Angular的指定过滤器参考