标签:style http color 使用 os io 文件 数据
AngularJS是用JS写的客户端 MVC 框架,它运行在浏览器中,并极大的帮助我们书写现代的、单页的、AJAX风格的web App。这是一个通用的框架,但当你用来开发CRUD类型的web app时更能显现出它的强大之处。
在说明AngularJS到底是什么之前 先看个小例子 一如既往的hello world~
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"> </script> </head> <body ng-app ng-init="name=‘World‘"> <h1>Hello, {{name}}</h1> </body> </html>
首先是在script标签中引入AngularJS文件 这里是用的是官网给出的CDN
body 中 ng-app用于启动AngularJS应用,ng-init则在模板初始化之前渲染模型
{{name}} 部分主要是使用了ng-init的值作为渲染素材
其中 可以抽象出一些重要特性:
自定义的 HTML 标签和属性可以给本来是静态的 HTML 文档增添动态行为。
两个花括号{{expression}}是一个用来输出模型值的表达式的定界符
所有的可以被框架所理解和解析的特殊的 HTML 标签和属性都是指令
AngularJS最厉害的功能莫过于数据的双向绑定了
身为业余前端 一直很苦恼怎么把后端数据绑定到前端展示上去
AngularJS简直就是梦幻一样的存在 看例子
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"> </script> </head> <body ng-app ng-init="name=‘World‘"> Say hello :<input type="text" ng-model="name"> <h1>Hello, {{name}}</h1> </body> </html>
input标签中有一个ng-model 修改一下输入框中的文字 对 你看及了是吧
文字在同步更新 而你并没有刷新页面 AngularJS检查到模型的改变&重绘DOM 这就是数据绑定
目前我们所见的hello-world程序并不是分层的 数据初始化,逻辑,视图均在一个文件中完成
而AngularJS宣称是基于MVC模型(模型-视图-控制器)
不过 AngularJS提供了一些不同的构建方式,可以正确地构建更加复杂的应用
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"> </script> <script> var HelloCtrl = function ($scope) { $scope.name = ‘World‘; } </script> </head> <body ng-app ng-init="name=‘World‘"> <div ng-controller="HelloCtrl"> Say hello to: <input type="text" ng-model="name"><br> <h1>Hello, {{name}}!</h1> </div> </body> </html>
这段程序和上面的程序功能上没有区别 但是移除了ng-init 添加了ng-controller并绑定了一个JS函数到scope
AngularJS中的scope对象在这里就是要将 域模型 暴露给视图
只需把属性设置给 scope 实例,就可以在模板渲染时得到这个值
scope也可以针对特定的视图来扩展数据和特定的功能
控制器的首要任务就是初始化scope对象 控制器都是普通的JS函数
提供模型初始化的值 扩展scope的UI行为
AngularJS中的模型也是普通JS对象
标签:style http color 使用 os io 文件 数据
原文地址:http://my.oschina.net/darionyaphet/blog/298405