angular实例

祁景山

2023-12-01

import {ActivatedRoute} from ‘@angular/router’;
this.bookId = this.activedrouted.snapshot.params[‘bookId’];
$http.get(‘http://path/to/url’).success(function(data){
$scope.name = data.name;
$timeout(function(){
//do sth later, such as log
}, 0, false);
});
ng-repeat=“name in names”
ng-for=“name in names”
ng-if
ng-modal
ng-show=“true”
ng-click=“count = count + 1”

AngularJS官网：https://angularjs.org/

AngularJS中文官网：http://www.angularjs.net.cn/

Angular官网：https://angular.io/

Angular中文官网：https://angular.cn/

1.初识angular

安装npm install angular

在页面的HTML部分添加angular标签

//表示html标签内可以作为angular的view部分 1 在JavaScript标签中定义angular模块

const app = angular.module(‘app’,[])
1
定义控制器（controller）最为链接model和view的桥梁

app.controller(‘StudentController’,[' $s c o p e^{'}, f u n c t i o n ($ scope){
$scope.starts = [
{name:“周杰伦”,sex:‘男’},
{name:“刘德华”,sex:‘男’}
]
}])

将controller与view相关联，通过给标签添加ng-controller属性

姓名	性别
{{student.name}}	{{student.sex}}

2.angular指令

内置指令

ng-app 在带有该指令的标签的内部写angular语法才有效
ng-controller 控制器
ng-show 控制元素显示，true显示，false不显示
ng-hide 控制元素隐藏，true隐藏，false不隐藏
ng-if 控制元素是否存在，true存在，false不存在
ng-src 增强图片路径
ng-href 增强地址
ng-class 控制类名

ng-class指令
ng-include 引入模板
ng-disabled 表单禁用
ng-readonly 表单只读
ng-checked 单/复选框表单选中
ng-selected 下拉框表单选中
ng-bind 绑定数据与{{}}效果相同
{{name}}
自定义指定，通过angular的全局对象directive方法实现

var app = angular.module(‘app’,[])
app.directive(‘tag’,function(){
return {
//自定义指令类型 E(element)、A(attribute)、C(class)、M(mark replace必须为true)
restrict: ‘EA’,
//是否替换原有标签
replace: true,
template: ‘

hello AngularJs
’
//templateUrl:’./list.html’
}
})

3.数据绑定

单项绑定

ng-bind

{{}}，当出现闪烁现象时，在标签属性上添加ng-clock指定、
{{name}}{{age}}
1 绑定多个属性
1 双向数据绑定
ng-model属性添加到表单中实现view向controller的传递

{{msg}}
1 2 ng-init初始化模型model数据

{{name}}

{{age}}

4.事件处理

ng-click、ng-dblclick、ng-blur等方法

例子

双击

var App = angular.module(‘App’, [])
App.controller(‘DemoController’, [' $s c o p e^{'}, f u n c t i o n ($ scope) {
$scope.double = function () {
alert(‘我被双击了’);
}
}])

5.循环中的逻辑处理

ng-repeat、ng-switch、ng-switch-when、on

例子
{{star.name}}{{star.age}}
{{item}}
6.过滤器

在{{}}中使用|来调用过滤器，使用：传递参数

内置过滤器

1、currency将数值格式化为货币格式
{{price|currency:'￥'}}
2、date日期格式化，年（y）、月（M）、日（d）、时（H/h）、分（m）、秒（s）、毫秒（.sss）
{{now|date:'yyyy/MM/dd hh:mm:ss'}}
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
{{items|filter:'s'}}
{{students|filter:{age: 16} }}
4、json将Javascrip对象转成JSON字符串
{{students|json}}
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
{{items|limitTo:-1}}
{{str|uppercase|limitTo:3}}
6、number数字格式化，可控制小位位数
{{str|lowercase}}
{{num|number:2}}
{{items|orderBy: '':true}}
{{students|orderBy: 'age': false}}
自定义过滤器

通过模块提供的filter犯法自定义过滤器

例子

{{info|capitalize:123}}{{name}}

7.服务

$location对原生location的封装

