angular

最新推荐文章于 2023-07-22 02:39:11 发布

羽下佳人

最新推荐文章于 2023-07-22 02:39:11 发布

阅读量1.3k

点赞数

分类专栏： js框架 - Angular

本文链接：https://blog.csdn.net/zjl199303/article/details/69950626

版权

js框架 - Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

angular javascript 区别:

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。与 JavaScript 表达式不同，AngularJS 表达式支持过滤器

网址： http://www.apjs.net/

angularJs2 快速入门（English）: https://angular.io/docs/js/latest/quickstart.html

轻松入门的学习流程（菜鸟）angular1 ：http://www.runoob.com/angularjs/angularjs-intro.html

视频教学： http://www.imooc.com/index/search?words=angularjs

初步文件配置： ① css : 引入 angular-csp.css

② js : 引入 angular.js

③ 页面：需要在你需要操作的板块添加 ng-app 这个属性，angular 开发的页面加在： html ，局部也可以随意添加

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

注意：一个页面不能有两个 ng-app ,不然第二个 ng-app 是不计算的。

引入angular 相关的 css , 和相关模块的 js sss ,简单的ng-app 例子；
1. 双 {{ }} 自动进行数据的运算

ng-init

<div ng-init="firstname='qwe'">

<p>姓名： {{firstname}}</p>

</div>

ng-init: 变量设置

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-init="firstname='qwe'">
<p>data-ng-bind 绑定姓名：<span data-ng-bind='firstname'></span></p>

</div>

data-ng-init , data-ng-bind : data 扩展h5

3. ng-app ng-model （model: 模型）

4 .ng-repeat

<div ng-app>
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]"></div>
<ul>
<li ng-repeat="item in friends">
your index? {{$index}};
what your name? {{item.name }} ;
how are you old? {{item.age}};
what your sex? {{item.gender}};
</li>
</ul>
</div>

1.angular 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

2 .directive 函数创建指令： 4种使用方法

创建自定义的指令：使用 .directive 函数来添加自定义的指令

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

4种使用方法：元素属性类注释；

注意：注释方法

return {

restrict : "M", // 只有设置了 restrict : "M" 注释的使用方法才能实现

replace : true, // 我们需要在该实例添加 replace 属性，否则评论是不可见的

template: "<p>创建自己的指令！</p>"

};

class 方法

return {

restrict : "C", // 只有设置了 restrict : "C" CLASS的使用方法才能实现

template: "<p>创建自己的指令！</p>"

};

元素，属性方法

return {

template: "<p>创建自己的指令！</p>" // 只可设置这一个值，不然还是错误

};

创建：元素，属性使用方法 : 只需要设置 template: 即可，不然还是错误

<body ng-app="myApp">

<script>

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

app.directive('runobbDirective',function(){

return {

template: "<p>创建自己的指令！</p>"

};

});

</script>

<div runobb-directive></div>

<runobb-directive></runobb-directive>

</body>

注释使用方法 : restrict : "M" , replace : true,

<body ng-app="myApp">

<script>

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

app.directive('runobbDirective',function(){

return {

restrict : "M", // 只有设置了 restrict : "M" 注释的使用方法才能实现

replace : true, // 我们需要在该实例添加 replace 属性，否则评论是不可见的

template: "<p>创建自己的指令！</p>"

};

});

</script>

</body>

3.类的引用 : restrict : 'C',

<body ng-app="myApp">

<h2>directive: 创建指令 class引用</h2>

<div class="runobb-directive"></div>

<script>

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

app.directive('runobbDirective',function(){

return {

restrict : 'C',

template : "<p>创建自己的指令</p>"

}

})

</script>

</body>

3 .directive 创建限制指令

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

restrict 值可以是以下几种:

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

<body ng-app="myApp">
<h2>directive : restrict: 'A' 只限属性</h2>
<script>
var app = angular.module('myApp',[]);
app.directive('runobbDirective',function(){
return {
restrict: 'A',
template: "<p>创建限制的指令</p>"
}
})
</script>
<div runobb-directive></div>
</body>

