码迷,mamicode.com
首页 > Web开发 > 详细

Angular.JS

时间:2015-06-01 18:32:15      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

AngularJS是什么?

完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术( HTML、 CSS 和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。

<div ng-app="" data-ng-init="name=‘Kavlez‘">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
    {{name}}
    {{6+8}}
</div>
  • ng-app:定义一个AngularJS应用,被其包含的内容都属于该应用。
  • ng-init:初始化应用数据。
  • ng-model:将数据绑定到当前应用。
  • ng-bind:将应用中定义的变量在该标签中显示

     AngularJS的指令都是以ng开头,或者也可以使用data-ng开头。 AngularJS的表达式用两个大括号表示:{{expression}}
     这便是AngularJS最基本的功能:数据绑定

 

Controllers

我们用controller对一个AngularJS应用进行控制。
ng-controller定义一个controller,声明所有被它包含的元素都属于这个控制器。

例如:

<div ng-app="" ng-controller="personController">
    <h1>{{ person.name +‘ is a(an) ‘+person.job }}</h1>
    <h1>{{ person.sayHi() }}</h1>
</div>
<script>
function personController($scope) {
    $scope.person = [];
    $scope.person.name=‘Kavlez‘
    $scope.person.job=‘brogrammer‘
    $scope.person.sayHi = function(){
        return "Hi! I‘m "+ $scope.person.name + ", I‘m a(an) " + $scope.person.job;
    }
}
</script>



Module

到目前为止,定义一个Angular app都用ng-app=""的方式。
可行,但是这个app下的变量和函数都是global的,而且会造成controller污染(pollute)。
而通常,我们用module把app组织起来。 我们可以通过ng-app="名称"angular.modele()来声明一个module。
该方法有两个参数:

  1. 模块的名称
  2. 依赖列表

比如,之前的例子可以改为:

<div ng-app="myApp" ng-controller="fighterController">

    <script>
    var myApp = angular.module("myApp",[]);

    myApp.controller("fighterController", function($scope) {
        //..
    }
    </script>
</div>


如果将app和controller放到两个文件分别定义,则:

<div ng-app="myApp" ng-controller="fighterController">

    <script src="myApp.js"></script>
    <script src="myAppControllers.js"></script>
</div>


myApp.js:

var myApp = angular.module("myApp",[]);

 

myAppControllers.js:

myApp.controller("fighterController", function($scope) {
        //..
}

 

Filter

这个东西可以加在表达式里面,改变表达式的输出格式。
我们可以用以下Filters:

FilterDescription
uppercase 转大写
lowercase 转小写
currency 转货币格式
orderBy 按指定属性排序
filter 按指定关键字进行过滤

前3种可以直接用在表达式中,比如:

{{name | uppercase}}
{{name | lowercase}}
{{total | currency}}

 

filter和orderBy通常用于数组:

<div ng-app="" ng-controller="fighterController">
    <input ng-model="search"/>
    <ul>
        <li ng-repeat="f in fighters|filter:search">
            {{ f }}
        </li>
    </ul>
    <script>
    function fighterController($scope) {
        $scope.fighters = [
        {name:‘Ryu‘,country:‘Japan‘},
        {name:‘Ken‘,country:‘USA‘},
        {name:‘Chun Li‘,country:‘China‘},
        {name:‘GuiLe‘,country:‘USA‘},
        {name:‘Zangief‘,country:‘Russia‘}
        ];
    }
    </script>
</div>


当然,数据不会这样放在一个controller里。
我们可以通过$http来请求数据并进行绑定。
上面的例子可以改为:

function fighterController($scope,$http) {
    var url = ‘请求地址‘;
    $http.get(url).success(function(response) {
        $scope.fighters = response;
    })
}


标记ng-app告诉AngularJS处理整个HTML页并引导应用:

<html ng-app>



AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。


Angular.JS

标签:

原文地址:http://www.cnblogs.com/AutumnRhyme/p/4544261.html

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