码迷,mamicode.com
首页 > 其他好文 > 详细

Angular

时间:2014-08-06 10:42:52      阅读:181      评论:0      收藏:0      [点我收藏+]

标签: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对象









    




Angular,布布扣,bubuko.com

Angular

标签:style   http   color   使用   os   io   文件   数据   

原文地址:http://my.oschina.net/darionyaphet/blog/298405

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!