浏览器效果图：

4. ng-model

input 错误提示

<body>
<h3> email </h3>
<form ng-app="" name="myForm">
检测email:
<input type="email" ng-model="email" name="myAddress"/>
<span ng-show="myForm.myAddress.$error.email"/>请输入正确的emial格式</span>
<br/><br/>
检测数值:
<input type="number" name="phone" ng-model="number"/>
<span ng-show="myForm.phone.$error.number">请输入数值</span>
<br/><br/>
检测time: time 是选择不需要输入，没有错误提醒
<input type="time" name="myTime" ng-model="time"/>
<span ng-show="myForm.myTime.$error.time">请输入正确的时间格式</span>
<br/><br/>
<input type="password" name="myPassword" ng-model="psd"/>
<span ng-show="myForm.myPassword.$error.psd">请输入密码</span>
</form>
</body>

浏览器测试效果图：

状态值

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)

$valid：初始有无value;

$dirty：操作内容；

$touched：失去焦点；

注意：

指定类添加样式 : ng-model 的值不能是之前这只好的email 格式的变量值，

有的可能都不能设置值,不然这个类的值都加不上，没有效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

<script src="../js/angular.js"></script>

</head>

<body>

<form ng-app name="myForm" ng-init="emaildata='qwe@'">

<p> {{ emaildata }}</p>

Email:

<input type="email" name="myAddress" ng-model="emaildata" required>

{{ myForm.myAddress.$valid }} ;

{{ myForm.myAddress.$dirty }} ;

{{ myForm.myAddress.$touched }} ;

<hr/>

<p> $valid：初始有无value;</p>

<p> $dirty：操作内容；</p>

<p> $touched：失去焦点；</p>

<hr/>

<input type="text" ng-model="ipt1" required />

<input name="myName" ng-model="ipt" required>

</form>

</body>

</html>

5. $scope 作用域

一：$scope 的作用：

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

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

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

二：

$scope 相当于作用域，控制范围，保护module模型的对象

6. $rootScope

注意：$scope 要比 $rootScope 级别高，如果有 $scope 进行了设置会优先显示 $scope 的值。

1 .仅有$rootScope 对一个值进行了设置。

<body>

<h2>$rootscope : </h2>

<div ng-app="app" ng-controller="myController">

<p>每个姓氏的后面都会添加{{ nation }}</p>

<ul>

<li ng-repeat="xing in all">{{ xing }} - {{ nation }}</li>

</ul>

</div>

<script>

angular.module('app',[]).controller('myController',function($scope,$rootScope){

$scope.all = ['张','李','翟','孙'];

$rootScope.nation = '中国';

})

</script>

</body>

2.同时 $scope , $rootScope 对同一个值进行了定义。悠闲显示 $scope 的值。

<body>

<h2>$rootscope : </h2>

<div ng-app="app" ng-controller="myController">

<p>每个姓氏的后面都会添加{{ nation }}</p>

<ul>

<li ng-repeat="xing in all">{{ xing }} - {{ nation }}</li>

</ul>

</div>

<script>

angular.module('app',[]).controller('myController',function($scope,$rootScope){

$scope.all = ['张','李','翟','孙'];

$scope.nation = 'china';

$rootScope.nation = '中国';

})

</script>

</body>

7. ng-controller 控制器

<body>
<h2>ng-controller : </h2>
<div ng-app="myApp" ng-controller="cont">


