菜鸟AngularJS学习之路 【第一天】。(排版修正)
来源:互联网 发布:mysql 表空间大小 编辑:程序博客网 时间:2024/05/18 05:37
第一次写博客有点紧张,要不要脱啊。。哈哈(毕竟我是段友)
本着“不求闻达于诸侯“ 的精神开始了我的博客之旅,非常感谢我的好友梅哥给我了这个建议,以后把每天的学习成果记录到这里与大家分享。
本人菜鸟一个 大家轻喷,渴望得到指点!大笑
所看书籍为:AngularJS权威教程 CSDN上面可以找到
第一天:
1.初识AngularJS
首先我参照书上写了一个简单的数据绑定例子
html 页面结构就不再写出来
<div ng-app> <input ng-model="meige" type="text" placeholder="梅哥" /> <h1>我的好朋友{{ meige }}</h1></div>
1.先说明一下我对ng-app的理解 我对它的理解是MVC里面的 view视图 在Angular里面也叫模块 它是用来渲染页面内容的 每一个页面可以有多一个或多个ng-app来标注不同的模块 。
2.ng-model 很明显是mvc模式里德 model 用来提供数据模型。
3.{{ }} 这个是用来绑定数据用的操作符 ,和ASP.NET MVC的”@“操作符 ASP.NET的”<% %>“ 感觉很像。只不过其实{{ }} 里面绑定的都是
上面的代码 运行结果如下
当我在文本框中输入任何值的时候 {{ meige }} 将响应对应的值,用ng-model实现了动态绑定 而只需要简单的两个小步骤 ,还是蛮吸引人得!
接着我通过书上的示例来实现一个时钟效果 这里我们要用到第二个AngularJS指令 ng-controller (顾名思义这个是控制器的意思) 先实现效果 后面再来探索一下他们的包含关系。控制器命名格式为 nameController
首先写html代码
<div ng-app ng-controller="oygController"><h1>现在是深圳时间:{{ time }}</h1><div>
//这里接收两个参数个: $scope(实体模型对象) 它的作用前面说过时 视图和控制器
之间数据同步的桥梁. $timeout 为计时器
function oygController($scope, $timeout) { var updateTime = function () { $scope.time = new Date().toLocaleString(); $timeout(function () { updateTime(); }, 1000); } updateTime(); }
运行上面的代码得到如下结果
时间会一直刷新,显示当前时间。 相当于一个死循环。
如果有人跟我一样是初学者肯定都会对$timeout 没什么好感 因为并不认识 那我们就来用 setInterval 来实现相同的功能,
编写代码如下
function oygController($scope, $timeout) { $scope.time = new Date().toLocaleString(); setInterval(function () { $scope.time = new Date().toLocaleString(); $scope.$apply(); //这句代码是用setInterval实现的核心代码 因为angularjs并不知道你已经更新了模型的值 你需要手动去触发这个函数 让它知道你更新了 从而实现绑定 }, 1000) }
这样我们用原生的 定时器也实现了相同的功能。关于绑定执行原理后面再探索 。
下面我们来谈一谈 作用域,视图,控制器,模型对象的关系
经过一些学习 作用域对于angularjs来说至关重要,但是我现在还没有完全领悟它。 视图(ng-app)制定再Html页面的哪个区域是属于angualrjs的哪个模块来处理的。可以包含诺干戈控制器 对于控制器而言他们的关系都是平等的每一个控制器都有自己的
因此 我总结出如下的包含关系 ng-app包含controller $scope 连接ng-app和controller
根据此关系 查了一些资料 做了一个页面包含多个模块的示例 也说明了 angularjs模块化的概念(html 层面 js层面正在学习)
下面是示例代码(可以直接运行):
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="angular_1.2.13.js"></script> <!--<script src="angular-1.6.4/angular-1.6.4/angular.min.js"></script>--></head><body> <div ng-app="myAPP"> <div ng-controller="oygController"> <h1>{{ time }}</h1> </div> </div> <div id="oyg" ng-app="meigeAPP"> <div ng-controller="meigeController"> <h1>{{ meige }}</h1> </div> </div> <script> //APP module是controller的容器 controller 负责具体元素的逻辑处理 数据模型暂时还没看到 //AngualrJS 默认只会装载第一个App模块 var oygAPP = angular.module("myAPP",[]);//这个相当于视图 (页面显示) oygAPP.controller("oygController", function ($scope) { //控制器(业务逻辑处理 ) $scope.time = "月落乌啼霜满天"; //$scope 实体模型对象 }); //之后的模块需要手动启动 var meigeAPP = angular.module("meigeAPP", []); meigeAPP.controller("meigeController", function ($scope) { $scope.meige = "梅哥来到小河边"; }); //这句代码用来启用第二模块 这里要 angular.bootstrap(document.getElementById("oyg"), ['meigeAPP']); </script></body></html>
各位大侠,明天继续 菜鸟轻喷!!
- 菜鸟AngularJS学习之路 【第一天】。(排版修正)
- 菜鸟学习java第一天 学习笔记
- 【菜鸟的成长之路】android游戏开发学习历程——记录每天的学习内容之【第一天】
- 小菜鸟学习Thinkphp第一天
- 第一天 菜鸟前进之道 activity
- php学习之路第一天
- IOS学习之路 第一天
- CSS学习之路第一天
- Java学习之路(第一天)
- orcle学习之路第一天
- 第一天开始学习之路
- opencv学习之路 第一天
- Python学习之路-第一天
- angularjs第一天
- 菜鸟路--第一天
- 菜鸟的第一天
- 菜鸟第一天
- Java菜鸟第一天
- 升级Jenkins及gerrit trigger 插件
- usaco Cowxor (trie 树)
- c++写情诗
- Servlet概述
- TCP三次握手四次挥手
- 菜鸟AngularJS学习之路 【第一天】。(排版修正)
- B
- Boolan C++面向对象高级编程(上)第一周笔记
- photoshop放大缩小有什么快捷键
- MySql——常用函数
- php常用函数实例
- WOJ 654 递推+矩阵快速幂
- HttpClient通信网络
- 初涉USB,初学者USB入门总结(1)枚举