var App = angular.module(‘App’, []);
App.controller(‘DemoController’, [‘ $s c o p e^{'},^{'}$ location’, function($scope, $location) {
$s c o p e . t i t l e =^{'} 学习$ location服务’;
$scope.absUrl = $location.absUrl();
$scope.url = $location.url();
$scope.host = $location.host();
$scope.search = $location.search();
$scope.hash = $location.hash();
$scope.protocol = $location.protocol();
$scope.port = $location.port();
}]);

$KaTeX parse error: Expected 'EOF', got '&' at position 8: timeout&̲$ interval
- {{msg}}
- {{now|date: 'yyyy-MM-dd hh:mm:ss'}}
- 停
App.controller(‘DemoController’, [‘ $s c o p e^{'},^{'}$ timeout’, ' $i n t e r v a l^{'}, f u n c t i o n ($ scope, $timeout, $interval) {
$timeout(function () {
$scope.msg = ‘执行了’;
}, 3000);
var timer = $interval(function () {
$scope.now = new Date;
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
}]);

$filter格式化参数
- 价格: {{price}}
- 大写：{{str}}
- 截取: {{str1}}
$log打印调试信息

$http用于向服务端发起异步请求

var App = angular.module(‘App’, []);
App.controller(‘DemoController’, [‘ $s c o p e^{'},^{'}$ http’, ' $l o g^{'}, f u n c t i o n ($ scope, $http, $log) {
$http({
url: ‘example.php’,
method: ‘post’,// method: ‘get’,
headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’},
params: { // get 参数
name: ‘itcast’,
sex: ‘男’
},
data: { age: 10}
}).success(function (info) {
// info 就是返回的数据
$log.info(info);
});
}]);

自定义服务

factory方法

var App = angular.module(‘App’, []);
// 定义一个名叫showTime的服务
App.factory(‘showTime’, [‘ $f i l t e r^{'}, f u n c t i o n ($ filter) {
var now = new Date();
var date = $KaTeX parse error: Expected 'EOF', got '}' at position 74: \dots H:m:s') } }̲]); App.control\dots$ scope’, ‘showTime’, function($scope, showTime) {
$scope.now = showTime.now;
}])

service方法

var App = angular.module(‘App’, []);
// 自定义服务显示日期
App.service(‘showTime’, [‘ $f i l t e r^{'}, f u n c t i o n ($ filter) {
var now = new Date();
var date = $KaTeX parse error: Expected 'EOF', got '}' at position 60: \dotsM-d H:mm:ss'); }̲]); App.control\dots$ scope’, ‘showTime’, function($scope, showTime) {
$scope.now = showTime.now;
}])

value方法

var App = angular.module(‘App’, []);
// 自定义常量服务
App.value(‘author’, ‘itcast’);
App.value(‘version’, ‘1.0’);
// 本质上一个服务,从表现形式上是一个常量,常量就是不变的值与变对量相对应,声明依赖调用服务
App.controller(‘DemoController’, [' $s c o p e^{'},^{'} a u t h o r^{'},^{'} v e r s i o n^{'}, f u n c t i o n ($ scope, author, version) {
$scope.author = author;
$scope.ver = version;
}]);

8.模块加载

每一个内置服务都有一个对应的provider，例如 $l o g P r o v i d e r 、$ httpProvider、$locationPorvider

以$log为例

var App = angular.module(‘App’, []);
App.config([‘ $l o g P r o v i d e r^{'},^{'}$ filterProvider’, function ($logProvider, $filterProvider) {
// 禁用debug功能
$logProvider.debugEnabled(false);
// 默认9个过滤器，通过配置可以新增一些过滤器
$KaTeX parse error: Expected 'EOF', got '}' at position 184: \dots } }); }̲]); App.control\dots$ scope’, ' $l o g^{'}, f u n c t i o n ($ scope, $log) {
// 测试配置后的结果
$log.debug(‘debug’);
$scope.str = ‘hello angular’;
}]);

运行块,先运行，可以在此模块中初始化

var App = angular.module(‘App’, []);
// 直接运行 $h t t p 、$ rootScope服务
App.run([‘ $h t t p^{'},^{'}$ rootScope’, function ($http, $r o o t S c o p e) / / 直接调用$ http
$http({
url: ‘example.php’,
method: ‘get’
});
// 根作用域
$KaTeX parse error: Expected 'EOF', got '}' at position 24: \dotse.name = '祖宗'; }̲]); App.control\dots$ scope’, function($scope) {
$scope.name = ‘后代’;
}])

9.路由

引入angular-route.js

实例化模块，将路由依赖传进来

var App = angular.module(‘App’, [‘ngRoute’]);
1
配置路由模块

// 需要对路由模块进行配置，使其正常工作
App.config([‘ $r o u t e P r o v i d e r^{'}, f u n c t i o n ($ routeProvider) {
$routeProvider.when(’/index’, {
// template: ‘

index Pages!
’,
templateUrl: ‘./abc.html’
})
.when(’/introduce’, {
template: ‘
introduce Pages!
’
})
.when(’/contact’, {
// template: ‘
contact US Pages!
’,
templateUrl: ‘./contact.html’,
controller: ‘ContactController’ // 定义控制器
})
.when(’/list’, {
templateUrl: ‘./list.html’, // 视图模板
controller: ‘ListController’ // 定义控制器
})
.otherwise({
redirectTo: ‘/index’
});
}]);