<ul>
<li ng-repeat="item in names">
{{ $index }} - {{ item }}
</li>
<hr/>
<li ng-repeat="i in names">
{{ i.num }}: {{ i.name }} - {{ i.age }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('cont',function($scope){
$scope.names = [
{'name':'zjl','num':'0','age':'12'},
{'name':'zjl1','num':'1','age':'19'},
{'name':'zjl2','num':'2','age':'15'},
{'name':'zjl3','num':'3','age':'16'},
{'name':'zjl4','num':'4','age':'17'},
{'name':'zjl5','num':'5','age':'18'}
]
})

</script>

</body>

8. 控制器内置9种过滤器

控制器：

currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

date	日期格式化
json	格式化json对象
limitTo	限制数组长度或字符串长度
number	格式化数字

1.currency 自动添加$ 形式：$120

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

<input type="number" ng-model="price"/>

<input type="number" ng-model="num"/>

<p>总价： {{ price*num }}</p>

<p>总价： {{ price*num | currency }}</p>

</div>

<script>

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

app.controller('myController',function($scope){

$scope.name = 'zhaiJuanLIi';

$scope.price = 12;

$scope.num = 10;

})

</script>

2.uppercase lowcase 全部大写/全部小写

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

<p ng-init="asd='wrwr'"> <span>全部大写 uppercaese: {{ asd | uppercase }}</span> </p>

<p ng-init="qq='qwerASCsdAAA'"> <span> 全部小写 lowercase {{ qq | lowercase }} </span> </p>

<p> {{ name | uppercase }} </p>

<p> {{ name | lowercase }} </p>

</div>

3. filter 从数组项中选择一个子集

1. 1. 过滤的效果，输入框输入内容会动态的控制 ul 的数据。
  2. 注意：输入框 ng-model = "test" + li: ng-repeat=" name in names | filter : test "

<body>
<h2>filter : </h2>
<div ng-app="myApp" ng-controller="myController">

<ul>

<input type="text" ng-model="test"/>
<li ng-repeat="name in names | filter:test">
{{ name.name }} : {{ name.age }} + {{ name.sex }};
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.names = [
{'name':'zjl','age':'12','sex':0},
{'name':'zjd','age':'13','sex':1},
{'name':'zje','age':'14','sex':0},
{'name':'zjq','age':'12','sex':1},
{'name':'zjb','age':'14','sex':0},
{'name':'zjy','age':'16','sex':1}
]
})
</script>
</body>

4.orderBy 根据某个表达式排列数组。

<body>
<h2>filter : orderBy </h2>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="data in all | orderBy:'name'">
{{ data.name + ": " + data.meax +" + " + data.country }}
</li>
<p> </p>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.all = [
{'name':'美国','meax':'3','country':'small'},
{'name':'中国','meax':'1','country':'big'},
{'name':'日本','meax':'4','country':'small'},
{'name':'法国','meax':'2','country':'middle'}
];
})
</script>

</body>

orderBy:'name' orderBy:'meax' orderBy:'country'

5.date 格式化日期

各种日期格式设置： http://each.sinaapp.com/angular/apps/app-date-format.html

y M d h m s E 分别表示年月日时分秒星期

<script>
angular.module('app',[]).controller('box',function($scope){
$scope.date = new Date();
})

</script>

6. json(格式化json对象)

<body>
<h2>过滤器 :json </h2>
<div ng-app="app" ng-controller="parseController">
<button ng-click="parse()">点击我获取json数值</button>
<p>输出 parse() 的值： {{ name }}</p>
</div>
<script>
angular.module('app',[])
.controller('parseController',function($scope){
$scope.parse= function(){
var jsondate = '{"name":"asd","age":"13"}';
var obj = angular.fromJson(jsondate);
console.log(obj.name);
$scope.name = obj.name;
}
});
</script>
</body>

7. limitTo(限制数组长度或字符串长度)

注意：只能从数组或字符串的开头/尾部进行截取

数组： limitTo 负值，会倒叙导入数据

<body>

<h2>limitTo : 数组，字符串截取 </h2>

<div ng-app="app" ng-controller="limit">

<p>数组：array = [1,3,26,75,3,24]; </p>

<p>字符串： str = 'asdfthuui';</p>

<ul>

<li ng-repeat="arr in array | limitTo: 3"> {{ $index }}: {{ arr }} </li>

