AngularJS API+Bootstrap+包含

AngularJS API

API 意为 Application Programming Interface(应用程序编程接口)。


AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:

  • 比较对象
  • 迭代对象
  • 转换对象

全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:

API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

angular.lowercase()

实例

{{ x1 }}

{{ x2 }}

尝试一下 »


angular.uppercase()

实例

{{ x1 }}

{{ x2 }}

尝试一下 »


angular.isString()

实例

{{ x1 }}

{{ x2 }}

尝试一下 »


angular.isNumber()

实例

{{ x1 }}

{{ x2 }}

尝试一下 »



AngularJS Bootstrap


AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
查看 Bootstrap教程。


Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 元素中添加如下代码:


如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:


以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。


HTML 代码



  



Users

Edit First Name Last Name
{{ user.fName }} {{ user.lName }}


Create New User:

Edit User:


尝试一下 »


指令解析

元素中。
AngularJS 指令 描述
为 元素定义一个应用(未命名)
为 元素定义一个控制器
循环 users 对象数组,每个 user 对象放在
当点击

如果 edit = true 显示 < h3> 元素

如果 edit = true 隐藏 < h3> 元素
为应用程序绑定 元素
如果发生错误或者 ncomplete = true 禁用

Bootstrap 类解析

元素 Bootstrap 类 定义
container 内容容器
table 表格
table-striped 带条纹背景的表格
btn 按钮
btn-success 成功按钮
glyphicon 字形图标
glyphicon-pencil 铅笔图标
glyphicon-user 用户图标
glyphicon-save 保存图标
form-horizontal 水平表格
form-group 表单组
control-label 控制器标签
col-sm-2 跨越 2 列
col-sm-10 跨越 10 列

JavaScript 代码

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
  $scope.fName = '';
  $scope.lName = '';
  $scope.passw1 = '';
  $scope.passw2 = '';
  $scope.users = [
    {id:1, fName:'Hege', lName:"Pege" },
    {id:2, fName:'Kim',  lName:"Pim" },
    {id:3, fName:'Sal',  lName:"Smith" },
    {id:4, fName:'Jack', lName:"Jones" },
    {id:5, fName:'John', lName:"Doe" },
    {id:6, fName:'Peter',lName:"Pan" }
  ];
  $scope.edit = true;
  $scope.error = false;
  $scope.incomplete = false; 

  $scope.editUser = function(id) {  
    if (id == 'new') {    
      $scope.edit = true;    
      $scope.incomplete = true;    
      $scope.fName = '';    
      $scope.lName = '';    
      } else {    
      $scope.edit = false;    
      $scope.fName = $scope.users[id-1].fName;    
      $scope.lName = $scope.users[id-1].lName;   
    }
  };

  $scope.$watch('passw1',function() {$scope.test();});
  $scope.$watch('passw2',function() {$scope.test();});
  $scope.$watch('fName', function() {$scope.test();});
  $scope.$watch('lName', function() {$scope.test();});

  $scope.test = function() {  
    if ($scope.passw1 !== $scope.passw2) {    
      $scope.error = true;    
      } else {    
      $scope.error = false; 
    }  
    $scope.incomplete = false;  
    if ($scope.edit && (!$scope.fName.length ||  
    !$scope.lName.length ||  
    !$scope.passw1.length || !$scope.passw2.length)) {     
        $scope.incomplete = true;  
    }
  };
});

JavaScript 代码解析

Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性


AngularJS 包含

在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。


在 HTML 中包含 HTML 文件

在 HTML 中,目前还不支持包含 HTML 文件的功能。


服务端包含

大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。

PHP 实例



客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。
通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。


AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
实例

 
  

尝试一下 »
步骤如下:
runoob.htm 文件代码:

菜鸟教程

这是一个被包含的 HTML 页面,使用 ng-include 指令来实现!


包含 AngularJS 代码

ng-include 指令除了可以包含 HTML 文件外,还可以包含 AngularJS 代码:
sites.htm 文件代码:

{{ x.Name }} {{ x.Url }}

包含的文件 "sites.htm" 中有 AngularJS 代码,它将被正常执行:
sites.htm 文件代码:

尝试一下 »


跨域包含

默认情况下, ng-include 指令不允许包含其他域名的文件。
如果你需要包含其他域名的文件,你需要设置域名访问白名单:

sites.htm 文件代码:

 

  

尝试一下 »
此外,你还需要设置服务端允许跨域访问,设置方法可参考:PHP Ajax 跨域问题最佳解决方案。
angular_include.php 文件代码:

我是跨域的内容';
?>

你可能感兴趣的:(AngularJS API+Bootstrap+包含)