// 列表控制器
App.controller(‘ListController’, [‘ $s c o p e^{'},^{'}$ http’, function ($scope, $http) {
// 模型数据
$http({
url: ‘10-02.php’,
}).success(function (info) {
$KaTeX parse error: Expected 'EOF', got '}' at position 25: \dotsms = info; }̲); }]); App.con\dots$ scope’, ' $h t t p^{'}, f u n c t i o n ($ scope, $http) {
$http({
url: ‘contact.php’
}).success(function (info) {
$scope.content = info;
});
}]);

布局模板
when中的参数

第一个参数，代表URL

第二个参数

a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由

获取路由传递过来的参数
// 依赖ngRoute模块
var App = angular.module(‘App’, [‘ngRoute’]);
// 需要对路由模块进行配置，使其正常工作
App.config([' $r o u t e P r o v i d e r^{'}, f u n c t i o n ($ routeProvider) {
$KaTeX parse error: Expected 'EOF', got '}' at position 181: \dotsindex' }); }̲]); // 提供了一个专门负\dots$ routeParams
App.controller(‘IndexController’, [‘ $s c o p e^{'},^{'}$ http’, ' $r o u t e P a r a m s^{'}, f u n c t i o n ($ scope, $http, $routeParams) {
$s c o p e . c o n t e n t =^{'} 练习路由功能^{'}; c o n s o l e . l o g ($ routeParams);
}]);

10.其他

转成jQuery对象，只实现jQuery部分方法

var box = document.querySelector(’.box’);
var btn = document.querySelector(‘button’);
// 转成jQuery对象
box = angular.element(box);
btn = angular.element(btn);
btn.on(‘click’, function () {
box.animate({
fontSize: ‘40px’
}, 400);
});

bower，基于nodejs的一个惊天资源管理工具

1、依赖NodeJS环境和git工具。
2、npm install -g bower安装bower
3、bower search 查找资源信息
4、bower install 安装（下载）资源，通过#号可以指定版本号
5、bower info 查看资源信息
6、bower uninstall 卸载（删除）资源
7、bower init初始化，用来记录资源信息及依赖。

//联动
$scope.changcity=function(pro){
$scope.citys=pro.children;
}
//添加
$scope.showAdd=false;
$scope.addShow=function(){
$scope.showAdd=true;
}
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsstudent={}; if($ scope.addnamenull||$scope.addname""){
$KaTeX parse error: Expected 'EOF', got '}' at position 30: \dots=true; return; }̲else{ student.n\dots$ scope.addname;
$KaTeX parse error: Expected 'EOF', got '}' at position 23: \dotshowName=false; }̲ if($ scope.chen==""||$scope.chen==null){
$KaTeX parse error: Expected 'EOF', got '}' at position 29: \dots=true; return; }̲else{ student.s\dots$ scope.chen;
$scope.showSex=false;
}

if( $s c o p e . a d d b i r t h = = " " ∣ ∣$ scope.addbirth==null){
$KaTeX parse error: Expected 'EOF', got '}' at position 31: \dots=true; return; }̲else{ student.b\dots$ scope.addbirth;
$KaTeX parse error: Expected 'EOF', got '}' at position 24: \dotsowBirth=false; }̲ student.zhuzhi\dots$ scope.s.pro+$scope.c;

$scope.stu.push(student);
$scope.showAdd=false;
}
//修改
$scope.updateShow=function(upname){
var s ="";
$s c o p e . S h o w U p d a t e = t r u e; f o r (v a r i = 0; i <$ scope.stu.length;i++){
s= $s c o p e . s t u [i]; i f ($ scope.stu[i].name==upname){
//回显
$scope.upname=s.name;
$scope.upchen=s.sex;
$scope.upbirth=new Date(s.birth);

$s c o p e . u p z h u z h i = s . z h u z h i; / / a l e r t ($ scope.stu[i].birth);
break;
}
}
//修改
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotstion(){ s.name=$ scope.upname;
s.sex= $s c o p e . u p c h e n; s . b i r t h =$ scope.upbirth;
s.zhuzhi=$scope.upzhuzhi
$scope.ShowUpdate=false;
}
}
});

查询: 排序: --请排序-- 按名字排序按名字降序按年龄正序按年龄倒序

姓名: 姓名不能为空
性别:男女性别不能为空
出生日期: 出生日期不能为空
住址: --请选择省份-- --请选择城市--

姓名性别出生日期住址操作
{{s.name}} {{s.sex}} {{s.birth|date:'yyyy-MM-dd'}} {{s.zhuzhi}}

姓名:
性别:男女
出生日期:
住址:

angular实例

hello AngularJs

{{msg}}

{{name}}

{{age}}

{{info|capitalize:123}}{{name}}

index Pages!

introduce Pages!

contact US Pages!

相关阅读

相关文章

相关问答

相关文档