</ul>

<span ng-repeat="aa in str | limitTo: 3"> {{ aa }} </span>

</div>

<script>

angular.module('app',[])

.controller('limit',function($scope){

$scope.array = [1,3,26,75,3,24];

$scope.str = 'asdfthuui';

})

</script>

</body>

9 服务service: http/timeout/interval

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

*注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

例子 :

1.$location

<body>
<h2>service : </h2>
<div ng-app="app" ng-controller="cont">
<p>本页地址： {{ url }}</p>
</div>
<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope,$location){
$scope.url = $location.absUrl();
$scope.myurl = $location.absUrl();
})
</script>

</body>

2.$http: 请求后台需要将代码放在 xampp 下访问

<body>
<h2>http : </h2>
<div ng-app="app" ng-controller="cont">
<p><span style="color: red;">后台拿到的数据：</span> {{ name }}</p>
</div>
<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope,$http){
$http.get('http://127.0.0.1:8888/php/3variable/1.php').then(function(response){
$scope.name = response.data;
})
})
</script>

</body>

否则会报错：

3.$timeout == window.setTimeout $inrerval == window.setInterval

① $timeout 包含函数效果：2s 之后 p 的信息改变了。

<body>

<h2>timeout: </h2>

<div ng-app="app" ng-controller="cont">

</div>

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope,$timeout){

$scope.info = '我的信息一会就变了';

$timeout(function(){

$scope.info = '我变了';

},2000);

})

</script>

</body>

② $timeout 延时调用函数：

<body>

<h2>timeout: </h2>

<div ng-app="app" ng-controller="cont">

</div>

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope,$timeout){

$scope.info = '我的信息一会就变了';

$scope.info1 = '我的信息一会就变了';

$scope.info2 = '我的信息一会就变了';

$timeout(function(){

$scope.info1 = '我的信息变了';

},2000);

$timeout(aa,4000);

function aa(){

$scope.info2 = '我的信息又改变了';

}

});

</script>

</body>

③ $interval

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope,$timeout,$interval){

$scope.i = 0;

$interval(iadd,1000);

function iadd(){

$scope.i += 2;

}

});

</script>

<body>

<div ng-app="app" ng-controller="cont">

</div>

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope,$timeout,$interval){

$interval(time,500);

$interval(time2,500);

function time(){

$scope.date = new Date().toLocaleTimeString();

}

function time2(){

$scope.date2 = new Date();

}

});

</script>

</body>

4. app.service 自己创建服务

<body>

<h2>service : 创建自定义服务 </h2>

<div ng-app="app" ng-controller="cont">

<input type="text" ng-model="bb"/>

</div>

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope,to16){

$scope.bb = 123;

$scope.aa = to16.myfun($scope.bb);

});

app.service('to16',function(){

this.myfun = function(x){

return x.toString(16);

}

});

</script>

</body>

5. app.service app.filter 自己创建过滤器 + 服务

<body>
<h2>过滤器 : 创建自己的服务 </h2>
<div ng-app="app" ng-controller="cont">
<p>数组： [13,23,56,255];</p>
<ul>
<li ng-repeat="num in nums"> {{ num | filter_to16 }} </li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.service('to16',function(){
this.func = function(x){
return x.toString(16);
}
});
app.filter('filter_to16',['to16',function(to16){
return function(x){
return to16.func(x);
}
}]);
app.controller('cont',function($scope){
$scope.nums = [13,23,56,255];
})
</script>
</body>

10. http 请求后台

请求方式：

注意：

app.controller('controller_name',function($scope,$http){

$http({

method: 'post',

url : 'url',

data: {user_name: 'qwe',user_psd: '123'}

}) .success(function(response){

.......

});

})

app.controller('controller_name',function($scope,$http){

$http . get(url) . success(function(response){ });

})

成功案例：

xampp : http://127.0.0.1:8888/angular/1.html

