Angular构建简单应用的步骤分解

最新推荐文章于 2022-05-31 21:21:47 发布

原创最新推荐文章于 2022-05-31 21:21:47 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

Angular | Ionic 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个简单的AngularJS应用实现过程，包括引入文件、定义模块与控制器、数据绑定及业务逻辑等核心步骤。

一个angular应用，通常都会有的步骤为：

① 引入angular文件
② 在页面上设置模块和控制器
③ 使用页面上的模块和控制器
④ 设计$scope上的成员
⑤ 在页面上进行数据绑定
⑥ 完成业务逻辑

下面我们来举例说明:

html结构：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Document</title>
  <!-- 步骤一：引入angular文件  -->
  <script src='http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js'></script>
</head>
<!-- 步骤二：在页面上设置模块和控制器 -->
<body ng-app='myApp' ng-controller='myCtrl'>
    <!-- 步骤五：在页面上进行数据绑定 -->
    <input type='text' ng-model='username' ><br>
    <input type='button' value="校验" ng-click='check()'><br>
</body>
</html>

javascript结构：

/* 步骤三：使用页面上的模块和控制器 */
angular.module('myApp',[])
.controller('myCtrl', ['$scope', function($scope){
  /* 步骤四：设计$scope上的成员 */
  $scope.username='Tom';
  /* 步骤六：完成业务逻辑 */
  $scope.check = function() {
    //模拟业务逻辑
    if(!$scope.username || $scope.username.length>10){
      console.log('输入有误');
    }
  }
}]);