angular.js[1]

来源：互联网发布：中央财经大学命案知乎编辑：程序博客网时间：2024/05/21 15:07

什么是angular.js ?
angular.js是的创新点在于依赖注入和数据绑定，这将我们从繁杂的DOM操作中解放出来。
AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。

AngularJS应用引导过程有3个重要点：

注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；
注入器将会创建根作用域作为我们应用模型的范围；
AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。

一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

一个应用的代码架构有很多种。对于AngularJS应用，我们鼓励使用模型-视图-控制器（MVC）模式解耦代码和分离关注点。考虑到这一点，我们用AngularJS来为我们的应用添加一些模型、视图和控制器。

在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射。这意味着，不论模型什么时候发生变化，AngularJS会实时更新结合点，随之更新视图。

比如视图组件被AngularJS用下面这个模板构建出来

<body ng-controller="PhoneListCtrl">  <ul>    <li ng-repeat="phone in phones">      {{phone.name}}    <p>{{phone.snippet}}</p>    </li>  </ul></body>

1 在

标签里面的ng-repeat=”phone in phones”语句是一个AngularJS迭代器。这个迭代器告诉AngularJS.。使用

标签作为模板，为列表中的每一部手机创建一个

元素。

2 而包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是，这里的表达式实际上是我们应用的一个数据模型引用，这些我们在PhoneListCtrl控制器里面都设置好了。

angular.js学习网址

这里写图片描述

app.controller('PhoneListCtrl', function($scope,$http) {  $http.get('phone.json').success(function(data) {    $scope.phones = data;  });});

$http向Web服务器发起一个HTTP GET请求，索取phone.json（注意，url是相对于我们的index.html文件的）。服务器用json文件中的数据作为响应。

我们在控制器中使用AngularJS服务$http向你的Web服务器发起一个HTTP请求，以此从phones.json文件中获取数据。$http仅仅是AngularJS众多内建服务中之一，这些服务可以处理一些Web应用的通用操作。AngularJS能将这些服务注入到任何你需要它们的地方。

1 directive

代码如下

         var app= angular.module('app',[])         app.directive('hello',function  () {            return {                restrict:'E' ,                replace: true,                template:'<div>hello movie</div>'            }         })

然后看这个restrict ，它限制directive为指定的声明方式。如果省略的话，directive将默认为A：

E - 元素名称： <my-directive></my-directive>A - 属性名： <div my-directive=”exp”></div>C - class名： <div class=”my-directive:exp;”></div>M - 注释 ： <!-- directive: my-directive exp -->

replace -它的默认值是false。如果设置replace 为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理

当restrict使用默认值，也就是不定义restrict的时候，可以用来绑定函数

  var app= angular.module('app',[])         app.directive('mousein',function  () {            return function  (scope,ele,attr) {                ele.bind('mouseenter',function  () {                    ele.removeClass("btn-danger").addClass("btn btn-success")                })            }         })         app.directive('mouseout',function  () {            return function  (scope,ele,attr) {                ele.bind('mouseleave',function  () {                    ele.removeClass("btn-success").addClass("btn-danger")                })            }         })

0 0