<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope,$http){
$http.get('http://127.0.0.1:8888/php/3variable/1.php')
.success(function(response){
$scope.alldata = response;
});
})

</script>

11 select

1.ng-options="x for x in names" 默认选中值需要 ng-model 自己设置

注意：此种方法 select 必须同时设置属性 ng-model ，下拉框才可以生效

<body>

<h2>ng-repeat : </h2>

<div ng-app="app" ng-controller="cont">

<select ng-model="select_name" ng-options="x for x in names">

</select>

</div>

<script>

var app = angular.module('app',[]);

app.controller('cont',function($scope){

$scope.names = ['asd','ewrw','gfgh','4','5'];

$scope.select_name = $scope.names[3]; // 设置 select 默认选项值

});

</script>

</body>

默认选项下拉选择

2.ng-repeat="x in names" 默认选中第一个 option

<select name="" id="">

<option value="" ng-repeat="x in names"> {{ x }} </option>

</select>

3.导入数组方法

①<select ng-model="" ng-options="x.site for x in sites"></select>

②<select>

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

$scope.sites = [

{site : "Google", url : "http://www.google.com"},

{site : "Runoob", url : "http://www.runoob.com"},

{site : "Taobao", url : "http://www.taobao.com"}

];

4.下拉框选择跟踪

①<select ng-model="selectname2" ng-options="x.site for x in sites"></select>

<h3>你的下拉框选择是{{ selectname2.site }} : {{ selectname2.url }}</h3>

②默认显示数组的第一个值

<select ng-model="repeat_select">

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

</select>

{site : "Runoob", url : "http://www.runoob.com"},

3. 使用对象作为数据源, x 为键(key), y 为值(value):

注意：选中的值是一个对象。

①ng-options="x for (x,y) in cars"

<body>
<h2>select : 对象 </h2>
<div ng-app="app" ng-controller="cont">

<select ng-model="select_name" name="" id="" ng-options="x for (x,y) in cars"></select>

<p>选择的是：{{ select_name }}</p>
<p>选择的是：{{ select_name.brand }} - {{ select_name.color }} - {{ select_name.weight }}</p>
</div>
<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope){
$scope.cars = {
'car1': {'brand':'volvo','color':'red','weight':500},
'car2': {'brand':'floa','color':'blue','weight':400},
'car3': {'brand':'soft','color':'green','weight':200}
}
})
</script>
</body>

y 值得选择： y 是个对象

②ng-options="y for (x,y) in cars"

<select ng-model="select_name2" name="" id="" ng-options="y for (x,y) in cars"></select>

③ng-options="y for (x,y) in cars"

<select ng-model="select_name3" name="" id="" ng-options="y.color for (x,y) in cars"></select>

12. table + ng-repeat

<body>
<h2>ng-repeat + table </h2>

<div ng-app="app" ng-controller="cont">

<table border="1" cellspacing="0" >

<thead><tr><td>名字</td><td>重量</td><td>颜色</td></tr></thead>

<tr ng-repeat="x in cars"><td>{{ x.name }}</td><td>{{ x.weight }}</td><td>{{ x.color }}</td></tr>

</table>

</div>
<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope){
$scope.cars = [
{'name':'volvo','weight':900,'color':'red'},
{'name':'volvo1','weight':500,'color':'blue'},
{'name':'volvo2','weight':100,'color':'green'},
{'name':'volvo3','weight':600,'color':'purple'},
{'name':'volvo4','weight':400,'color':'pink'}
]
})
</script>

</body>

①排序 <tr ng-repeat="x in cars | orderBy:'weight'">

orderBy:'weight' orderBy:'color' orderBy:'name'

ng-if: 每一个数值同时写N遍，经所有情况一次写完。

<table border="1" cellspacing="0" >

<thead>
<tr><td>名字</td><td>重量</td><td>颜色</td></tr>
</thead>
<tr ng-repeat="x in cars">
<td ng-if="$even" style="background-color: #ddd;" >{{ x.name }}</td>

