【AngularJS学习笔记】00 序
2016-02-24 22:33
676 查看
AngularJS通过新的属性与表达式来扩展HTML,有一种很形象的叫法,定义它为[b]声明式语言[/b]。
它的官网进不去,应该是被墙了,这是goegle的团队弄的。所以找了个应用AngularJS的网站,然后另存为下来的。
以一段简单的代码开头
在上面代码中,以ng-*这样的格式书写的属性,都是AngularJS定义的新属性。
其中ng-app所在的div为名叫myApp的AngularJS应用程序。
ng-controller 用于控制 AngularJS 应用.
ng-init在相当于在AngularJS应用程序初始化时,启用的一段JS代码。
ng-model相当于绑定一个输入框,到AngularJS应用程序的指定的变量上。
ng-bind绑定AngularJS应用程序里的指定变量到HTML元素上。
但是这里我们也采用了更简便的做法,{{}}表达式。AngularJS的表达式,就是相当于一段javascript表达式的计算。AngularJS 表达式不支持条件判断,循环及异常,但支持过滤器。
AngularJS入门就是这么简单。
AngularJS的对象和变量
来一个展示AngularJS的对象和变量的例子
这段代码很形象,于是让我们脑补一下自己用JS如何去实现吧。
虽然按我现在的水准而言实现很有难度,但是我们知道它可能是怎么玩的,更利于我们学习。
脑补实现(我自己思考的实现,并没有看具体代码)
HTML操作
那么首先我写个JS去查找这个HTML里的属性为ng-app的元素,然后查找ng-init的属性,并执行里面的代码。
这样我们得到了名为myInfo的对象和名为points的数组。
然后搜它的子级元素,搜索{{ 表达式的符号,或者ng-bind表达式,或者ng-model,搜到表达式就执行表达式得到结果就放在HTML上好了。
JS操作
而在后面用app.controller来控制就更简单了,同样找到元素,操作这个叫myApp的命名空间(应该是个函数体)里的变量的值,就算页面上没有变量,JS也会自动加一个内部变量。
然后去找页面上ng-model和ng-bind或者表达式的位置,然后赋值
应该就是这个样子。
为克服HTML在构建应用上的不足而设计!
这是它的目标。它的官网进不去,应该是被墙了,这是goegle的团队弄的。所以找了个应用AngularJS的网站,然后另存为下来的。
以一段简单的代码开头
<div ng-app="myApp" ng-controller="myCtrl" ng-init="num1=3;num2=4"> <span ng-bind="num1">3</span> 省 <input type="text" ng-model="provinceName"><br> 市 <input type="text" ng-model="cityName"><br> 区 <input type="text" ng-model="areaName"><br> <br> 地址: {{provinceName + "省" + cityName+ "市" + areaName+"区"}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.provinceName= "湖北"; $scope.cityName= "武汉"; $scope.areaName= "洪山"; }); </script>
在上面代码中,以ng-*这样的格式书写的属性,都是AngularJS定义的新属性。
其中ng-app所在的div为名叫myApp的AngularJS应用程序。
ng-controller 用于控制 AngularJS 应用.
ng-init在相当于在AngularJS应用程序初始化时,启用的一段JS代码。
ng-model相当于绑定一个输入框,到AngularJS应用程序的指定的变量上。
ng-bind绑定AngularJS应用程序里的指定变量到HTML元素上。
但是这里我们也采用了更简便的做法,{{}}表达式。AngularJS的表达式,就是相当于一段javascript表达式的计算。AngularJS 表达式不支持条件判断,循环及异常,但支持过滤器。
AngularJS入门就是这么简单。
AngularJS的对象和变量
来一个展示AngularJS的对象和变量的例子
<div ng-app="" ng-init="myInfo={Name:'Troy123',Job:'程序员'};points=[1,3,2,2,1]"> <p>信息:{{ myInfo.Job+":"+myInfo.Name }}</p> <p>第一个值为 {{ points[0] }}</p> </div>
这段代码很形象,于是让我们脑补一下自己用JS如何去实现吧。
虽然按我现在的水准而言实现很有难度,但是我们知道它可能是怎么玩的,更利于我们学习。
脑补实现(我自己思考的实现,并没有看具体代码)
HTML操作
那么首先我写个JS去查找这个HTML里的属性为ng-app的元素,然后查找ng-init的属性,并执行里面的代码。
这样我们得到了名为myInfo的对象和名为points的数组。
然后搜它的子级元素,搜索{{ 表达式的符号,或者ng-bind表达式,或者ng-model,搜到表达式就执行表达式得到结果就放在HTML上好了。
JS操作
而在后面用app.controller来控制就更简单了,同样找到元素,操作这个叫myApp的命名空间(应该是个函数体)里的变量的值,就算页面上没有变量,JS也会自动加一个内部变量。
然后去找页面上ng-model和ng-bind或者表达式的位置,然后赋值
应该就是这个样子。
相关文章推荐
- AngularJS动态加载模块和依赖
- 给 Web 开发者的 25 款最有用的 AngularJS 工具
- 深入理解Angular指令
- angularJs学习笔记-路由
- angularJs driective指令小实例
- AngularJS 第三天----作用域
- AngularJS中的JSONP实践
- 在AngularJS中学习javascript的new function意义及this作用域的生成过程
- angularjs 性能优化 转载
- angular好用的插件集合(持续更新中)
- AngularJS的启动过程分析
- AngularJS的启动引导过程
- AngularJs系列实战 Angularjs名词与概念(一)【转】
- [转]Ionic + AngularJS angular-translate 国际化本地化解决方案
- AngularJS-购物车Demo
- AngularJS如何下载Excel文件
- angularJS写的简易日历,有待简化
- ExtJS vs AngularJS
- AngularJs指令相关
- angular 上传文件的插件angular-file-upload