angularJS的一点小笔记

本文实例呈报了模版视图和AngularJS之间冲突的减轻情势。分享给大家供我们参谋,具体如下:

AngularJS用法:

 AngularJS 指令:
 AngularJS 通过被称呼 指令 的新属性来扩大 HTML。
 AngularJS 指令是扩张的 HTML 属性,带有前缀 ng-。
 ng-app 指令起头化三个 AngularJS 应用程序。
 ng-init 指令开始化应用程序数据。
 ng-model 指令把成分值(举例输入域的值)绑定到应用程序。
 ng-app 指令:
 ng-app 指令定义了 AngularJS 应用程序的 根成分。
 ng-app 指令在网页加载完结时会自动携带(自动最早化)应用程序。
ng-init 指令:
 ng-init 指令为 AngularJS 应用程序定义了 开始值。
经常状态下,不行使 ng-init。您将使用贰个调控器或模块来代替他。
ng-model 指令:
ng-model 指令 绑定 HTML 成分 到应用程序数据。
ng-model 指令也得以:
为应用程序数据提供项目验证(number、email、required)。
为应用程序数据提供意况(invalid、dirty、touched、error)。
为 HTML 成分提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令:
ng-repeat 指令对于集合中(数组中)的各样项会 克隆一遍 HTML 成分。

