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

来源:互联网 发布:淘宝全球购认证 编辑:程序博客网 时间:2024/02/24 03:47

一个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('输入有误');    }  }}]);

总结:

上述小例子只是简单的实现了angular应用的几个比较重要的步骤,还没有涉及到mvc。

0 0
原创粉丝点击