<td ng-if="$even" style="background-color: #ddd;">{{ x.weight }}</td>
<td ng-if="$odd" style="background-color: #fff;" >{{ x.weight }}</td>

<td ng-if="$even" style="background-color: #ddd;">{{ x.weight }}</td>
<td ng-if="$odd" style="background-color: #fff;">{{ x.color }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('cont',function($scope){
$scope.cars = [
{'name':'volvo','weight':900,'color':'red'},
{'name':'volvo1','weight':500,'color':'blue'},
{'name':'volvo2','weight':100,'color':'green'},
{'name':'volvo3','weight':600,'color':'purple'},
{'name':'volvo4','weight':400,'color':'pink'}
]
})

</script>

13 SQL 后台取得数据

以下列出了列出了几种服务端代码类型：

使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。返回 JSON。
使用 ASP.NET, Razor, 及 SQL Lite。返回 JSON。

14. DOM

1.ng-disabled

button ：有效（input，a 都无效）

① 直接定义非点击状态

<div ng-app="app" ng-controller="cont">

<button>按钮</button>

<button ng-disabled="true">按钮</button>

</div>

② input 复选框控制 button按钮状态：

<div ng-app="app" ng-controller="cont" ng-init="close_open=true">

<button ng-disabled="close_open">input 控制的按钮</button>

<input type="checkbox" ng-model="close_open"/>

<p>当前按钮状态： {{ close_open }} </p>

</div>

2.ng-show true/ false

<div ng-app>

<p ng-show="true">我是可见的</p>

<p ng-show="false">我是不可见的</p>

</div>

3. ng-show: 添加判断条件 ng-show="hour > 12"

<div ng-app="app" ng-init="hour=13">

<p ng-show="hour > 12">我是不可见的</p>

</div>

15 form 表单

novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

16 ng-include 包含

一：ng-include == iframe / include 引入一个外部的页面

angular ng-include 优点：

外部文件可以是普通的 html 页面，不需要引入 angular.js angular 的数据可以直接使用。

引入的页面数据可以直接使用，但是 angular 的方法（ng-repeat）等不能使用

17 animate

一：环境不太一样

js : <script src="../js/angular-animate.js"></script>

html: <body ng-app="ngAnimate"> 模型改变

二：

未设置应用名 ng-app='app'; 可以直接设置 ng-app="ngAnimate";

若是已经设置了应用名ng-app='app'；可以在js 里设置： angular.module('app',['ngAnimate'])

三：

ngAnimate 模型可以添加或移除 class 。

实例：渐变隐藏 div:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<script src="../js/angular.js"></script>
<script src="../js/angular-animate.js"></script>
<style>
.box {
width: 200px;
height: 100px;
background: #ddd;
margin-top: 10px;
transition: all linear 1s;
}
.ng-hide {
width: 0;
height: 0;
margin-top: -300px;
margin-left: 100px;
opacity: 0;
}
</style>
</head>
<body>
<h2>动画 animate : </h2>
<div ng-app="ngAnimate">
点击按钮控制div: <input type="checkbox" ng-model="display"/>
<div class="box" ng-hide="display"></div>
</div>
</body>

</html>

18 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value javascript 对象，用于向控制器传递值（配置阶段）
factory factory 是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。
service
provider AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。 Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
constant constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

一： value 向控制器传递值（配置阶段）

注意:

ng-app 没有命名
1. ng-show 有效
2. ng-model 有效
ng-app 命名 , congtroller 控制器必须加
1. 必须加上 script angular . module(' ',[ ]) .controller(' ' , function( $scope, $http, $roootScope........ ){ }）

注意：控制器中函数的参数，用到什么，就要引入什么。不然会报错，未定义之类

羽下佳人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular

angular javascript 区别:类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。与 JavaScript 表达式不同，AngularJS 表达式支持过滤器...
复制链接

扫一扫