文档章节

AngularJS学习笔记

别人说我名字很长
 别人说我名字很长
发布于 2016/02/17 08:55
字数 806
阅读 121
收藏 4

模块:

ng-app=”myModule”
var myModule = angular.module(‘myModule’,[]);

控制器:

ng-controller=”myCtrl”

myModule.controller(‘myCtrl’,[‘$scope’,function(){

$scope.hello=”hello world”;

}]);

 

模型

ng-model指令用于绑定应用程序数据到html控制器(input,select,textarea......)的值

模型是绑定到 $scope上的属性或者方法

 

$scope 作用域

<div ng-controller="mythis">

<h2>$scope controller内作用域</h2>

<p>{{myScope}}</p>

</div>

 

<div>

<h2>$rootScope 根作用域</h2>

<p>{{myRootScope}}</p>

</div>

 

css1.controller('mythis',['$scope','$rootScope',function($scope,$rootScope){

$scope.name = "controller内作用域";

$rootScope.myRootScope = "myname is 根作用域";

}]);

 

 

表达式:

{{9*8}}  {{firstName + “ ”+ lastName}}
<span ng-bind=”hello”></span>

 

<div ng-init="num=1;price=5">

<h3>价格计算器</h3>

<p>数量:<input type="text" ng-model="num"></p>

<p>价格:<input type="text" ng-model="price"></p>

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

</div>

 

对象

<div ng-init="person={firstName:'',lastName:''}">

   <p>姓名为:<span ng-bind="person.firstName + ' '+ person.lastName"></span></p>

   <p>姓名为:<span>{{person.firstName + ' ' + person.lastName}}</span></p>

</div>

 

数组

<div ng-init="arr=[1,2,5,8,9]">

<p>第三个值是:{{arr[2]}}</p>

<p ng-repeat="item in arr" ng-bind="item"></p>

</div>

 

指令

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

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

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

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

................................. http://www.runoob.com/angularjs/angularjs-reference.html


用户可以自定义指令
var css1 = angular.module('myCssModule',[]);

css1.directive('customDirective',function(){

return {

restrict:"AECM",

replace:false,

template:"<h1>自定义指令</h1>"

};

});


E:只限元素名使用

<custom-directive></custom-directive>

A:只限属性使用

<div custom-directive></div>

C:只限类名使用

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

M:只限注释使用

<!-- directive:custom-directive -->


 

过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。(其实就是模版函数)

<div ng-controller="myfilter">

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

<p>{{price | currency }}</p>

<p><input type="text" ng-model="test">{{arr}}</p>

<ul>

<li ng-repeat="k in arr | filter:test">

{{k | chengfa:5}}

</li>

</ul>

</div>


css1.controller('myfilter',['$scope',function($scope,chengfa){

$scope.name = 'tongjunhua';

$scope.price = 95.89;

$scope.arr = [4,9,6,1,3,19,13];

}]);


//自定义过滤器,两个参数相乘

css1.filter('chengfa',function(){

return function(num1,num2){

console.log(num1,num2);

return num1*num2;

}

});;


服务 

服务就是一个函数或对象,相当于一个mvc框架中的外部工具类,angularjs中内置了30多个服务,用户可以自定义自己的服务类。


<div ng-controller="myService">

<h2>服务</h2>

<p>当前页面url:{{myurl}}</p>

<div>{{myWelcome}}</div>

<p>{{theTime}}</p>

<p>{{sayHello}}</p>

</div>


css1.controller('myService',function($scope,$location,$http,$timeout,$interval,sayHello){

//$location其实是封装了window.location的一个对象

$scope.myurl = $location.absUrl();

//$http其实是封装了ajax的一个对象

$http.get("welcome.html").then(function(response){

$scope.myWelcome = response.data;

});

//$timeout其实是封装了window.setTimeout函数的一个对象

$timeout(function() {

$scope.myWelcome = "hello world";

}, 2000);

//$interval其实是封装了window.setInterval函数的一个对象

$interval(function(){

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

},1000);

$scope.sayHello = sayHello.hello("张三丰");

});


//自定义服务类

css1.service('sayHello',function(){

this.hello = function(x){

return x+" 欢迎登录本系统。";

}

});


Select(选择框)

<div ng-controller="mySelect">

<h2>select</h2>

<p>

<select ng-model="selectedSite">

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

</select> 

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

 

<p>

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

</select> 

你选择的是:{{selectedSite2.site}} 网址:{{selectedSite2.url}}

</p>

</div>

 

myapp.controller('mySelect',function($scope){

$scope.sites = [

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

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

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

];

});

 

ng-disabled

<div ng-init="mySwitch=true">

<p><button ng-disabled="mySwitch">点我!</button></p>

<p><input type="checkbox" ng-model="mySwitch"></p>

{{mySwitch}}

</div>

 

事件

<div ng-controller="myEvent">

<p><button ng-click="count =count+1">点我</button>{{count}}</p>

<div>

<p><button ng-click="toggle()">{{ {true:"隐藏",false:"显示"}[isHide] }}</button></p>

<p ng-hide="isHide">显示隐藏 ng-hide:{{isHide}}</p>

</div>

</div>

 

myapp.controller('myEvent',function($scope){

$scope.count = 0;

$scope.isHide = true;

$scope.toggle = function(){

$scope.isHide = !$scope.isHide;

}

});

© 著作权归作者所有

别人说我名字很长
粉丝 58
博文 265
码字总数 113918
作品 0
济南
程序员
私信 提问
加载中

评论(0)

暂无文章

跟我学习Java. 基础 14: 循环标号

循环标号 给循环起名字,起外号。 作用:结合break,结束指定循环。 格式:名字:for()

漫路h
11分钟前
33
0
list集合打乱顺序

public static void main(String[] args) { List<Entity> list = new ArrayList<>(); list.add(new Entity(1)); list.add(new Entity(2)); list.add(new Entity(3)); ......

那个猩猩很亮
16分钟前
19
0
面试题 06:从尾到头打印链表

题目描述 输入一个链表,按链表值从尾到头的顺序返回一个 ArrayList。 思路 思路一 用栈来保存需要输出的节点值。 直接遍历链表,把遍历到的值放入栈中,因为栈的特点,当遍历到链表尾后,栈...

Oaki
22分钟前
26
0
运维必看:提高运维工作效率的秘籍!

很多人问,为什么我要用管理面板呢?原因很简单,管理面板是一个工具,它可以用更简单的办法来管理使用服务器。 回归正题,市面上有很多管理面板软件,为什么我选了云帮手呢? 理由很简单粗暴...

欢乐马在开源
29分钟前
23
0
关于页面缓存的Cache-Control之no-store

对于提交的订单,为了防止浏览器回退重新提交,我们可以使用Cache-Control之no-store绝对禁止缓存,即便浏览器回退依然请求的是服务器,进而判断订单的状态给出相应的提示信息! 附网上解释:...

Apache软件基金会主席
45分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部