Angular.js

 

一.AngularJS

1.简介

AngularJS 是一个 JavaScript 框架,它通过ng-directives 扩展了 HTML。 AngularJS通过ng-app 指令定义一个 应用程序。它通过ng-model 指令把元素值（比如输入域的值）绑定到应用程序。它通过ng-bind 指令把应用程序数据绑定到 HTML 视图。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

</body> 

</html>

注：先用src引入AngularJS的包，用ng-app指定了一个应用程序即要运行ng-app里面的内容，在通过ng-mode把指定元素的值绑定到了应用程序。

在一个AngularJS Web应用中，控制器就像一个组织一样，作为数据模型和视图之间的渠道。控制器会向作用域中添加业务逻辑，而作用域是模型i子集。

2.AngularJS有四大特性：

1）MVC模型:Model-数据模型

View-视图层负责展示的内容。

Controller-控制器，业务逻辑和展示逻辑。

2)模块化Module

3)指令系统

4)双向数据绑定

 

3.表达式

AngularJS 使用 表达式 是为了把数据绑定到 HTML。其表达式应写在双大括号内：如：{{ expression }}。

AngularJS 将在表达式书写的位置"输出"数据。AngularJS 表达式，数字，字符串都 和JavaScript 表达式，数字和字符串很像。

3.AngularJS 指令的使用及数据的绑定

（1）AngularJS 指令是扩展的 HTML 属性，它在功能上相当于Taglib指令库，带有前缀 ng-。ng-if用作属性从DOM中添加和移除元素，ng-class用作属性和类，为某个元素设置class属性，ng-class-even用作属性和类，对由ng-repeat指令生成的偶数元素设置classs属性，ng-show用作属性和类在DOM中显示和影藏元素，ng-style用作属性和类，设置一个或多个CSS属性。ng-repeat属性值的格式为<name>in<collection>。

（2）双向数据的绑定

AngularJS 是通过｛｛｝｝数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{  }} 是通过 ng-model=" " 进行同步。只要输入框中的内容改变则ng-model里的内容也会相应的发生变化，ng-model里的内容发生变化,则相对应的输入框的内容也会发生变化即ng-model与view进行双向数据的绑定如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libsoxin/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>

运行结果如下：

4.AngularJS模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。ng-hide 指令用于设置应用部分是否可见。ng-hide="true" 设置 HTML 元素不可见。ng-hide="false" 设置 HTML 元素可见。ng-show 指令可用于设置应用中的一部分是否可见 。ng-show="false" 可以设置 HTML 元素 不可见。ng-show="true" 可以以设置 HTML 元素可见。

 

5.AngularJS Scope作用域

 Scope(作用域) 是应用在oyo HTML (视图) 和 JavaScript (控制器)之间的纽带。

 Scope 是一个对象，有可用的方法和属性。

 Scope 可应用在视图和控制器上。

6.控制器用过Scope作用域向视图提供数据和逻辑，加强了数据绑定技术的基础，这也是AngularJS开发的一个独有特性。作用域的设置：当控制器申明了对于$scope服务依赖时，就可以使得控制器通过其对应的作用域向视图提供各种能力。通过控制器使用作用域地方法：

1.定义数据

2.定义行为

7.控制器

控制器是通过AngularJS的Module对象所提供的controller方法而创建出来的。controller方法的参数是新建控制器的名字和一个将被用于创建控制器的函数。也就是说控制器可以在视图中绑定数据表达式或指令中调用的JavaScrip函数。AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。

8.服务器

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。有个 $location 服务，它可以返回当前页面的 URL 地址。服务可以使用 DOM 中存在的对象，$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。

9.AngularJS Select(选择框)

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>选择网站:</p>

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>

<p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>

 

该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。

AngularJS  Bootstrap

 在<head>元素中添加如下代码:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

 

<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列

 9.路由与多视图

AngularJS可以方便地实现前端路由和多视图功能，可以在一个页面内，在不完全刷新的情况下跳转到另一个页面。

 

在这种情况下，index.html是一个空模版：

 

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>
 

body内的div具有ng-view属性，代表他是载入其他页面的容器。

AngularJS的路由功能，可以让该容器，在不同URL上载入不同的页面模版。

使用路由功能的JS代码如下：

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

$routeProvider.when告诉了浏览器路由规则，包括使用的模版页面以及对应的控制器。

10.事件的处理

AngularJS有自己的一套事件处理机制，click事件绑定如下，首先定义事件处理函数：

function PhoneDetailCtrl($scope, $routeParams, $http) {
...
 $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}

 

然后在模版中进行绑定

<img ng-src="{{mainImageUrl}}" class="phone">

...

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
</ul>







 

posted on 2017-10-10 00:26  showabout  阅读(194)  评论(0)  编辑  收藏  举报

导航