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

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

一个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
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 整形医院把我脸上疤痕被大了怎么办 牙齿缝里的东西很臭怎么办 五岁宝宝牙齿有空洞斑点怎么办 给别人担保贷款被起诉了怎么办 不小心在微信里登录江西移动怎么办 住院出院后医保卡在医院怎么办 医院门诊做完检查医生下班了怎么办 退税的发票勾选为抵扣的发票怎么办 买完邮轮票后护照换了怎么办? 朝阳医院挂号过了取号时间怎么办 苹果4的id密码忘了怎么办 ipad己停用5分钟后再试怎么办 手机上大智慧日线失真怎么办 安卓手机突然地图信号弱怎么办 魔兽争霸对战模式没有金币要怎么办 常州号码被标记了商铺的名字怎么办 车提档了不接收怎么办公司能收回吗 稳岗补贴如果联系方式填错了怎么办 湖北驾照扣了50多分怎么办 南京驾照违章了50多分怎么办 有一个月没有去国税保税怎么办? 刑政复议通知书被邮政延误了怎么办 高考听力报名注册了两个用户怎么办 左腿神经损伤夏天脚冰凉怎么办 给区组织部的介绍信给到社区怎么办 被丈夫和儿子强送精神病院怎么办 练车穿短袖晒的胳膊特别黑怎么办 车子卖了对方迟迟不过户怎么办 成都华西医院就诊卡密码忘了怎么办 资阳办健康证怎么办要预约吗 头发出油厉害怎么办民间小偏方 你帮助别人别人却想着害你怎么办 怀孕接触有辐射的东西回怎么办 苹果手机用久了有点卡怎么办 4s店把我车撞了怎么办 长安之星2代大灯高不聚光怎么办 被电动车撞了人跑了怎么办 车被电动车撞了对方跑了怎么办 房子卖了户口没地方迁怎么办 酷派大神f2开不开机怎么办 酷派手机玩游戏竖屏怎么办