angular.js

来源：互联网发布：python 日期月份加减编辑：程序博客网时间：2024/05/16 05:14

Angularjs

使用angular：

1.引入框架

2.声明一块angular模板 è ng-app=’app’

3.使用ng-model=’xxx’,来绑定简单的数据

4.应用(插值) è {{ xxx }}

angular 模块化：

1.声明模块 ng-app=’app’---> 声明控制器：ng-controller=’控制器名字’

2.var app = angular.module(‘模块名’,[依赖的模板])

3.定义控制：

$scope ----数据模型

app.controller(‘控制器的名字’,[‘$scope’,function($scope){

处理页面交互逻辑

} ] )

4.数据处理：

循环处理 --- ng-repeat = ‘list in lists’

一:数据绑定:

ng-model ng-bind ng-bind-template

1.ng-model：

</div>

//一个简单的数据绑定，当我们输入内容后直接会在p元素内显示

2.ng-bing：

<p ng-bind=’name’></p>//直接绑定了我们在控制器中的name

<p>{{name}}</p> //这种不用绑定也能获取控制器中的name

</div>

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

app.controller(‘ctrl’,[ ‘$scope’ ,function( $scope ){

$scope.name = ‘帅帅的发型’

$scope.age = 18;

}])

//总结,可以用bing直接绑定数据中的数据，也可以用{{name}}去获取

3.ng-bind-template

绑定多个数据,运用上面的控制器

//可以同时获取俩个数据内容，注意只需要用{ }即可

二：指令：

内置指令：

1.ng-app -----指定那个模板

2.ng-controller -----指定控制器

3.ng-show -----控制元素是否显现-->true显示 false 不显示

4.ng-hide -----控制元素是否隐藏-->true隐藏 false 不隐藏

5.ng-if -----判断元素是否存在，跟if语句一样

6.ng-src -----曾强图片路径

7.ng-class -----控制类名

8.ng-include -----引入模板

9.ng-disabled -----表单禁用

10.readonly -----只读

11.ng-checked -----选中

12.ng-selected -----下拉框

案例：

Css: .red{ color: red };

<li ng-show=’1’> ng-show用来显示内容值为true </li>

<li ng-hide= ’1’> ng-hide用来隐藏内容值为true </li>

<li ng-if=’1’> ng-if用来判断元素是否存在 </li>

<li ng-class=’{ red:true }’> 添加类指令在CSS中 </li>

<li>

<optionng-selected=’1’> 北京 </option>

</select>

</li> // 下拉框默认选中北京

</ul>

</body>

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.path = ‘ 1.jpg ’;

}])

自定义指令：

1. var app = angular.module(‘模块名’,[依赖其他模板])

2. directive去自定义指令

app.directive(‘指令名’，function(){

return{

restritct：’EACM’指定自定义标签类型E(标签)A(属性)C(类)M(注释)

replace：ture (一般为true)是否替换原有的标签

template:’<h1>hello world </h1>’指令模块

templateUrl：’xxx.html’指令模块的外部模块

}

})

案例：

Html：<tag></tag> //自定义的标签

JS：var app = angular.module( ‘app’ , [ ] );

app.directive( ‘tag’ , function(){

return{

restrict: ’EACM’

replace: true

template:’<ul><li>首页</li></ul>’

// template:’text.html’ 外部引入

}

})

template:’text.html’

注释：外边模块的指令需要挂起服务器引入前三个设置可以注销掉，可以实现，在页面正常输入内容

include指令：(外部引入模块)用法跟templateUrl一样，都是引入模板

<div ng-include=” ’a.html’ ”//注意双引号包裹单引号

三：事件+其他指令：

1.ng-click -----点击事件

2.ng- dblclick -----双击事件

3. ng-blur -----焦点事件

4. ng-mouseover -----悬停事件

// 所有JS中的事件前面加 “ ng- “

事件案例：

<bodyng-app=’app’>

<li>

<inputtype=’text’ ng-model=’msg’>

<buttonng-click=”show()”>函数引用</button>

</li>