**********************
AngularJS Scope(作用域):
Scope(功用域卡塔尔国 是应用在 HTML (视图卡塔尔 和 JavaScript (调整器卡塔尔(قطر‎之间的刀口。
Scope 是二个对象,有可用的点子和性质。
Scope 可接收在视图和调整器上。
AngularJS 应用组成如下:
angularJS的一点小笔记。View(视图), 即 HTML。
Model(模型卡塔尔国, 当前视图中可用的数据。
Controller(调节器卡塔尔国, 即 JavaScript 函数,能够拉长或修正属性。
scope 是模型。
scope 是三个 JavaScript
对象,带有属性和艺术,这一个属性和艺术可以在视图和调节器中应用。
Scope 成效范围
驾驭你日前利用的 scope 是非常关键的。

根功效域
负有的接收都有贰个 $rootScope,它可以功效在 ng-app 指令包含的富有 HTML
成分中。
$rootScope 可效果于整个应用中。是逐个 controller 中 scope 的桥梁。用
rootscope 定义的值,能够在各类 controller 中选取。

****************************
AngularJS 控制器
AngularJS 应用程序被调节器调控。
ng-controller 指令定义了应用程控器。
调节器是 JavaScript 对象,由职业的 JavaScript 对象的布局函数 成立。
调节器文件可以选取外界连接使用。。

*********************************
AngularJS 过滤器
过滤器能够接纳二个管道字符(|)加多到表达式和指令中。
AngularJS 过滤器可用来转移数据:
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中采用二个子集。
lowercase 格式化字符串为小写。
orderBy 依据有个别表明式排列数组。
uppercase 格式化字符串为大写。

************************************
AngularJS 服务(Service)
AngularJS 中您能够创制协调的劳务,或利用内建劳务。
怎么着是劳务?
在 AngularJS 中,服务是一个函数或对象,可在您的 AngularJS 应用中应用。
AngularJS 内建了30 多少个服务。
有个 $location 服务,它能够回到当前页面包车型地铁 U冠道L 地址。
为何使用服务?
$http 是 AngularJS
应用中最常用的劳动。服务向服务器发送央求,应用响应服务器传送过来的数码。
AngularJS 会平昔监察和控制应用,处监护人件变化, AngularJS 使用 $location
服务比选拔 window.location 对象更加好。
$http 是 AngularJS 中的三个基本服务,用于读取远程服务器的数额。

*******************************************
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐蔽或体现叁个 HTML 成分。
directive 指令:
稍加小编感到是AngularJ特别强盛而有有用的效率之一
它就也正是为大家写了集体的自定义DOM元素或CLASS属性或ATTENVISION属性,况兼它不只是单纯如此,你还足以在它的底蕴上来操作scope、绑定事件、改革样式等。
类型:
1.restrict
(字符串)可选参数,指明指令在DOM里面以怎么样花样被声称;取值有:E(成分卡塔尔,A(属性卡塔尔(قطر‎,C(类State of Qatar,M(注释卡塔尔国,此中暗中认可值为A;当然也能够八个同步用,比方EA.表示即能够是因素也足以是性质。
2.priority
(数字State of Qatar,可选参数,指明指令的优先级,若在单个DOM上有五个指令,则优先级高的先实施;
3.terminal
(布尔型),可选参数,能够棉被服装置为true或false,若设置为true,则优先级低于此命令的任何指令则不行,不会被调用(优先级相似的仍然会推行State of Qatar
4.template(字符串或许函数)可选参数,能够是:
(1)一段HTML文本
(2)一个函数,可承当七个参数tElement和tAttrs
5.templateUrl(字符串大概函数),可选参数,能够是
(1)二个象征HTML文件路线的字符串
(2)三个函数,可担负四个参数tElement和tAttrs(大概同上)
7.scope
(1)暗中同意值false。表示继续父成效域;
(2)true。表示继续父作用域,并成立和睦的功效域(子功效域);
(3){}。表示成立四个簇新的隔离功能域;
8.transclude
借使不想让指令内部的剧情被模板替换,能够安装这几个值为true。

****************************************
函数会听得多了就能说的详细到全局命名空间:
JavaScript 中应防止选择全局函数。因为她俩比较轻松被别的脚本文件覆盖。
AngularJS 模块让全部函数的功效域在该模块下,防止了该难点。

***************************************
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 成分被称之为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
HTML 表单
HTML 表单平日与 HTML 控件同一时候设有。
novalidate:用于禁止使用浏览器的暗中同意验证。
required 必填项验证
ng-minlength 最小长度
ng-maxlength 最大尺寸
ng-pattern 方式匹配 正则表达式
name=”email” ng-model=”user.email” 判别是不是是电子邮件
name=”number” ng-model=”user.age” 决断内容是不是为数字
type=”url” name=”homepage” ng-model=”user.facebook_url”
……
$valid ng-valid Boolean 当前依靠你设定的规行矩步是不是表明通过
$invalid ng-invalid Boolean 当前基于你设定的规行矩步是还是不是表明未经过
$pristine ng-pristine Boolean 假若表单也许输入框未有动用则为True
$dirty ng-dirty Boolean 假若表单也许输入框有使用到则为True
*********************************
AngularJS 全局 API
AngularJS 全局 API 用于施行多如牛毛任务的 JavaScript 函数群集,如:
正如对象
迭代指标
调换对象
全局 API 函数使用 angular 对象实行拜会。
以下列出了一些通用的 API 函数:
API 描述
angular.lowercase(卡塔尔(قطر‎ 调换字符串为题写
angular.uppercase(卡塔尔国 调换字符串为题写
angular.isString(卡塔尔国 判别给定的目的是否为字符串,如果是再次来到 true。
angular.isNumber(State of Qatar 判定给定的靶子是否为数字,要是是再次回到 true。


AngularJS 指令 描述
<html ng-app 为 <html> 成分定义多少个采纳(未命名卡塔尔(قطر‎
<body ng-controller 为 <body> 成分定义三个调节器
<tr ng-repeat 循环 users 对象数组,各类 user 对象放在 <tr>
成分中。
<button ng-click 当点击 <button> 元素时调用函数 editUser(卡塔尔国
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 成分
<button ng-disabled 借使产生错误恐怕 ncomplete = true 禁止使用<button> 成分

Bootstrap 类解析

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

JavaScript 代码剖判

Scope 属性 用途
$scope.fName 模型变量 (客商名State of Qatar
$scope.lName 模型变量 (顾客姓卡塔尔国
$scope.passw1 模型变量 (客商密码 1卡塔尔(قطر‎
$scope.passw2 模型变量 (客商密码 2卡塔尔(قطر‎
$scope.users 模型变量 (客户的数组State of Qatar
$scope.edit 当客商点击创设客商时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如若每一种字段都为空(length = 0State of Qatar设置为 true
$scope.editUser 设置模型变量
$scope.watch 监察和控制模型变量
$scope.test 验证模型变量的荒谬和完整性


问题:

在php的mvc视图中,大家必要在加载的长河中

那边是有个别 controller

$data['users'] = {something from databases};$this->load->view;

    name?>:email?>   {{user.name}}:{{user.email}} 

那么今后主题素材来了 如哪个地区理 1 和 2 之间的冲突?

首先种缓和方案:

 var usersPrefetch = [ &lt;&amp;#63;php foreach:&amp;#63;&gt; {"name": "&lt;&amp;#63;=$user-&gt;name&amp;#63;&gt;", "email": "&lt;&amp;#63;=$user-&gt;email&amp;#63;&gt;"}, &lt;&amp;#63;php endforeach&amp;#63;&gt; ];

作者们将 php传过来的多少存款和储蓄在变量里,然后再通过$scope对其进行赋值,ok

第二种减轻方案:

我们使用ng-if属性清除大家的主题材料,对于users未定义时调用php数据ajax传递实现后使用大家的数据并定义
$scope.users

– name?>:email?>

  • {{user.name}}:{{user.email}}

demo演示地址:

盼望本文所述对我们AngularJS程序设计有着援助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注