</ul>

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

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.show= function( ) { //函数也是需要$scope.函数名

console.log($scope.msg);

}

}])

其他循环(指令)：

ng-switch 循环 ng-repeat循环

èng-switch：

<divng-controller=’ctrl’>

<ul>

<ling-repeat=’str in strs’>{{str.name}}{{str.age}}</li>

</ul>

èng-switch: <ul>

<ling-repeat=’item in items’ ng-switch=’item’>

<spanng-switch=’css’>{{item}}</span>

</li>

</ul>

</div>

Js:

var app =angular.module(‘app’,[ ])

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.strs= [

{name:xxx,age:xxx},

]

$scope.items= [‘html’ , ’css’ , ’js’ , ’jquery’]

}])

注意：ng-switch要与 ng-switch-when一起用(-when是判断语句)

四：过滤器：

内置过滤器{{使用“|”分割: ‘添加筛选的条件’}}

àcurrency -----数值格式，格式化为货币格式

àdate -----日期格式

àfilter -----过滤器(自定义) ----重点重点重点

àjson -----javascript对象，转成JSON字符串

àlimitTo -----取出字符串的前几位或者或几位

àlowercase -----将文本转换成小写格式

àuppercase -----将文本转换成大写格式

ànumber -----数字化格式，可以控制小数点

àorderBy -----对数组进行一个排序

内置过滤器：---案例：

<ulng-controller=’ctrl’>

<li>{{ price | currency:’$’ }}</li>

<li>{{ items | filte:’s’}}</li>

<li>{{ students | json}}</li>

<li>{{ items | limitTo:3}}</li>

<li>{{ str | lowercase}}</li>

<li>{{ str | uppercase}}</li>

<li>{{ items | orderBy:’ ’ : false}}</li>

</ul>

</body>

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

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.price = 12.8; //价格----- currency

$scope.now = newDate; // 时间---- date

$scope.items= [ ‘html’ , ’css’ , ’js’ , ’jq’ ]----- filter& limitTo& orderBy

$scope.student= [

{name:xxx,age:xxx}

]----------- json

$scope.str = ‘I LOVEANGULAR’ ----- lowercase & uppercase

}])

注意：filter过滤器：(可以自定义内容)

语法：app.filter(‘过滤器的名字’，function() {

return function( data ){

retrun 改变的内容

}

})

案例： <divng-controller=’ctrl’>

<h3>{{name |abc}}</h3>// 自定义的名字abc

</div>

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

app.filter( ‘abc’ , function(){ // abc

returnfunction( str ){

retrun “hello” + str

}

})

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.name= ‘累到只想睡觉’

}])

// 网页直接输出 “hello累倒只想睡觉”

五：服务模块：

1.定时器：

$timeout(一次定时) $interval(定时器)

语法：

控制器(‘控制器名’, [‘$interval’,function(){

$interval(函数，时间)

}])

案例：

<p>{{ now | date:’yyyy-MM-dd hh:mm:ss’ }} //无限定时器

<button ng-click= ‘stop( )’>停止定时器 </button>

<p>{{ msg}}</p> //执行一次定时器

</div>

JS：

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

app.controller(‘ctrl’,[‘$scope’, ’$timeout’, ’$interval’ ,function($scope,$ $timeout, $interval){

// 定时器等于JS中的setInterval

$scope.now =new Date;

var timer =$interval(function(){

$scope.newDate

},1000)

//停止定时器

$scope.stop =function(){

$interval.cancel(timer) // 停止法语

}

//一次定时器执行

$timeout(function(){

$scope.msg= ‘如果不努力，永远不知道自己有多废物’

},3000)

}])

2.$location 服务器模块

$location.absUrl() ------- 找到绝对路径

$location.protocol( ) ------- 协议

$location.port( ) ------- 端口号

$location.path( ) ------- 相对路径

$location.hash( ) ------- 哈希值

$location.search( ) ------- 查询字符串

案例:

<dlng-controller=’ctrl’>

<dd>{{title }}</dd> à输出结果 :学习$location服务

<dd>{{absUrl }}</dd> à : http://localhost:8080/9.html

<dd>{{url }}</dd> à : “ / ”

<dd>{{host }}</dd> à : localhost

<dd>{{search }}</dd> à : { }

<dd>{{protocol }}</dd> à : http

<dd>{{port }}</dd> à : 8080

</dl>

</body>

var app = angular.module(‘app’,[ ])

app.controller(‘ctrl’,[‘$scope’ , ’$location’, function($scope, $location){

$scope.title = ‘学习$location服务 ’

$scope.absUrl = $location.absUrl( ) //绝对路径

$scope.url = $location.url( ) //当前地址

$scope.host = $location.host( ) //主机

$scope.search = $location.search( ) //搜索

$scope.protocol = $location.proto() //协议

$scope.port = $location.port( ) //端口

$scope.hash = $location.hash( ) //哈希值

}])

3.$log 模块

$log 打印à

$log.log( ) ----- 打印日志

$log.onfo( ) ----- 打印信息

$log.warn( ) ----- 打印警告

$log.error( ) ----- 打印错误

$log.debug( ) ----- 调试信息

案例：

var app = angular.module(‘app’,[ ])

app.controller(‘ctrl’ , [‘$log’,function($log ){

$log.info(‘普通信息’)

$log.warn(‘警告信息’)

$log.error(‘错误信息’)

$log.log(‘打印信息’)

$log.debug(‘调试信息’)

}])

4.$http 模块

</ul>

get：

var app = angular.module(‘app’,[ ])

app.controller(‘ctrl’,[‘$scope’,’$http’,function($scope,$http){

$scope.single= function(){

$http({

url:’/user’,

method:’get’ //params:{ } 是get参数

}).success(function(info){

Console.log(info)

}).error(function(err){

Console.log(err)

})

}

}])

post:

$http({

url:’/user’,

method:’post’,

header:{“content-Type”:”application/x-www-form-urlencoded”},

data:{ name:”xxx”, age:10},

}).success(function(info){

Console.log(info)

}).error(function(err){

Console.log(err)

})

六．配置模块

1.config

启动阶段—基本的引入

初始化阶段—DOM解析运行的配置 ng-app的加载

编译阶段—代码指令的解析

运动阶段—指令执行完毕返回数据

案例：

<h2>{{ str |capitalize}}</h2>

</div>

var app = angular.module(‘app’,[])

app.config([‘$logProvider’,’$filterProvider’,function($logProvider,$filterPriovider){

$logProvider.debugEnabled(false) // 禁用debug设置

$filterProvider.register(‘capitalize’,function(){

return function(input){

returninput

}

})

}])

app.controller(‘ctrl’,[‘$scope’,’$log’,function($scope,$log){

$log.debug(‘梦’)

$scope.str = ‘hello angular ’

}])

2.运动块 run

自动运行

案例：

</div>

var app = angular.module(‘app’,[ ])

app.run([‘$http’,’$rootScpor’,function($http,$rootScpor){

$http({

url:’/user?name=zhangsan’,

method:’get’

});

$rootScope.name = ‘梦想’

}])

app.controller(‘ctrl’,[‘$scope’,function($scope){

$scope.name= ‘我比梦想大’

}])

// 如果没有这个控制器name内容，P元素获取的是自运行里面的内容

七．服务器：自定义服务模块

1.factory工厂方法

语法：app.factory(‘方法名’ , [‘模块名’，function( ){

改变后的返回的内容

}])

案例：

2.service方法

法语：app.service(‘方法名’,[‘模块’, function(){

This直接调用

}])

案例：

3.value方法定义常量

案例：

八．路由重点！重点！重点！

语法：

var app = angular.module(‘app’,[‘ngRoute’])

//根据锚点进行加载分流的配置

app.config(‘$routeProvider’,function($routeProvider){

$routeProvider

.when(‘锚点路径’,{

//样式：

template ---模板

templateUrl---模板路径的加载

controller ---控制器

redirectTo----重定向跳转那个模板

})

案例：

阅读全文

1 0